Desktop & mobile
True North online store
True North is a mock up for an online outdoor apparel store for the serious but everyday adventurer. I created this design as a UX and branding exercise by creating a simplified but delightful shopping experience. Coming up with full branding UI/UX and creation of brand guidelines was also a big part of this project. This is a large site so it was also a good excuse to use atomic design principles and patterns.
These are the results The logo was created using the golden ratio and is spread across a few pages in the slides below*.
The main purpose for these guidelines was to keep consistency throughout the site. It is also a clean way to communicate the brands message. I used an atomic design structure for the site as it allowed a clean and consistent way to create assets that could be interchanged quickly and easily.
Once the branding has been established I start creating user journeys, user flows and then some different level fidelity wireframes to find a solutions to the different design problems. This is one of the most interesting parts of the process. After that I continued with the first version of wireframes.
After a few rounds of ideations I felt that this design translated the user needs and business goals best. A final design was worked up into a high fidelity product to help stake holders and/or clients get a much clearer idea of the end outcome.
Atomic design system
Stage 4 cont
Bellow are some of the other inner page designs. I created and maintained an atomic design system to make sure the design stayed consistent through out and also to help speed up the work flow.
All the mobile elements and font sizes are designed inline with the latest higs standards and therefore follow the current desktop mobile interface best practices.
By creating an interactive prototype the client can get a real sense of how the product will work. It can help to confirm common visions among stakeholders and will reduce development times.