True north hero image

Project Type

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*.


Brand creation

Stage 1

Logo creation

Brand Identity

Stage 2

Brand guidelines

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.

Ideation phase

Stage 3

Possible solutions

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.

Ideation phase

Stage 4

Selected solution

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.

Full design

Atomic design system

Stage 4 cont

Other pages

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.

Higs standards

Stage 5

Responsive designs

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.


Stage 6

Interactive Prototype

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.   

Scroll to top