I worked closely with the Creative Director of the agency doing a consistent design system and the whole user interface for this app. In an initial stage of the project the client had an user journey map in mind and some low fidelity wireframes. I also took the approved branding that was made in an early stage by the team to begin with the design system.
My high level goals were:
- Make an interface easy to use for everyone following Material Design standards.
- Take the user journey map as a starting point and iterate along the process to refine it.
- Get a consistent look and feel using the brand / logo on the project across all the screens.
Technological skills used
User Interface Final Screens
Consistent Design System
I started my work by setting up the main elements of the brand from Illustrator in a consistent and flexible design system in Sketch. From the beginning, I created a Sketch library including all the design system and in a different file the user interface of the app. This way, any change made in the library it would affect automatically any other file linked to it.
It is important that from the beginning of the process to be organised with all the names of the art boards in Sketch. This way, everything will be easier when exporting all assets to Zeplin.
Design System in Sketch
The agency worked closely with the client on the wireframes and the user journey for the app getting some user feedback in the process. I used this wireframes all the time as a guide for the user interface design process. On the way, we got more feedback and we refined the user journey and the storymap overall of the app.
Wireframes provided by the client