With the visual direction established and user stories defined, we now move on to designing the individual screens, from concept to the polishing touches. We break this into four steps.
We take the defined visual style and decide which components we need to support the product. We try to resolve the system to as few pieces as possible to make a user’s experience streamlined. We combine these components into a system that solves the immediate needs of the product but is also flexible enough to handle future requirements.
Once we have a framework with the components we will use, we create a clean and predictable flow of information. We ensure conformance to the best practices and adherence to the human interface guidelines set by each platform.
While we provide the same capabilities on Android, iOS and the Web, the functionality may behave differently. We want users to be comfortable in their environment instead of forcing one solution on everyone.
Up until this point, we concentrated on the best-case scenarios of creating a great user experience. Now, we must tackle issues like dead ends and error messages. These what-if cases provide the customer with a safety net when something goes wrong. For instance, what happens when there is poor or no internet connectivity? Our designs ensure that your customers are not inconvenienced by this. Instead of displaying an error message like “Please try again when you have internet”, which blocks the user from proceeding, we create solutions to be offline first by storing information locally and sync the information when the connection is restored. Addressing these little details make an immense difference to users.
After finalising the information architecture, it is time to focus on the details of the wording that directs the user. We carefully craft the copy so that users easily anticipate what will happen next. Great copy makes the difference between an app that properly guides a user through the experience as opposed to leaving them confused.
Once we have designed, we often prototype the interactions to ensure that the solution flows smoothly. What might feel right conceptually may not work as well in implementation. Prototyping not only provides validation, but it also supplies engineering visuals on how the interactions should work.
We use various software programs at different levels of fidelity. For example, we might use Apple's Keynote for simple interactions but a tool like Framer when the interaction is complex and needs to be programmatically resolved. We can also deliver animation timings and curves to engineering in code, which saves the developers a lot of time and effort.