Application Mapping

application mapping

To determine the structure and the flow of the application, I made an App Map. It shows the various states that a user encounters. It helped me specify which screens would need to be designed and what their purpose was. Here it's used with HiFi mockups.

style guide

colors

grid & spacing

8 px layout grid

60 px high rows

4 column grid
16 px margins

typography

Inter Light 11 14 17 19

Inter Medium 11 14 17 19

Inter Semi Bold 11 14 17 19

logo

components

style guide

colors

8 px layout grid

60 px high rows

4 column grid
16 px margins

8 px layout grid

60 px high rows

4 column grid
16 px margins

grid & spacing

Inter Light 11 14 17 19
Inter Regular 11 14 17 19
Inter Semi Bold 11 14 17 19

typography

logo

components

prototypes

Onboarding

Dashboard

Search Market

Become a Creator

Environmental Impact

Account & Brands

Search Market

Environmental Impact

Account & Brands

hifi mocks

Incorporating User Research, component design & brand design, I finalized the direction & creation of the hifi mockups.

final thoughts

This case study serves as an organic repository of research assets I create throughout Kingdom's lifecycle. This document will be continually updated as we continue designing Kingdom.