UXO720 - Week 7 - Prototyping & Usability

March 12, 2022

This week was quite the challenge for me as I felt very rushed trying to focus on three simple screens for my wireframes. I tend to keep my wireframes very simple, with not a lot of text or content in them so I can focus more on the layout and flow of screens. I am also learning that e-commerce stores are incredibly complex systems with many UI design patterns. So far I've explored: user registration, account management, shopping lists, shopping carts, filters, product search, breadcrumbs, and pagination. What's interesting about these design patterns, is that most are invisible until you need them. Exploring around some e-commerce websites this week, I noticed that many of them let you dive into the product listings and for most of them you can add items to your cart without creating an account.

Usability Testing

We were tasked with doing some research on usability testing by developing two tests we could run on a website we found interesting. For this I looked at a website I noted in week 4: . Since they had a very simple version of what I am trying to design for my prototype, I felt like it would be good to create a couple tests based on their website. The tests I came up with were:

Task: Find a black backpack or bag that interests you and add it to your cart.
Task: Calculate the amount "freedom" your purchase provides maker of the product.

I found it challenging to come up with tasks that were not leading, but simplifying it down to a clear tasked based activity. In the example above, number two is problematic since it is very specific on the type of task being asked. I feel like it would require the user to have an understanding of what "freedom" is being tracked and why.

I found a usability testing plan template from https://www.usability.gov that was very helpful in understanding what goes into this process (Report Template: Usability Test | Usability.gov, 2022). I have never conducted a full usability test, as my background is mostly in human-centered design, so this was very helpful to understand how these test documents are structured.

Usability Testing for MIV

Having looked through my sketches and wireframes from week 4 and 5, I drafted a list of tasks that might be worth testing:

Determine how your business can benefit from ordering plastic free products
Calculate the amount of plastic waste your order will save
Search for a product based on a specific ingredient
Search for a product based on what you'd like to replace (type or band)?
Calculate your order size based on the amount of discount you'd like to receive
Find the product details of a bottle of hand sanitizer and determine the impact your potential purchase might have

Since the impact tracker is the most unknown aspect of this project I wanted to focus my usability tests and wireframes on it.

With that in mind, the two tests I wanted to design for are:

Calculate the amount of plastic waste your order will save
Calculate your order size based on the amount of discount you'd like to receive

Identify UI Design Patterns

There are three design patterns I am anticipating for my prototype:

Breadcrumbs - in all of the e-commerce systems, having a breadcrumb system was helpful for navigating around e-commerce stores that contain many products and their variations.
Registration - registration systems are a needed component of an e-commerce system. Designing a simple, easy-to-use registration system will allow customers keep track of their orders, updating shipping and billing addresses.
Process indicator - For our impact tracker on this system, one of the main areas we'd like to focus is some type of visual indicator on how your order impacts the environment.

Action Items

I need to update the new user flow based for environmental information
Review branding and colors for next week’s module

References

Usability.gov. 2022. Report Template: Usability Test | Usability.gov. [online] Available at: [Accessed 5 March 2022].