<aside> 👋
This, and all of the blogs, give an overview of the process and steps taken for each part. I’ve included images taken from the Figma File where the majority of the work lives to illustrate the process.
If you would still like to see further details on each part, please view the Figma File in full.
It can be found at the end of this page, or on this master page.
</aside>
A step I find really useful at this stage of the design process is to mock up a few key screens in Hi-Fi, from which I can develop the full design system.
To do this, I took 6 key wireframes and added my branding to them. I felt this worked well in areas, but struggled in others. This step made me reconsider my brand, and I wanted to get some opinions on what was working.
<aside>
At this point I went back to branding to redevelop it.
Below is a link to the first blog in that section.
</aside>
Having spent some time redeveloping my brand, I was ready to have another go as the application tests.
I took the another set of screens and developed them with the new brand material.
Overall I feel this approach is far stronger and is a fresher, friendlier, and more modular brand that will suit this project much better.
Full working and documentation of wireframing can be found in this FigJam file.