Kay Nguyen | UX Designer

Sweet Succulents

Information Architecture UX Design

— CLIENT

Sweet Succulents


— MY ROLES

Information Architect

UX Designer


— TIMELINE

1.5 weeks

Sept 2019


— TOOLS

GoogleSheets

Figma

InVision

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.

CONTEXT

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

PROBLEM

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?

PROCESS

I took the approach of a five step process to solve for the above problem:

1) STRATEGY

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.

2) SCOPE

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.

Scope, site structure, and flows were defined 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!

Initial wireframes from tree testing feedback

5) SURFACE

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:

INSIGHT 1

The filter drop down is confusing.


There’s a lack of differentiation between what buttons are clickable and unclickable.

SOLUTION 1

  • Create a style guide to differentiate between clicked and unclicked button states, considering heirarchy and size. 


Add applied action indicators for both filter and shopping bag icons.

INSIGHT 2

  • The payment section is tedious and long. 


How can the payment process be faster and easier for users?

SOLUTION 2

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.

STYLE GUIDE

Defining a design system gave users clear state change and actionable component feedback.

LOGIN SCREEN

Making the checkout experience faster, simpler for new, casual, and experienced master users.

FINAL DESIGN

The final design after applying insights from user testing and iterating are below:

INTERACTIVE PROTOTYPE

NEXT STEPS

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.