Art Supply Store
Information Architecture- UX Design
Art Supply Store
I was challenged to design a shopping app for two categories of users who want to browse and buy art products by appearance:
1) New users and experienced casual users
2) Experienced master users
I took the approach of a five-step process to solve for the above problem:
I outlined both user needs and business goals. New users and experienced casual users may want to just browse, checkout, and buy once.
I wrote out the content and the functions of the shopping app into google sheets to organize and outline the project scope.
I split the contents into featured items, sale items, regular priced items, and item details. Then, I wrote out the app functions by category of purchase flow and browse flow in google sheets.
To start to define information architecture, I listed around 30 art supply names and categorized them based on content characteristics.
Google Sheets was used to mimicking navigation systems and the flow of the site, then conducted tree-testing with users. Based on their patterns within GoogleSheets, I iterated on the content organization.
I also created a flowchart of screens, behaviours, and conditions to visualize hierarchy.
The UX design incorporates clear navigation and labelling systems such as calls to action, breadcrumbs, and navigation tabs in my design.
I applied UI design to the wireframes, created an interactive InVision prototype.
Defining a design system gave users clear state change and actionable component feedback.
The final design after applying insights from user testing and iterating are below:
This project was a great way to further explore principles of information architecture and the art of distilling complex information into simple flows with labeling, navigation, and organization systems.
With more time, I would revisit the functionality of logging in, perform usability tests, and improve the UI Design.