— MY ROLES
Information architecture is a way to take complex information and distill it in a way that is easy to navigate for users.
This quick design project was a way to flex those information architecture muscles.
I was challenged to design a shopping app for two categories of users who want to browse and buy succulents by appearance:
1) New users and experienced casual users
2) Experienced master users
Two challenges that I began to solve for were:
1) How might we organize, categorize, and present complex information in a quick and simple way?
2) How might we quickly iterate with user testing?
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.
However, experienced master users may want to receive recommendations based on their previous purchases. So, I made sure to include a recommendation feature.
I wrote out the content and the functions of the shopping app into GoogleSheets 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 GoogleSheets.
3) SITE STRUCTURE
To start to define information architecture, I listed around 30 succulent names and categorized them based on content characteristics like colour and texture. This would also inform the filter feature.
I used GoogleSheets to mimic 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.
The user tests informed new filtering preferences by shape and size which I had previously not listed as options. I also created a flowchart of screens, behaviours, and conditions to visualize hierarchy.
4) SCREEN STRUCTURE
One of the priorities of the project was to help users answer the questions:
Where am I? What am I doing? Where will I go?
So, I incorporated clear navigation and labeling systems such as calls to action, breadcrumbs, and navigation tabs in my design.
It was important to also include not only characteristic filters, but also the ability to search by name for experienced master users who know their succulents!
I applied UI design to the wireframes, created an interactive InVision prototype, and then conducted another round of usability tests.
There were two key insights from the user testing that I conducted:
The filter drop down is confusing.
There’s a lack of differentiation between what buttons are clickable and unclickable.
Add applied action indicators for both filter and shopping bag icons.
How can the payment process be faster and easier for users?
Create a login user flow for both one-time and return users.
One-time users can checkout as a guest if they don’t want store their credit card information in the app.
Return user can save time by creating an account to store their shipping, billing, and payment information.
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 more usability tests, and review the information displayed on the product description page to align with user needs. I would also improve the UI design.