At the UI Stage the agency get down to the visual part of the project.
First of all, we define the style of the concept to make it fit client’s vision. Most often we start with the Home page or any other which plays more important role according to the customer’s vision.
Moodboard / Look and Feel
To define which style client likes most, or which one fits the target audience we gather a list of works (moodboard).
Here designer might already create some sketches of the future style so that you can feel deeply the direction we’re moving in (look and feel).
Framework / Concept
Based on all gathered data we create and present the full concept of the design.
Corrections / Approval
After the concept presentation we are finalizing the details according to customers feedback on InVision App. This is the quickest and most efficient way to improve the concept.
After the first page or screen is ready, the general style is approved, the agency proceed to the other pages. Usually customer prioritize the pages e.g. to show some to investors or pass to the development team. That’s why we create the priority list and agree the order of the pages we’ll work on.
Same as on the UX stage every screen is discussed with the customer on InVision. And we make necessary correction until he or she is fully satisfied.
Clickable Prototype visually demonstrates the product to all participants in the process. It also has its following advantages:
- A great tool for the user-testing
- It’s a visual presentation to the customer. It’s much easier to understand the interactive prototype than static screens.
- The Visual Guide for the Developers
- Works great as a testing tool to check certain solutions.
From the final mockups we compile a prototype and provide it for testing.
Depending on customers needs it can be light prototype on InVision App or a HTML/CSS/JS prototype in Framer.
The next step is testing of the prototype by the representatives of the target audience, which is collected by the customer or by the agency.
Corrections / Approval
We gather feedback and make changes according to project requirements. This process might have several interactions.
Animations / Preparing Sources
After all the designs are ready, the final stage begins. At this stage all source files are prepared and organized for transfer to the customer or the development team, depending on who takes care of the development.
- Preparing materials for the development stage.
- Compiling source files and organize the layers.
- Transferring the prototypes
- Creating additional animations for developers, if necessary
- Giving feedback to the developers