Role - UX designer, UI designer
Breif - Build a platform that allows users to create there own custom skateboard by selecting individual components from an extensive database of products.
Challenge - With such a large selection of products across six main categories and an almost endless possible combination of custom boards available, it was important to find a way to organise the information and display it in a way that was accessible and allowed users to easily navigate to find the items they wanted.
When looking at how best to structure the information architecture we didn't want the process to be too rigid as it would take away the fun element, but we needed a way to streamline the process to reduce the number of non-viable components (Not all products are compatible with each other.) , by forcing the deck selection to be first, it drastically reduces the number of potential combinations.
With the fundamentals of our information architecture decided upon we could begin building our designs around that framework. Starting with paper wireframes we were able to quickly get our initial design ideas down. We focused on a graceful degradation approach designing for the largest screen first and then using those designs to work out how the elements would respond responsively to smaller screen sizes.
Our chosen layout designs were then recreated as digital wireframe versions allowing us to iron out the intricacies of each screen variation. The digital wireframe allowed us to focus on getting the user flow through the app working before beginning on the visual elements of the user interface.
Once we were happy with the layout of all our pages through the user flow we were able to progress onto making a low fidelity prototype for initial usability testing.
Following on from an initial round of usability tests on the lo-fi prototype, we were able to use the feedback to iterate on our design while incorporating all the visual elements, to create mock-ups, which much closer represent what the final product would look like across all screen variants.
With all the user interface visual elements in place, we were able to use our mock-ups to create a high fidelity prototype to test interactions and animations within the flow before finalising the design.