UI Case Study
Readify
Online Book Store
Created for my UI Design course at CareerFoundry
April - May, 2024 | Jess Cope
Objective
To use the user stories and brief, supplied by my UI Design course at CareerFoundry, to design an online bookstore, that helps everyone find products quickly and easily to match their particular needs.
Design process
Using the information provided by my course, I empathized with the user stories and defined jobs to be done. I then entered the ideation stage with low-fidelity wireframe sketches before digitizing these in Figma. Then I ran user tests to make sure I was centring the user over my own preferences, before finalising my designs.
Problem
I was asked to create an online store that sells the product of my choice with the following in mind:
Users don’t have the time or ability to visit physical stores and would rather buy their books on the go or from home.
Users struggle to find books they want in traditional stores.
Most users are proficient with technology but will greatly benefit from basic navigation and
clean design.
Users use the site most often on commutes to and from work, in the evenings, during lunch
breaks, and on weekends.
Needs to allow users to purchase their desired goods and have them delivered to any address, with free returns.
Users can access the shop from anywhere they can connect to the internet, whether on a mobile device or on a desktop.
Solution
Drawing from the information opposite I understood that I needed to design the following:
A mobile-optimized online book store.
Clear and simple branding for ease of navigation.
UI that isn’t overcomplicated.
Easy to understand check out process.
My responsibilities
Brand creation
Low-fidelity Wireframing
Mid-fidelity Wireframing
Prototyping
User Testing
High-fidelity Wireframing
Preference testing
Final UI
Brand creation Low-fidelity Wireframing Mid-fidelity Wireframing Prototyping User Testing High-fidelity Wireframing Preference testing Final UI
User stories
-
“As a customer, I want to be able to place multiple items in a shopping cart, so that I can purchase more than one item at a time.”
-
“As a returning customer, I want to be able to save items that I cannot buy to a wish list, so that I can purchase them at a later date.”
-
“As a customer, I want to have access to advanced filtering options, so that I don’t have to browse through a lot of products to find what I’m looking for.”
-
“As a customer, I want there to be a variety of payment options, so that I can choose the payment method that suits me best.”
User flow diagram
The user journey I decided to focus on for this project was the process of checking out.
Low-fidelity wireframes
User Story
“As a customer, I want there to be a variety of payment options, so that I can choose the payment method that suits me best.”
The Brand
I created a brand and brand guidelines before digitising my wireframes, to make sure the visual and written tone matched the values the UI needs to hold.
The Readify brand was designed to meet the needs of users looking for a clear and quick online alternative to book shopping.
The brand’s personality can be summed up in four words: Approachable, Helpful, Legible, and Convenient. And these have been applied across each aspect of the branding from colour palette to icons. For example, the assets make use of curves and roundedness which promote friendliness. Whitespace is applied to give clarity, simplicity and ease navigation. And the logo is an open book, in a calming blue colour, that is often associated with trustworthiness.
Mid-fidelity wireframes
User feedback
Before progressing any further with my designs I wanted to create an early prototype to test on some users.
The Scenario
“You are a new customer to this online book store and would like to make a purchase. Which steps would you take to accomplish this task?”
Participant 1
Name: Simon
Age: 59 years old
Occupation: Marketing Director.
Location: Auckland, New Zealand.
Proficient with tech, and has conducted his own user tests in the past.
Participant 2
Name: Louise
Age: 56 years old
Occupation: Marketing Director.
Location: Devon, England.
Not as proficient with tech.
Results
Pain point: Check out didn't feel secure to Participant 1.
Priority: Critical
Solution: Wording and iconography added to check out journey to evoke feeling of security. e.g lock icon.
Pain point: Participant 2 kept clicking outside of burger menu hotspot.
Priority: Critical
Solution: Increased space between logo and burger menu.
Pain point: Participant 1 didn’t understand they were purchasing a physical book.
Priority: Preferential
Solution: Drop down option added to product page for hardback, paperback or audio book.
Pain point: Participant 1 asked for about section/ more details on the retailer including a privacy policy.
Priority: Preferential
Solution: About section and privacy policy added to burger menu.
High-fidelity greyscale wireframes
Style guide
I used the brand guidelines I created earlier to define styles for colour, type and icons and applied these to my final UI.
Final User Interface - Mobile
Book categories
Why did I change the categories icon from photographic to illustrative?
I felt it wasn’t immediately clear what the user was seeing if you were to glance or see the category without its label. So I quickly realised I needed to create something that the user could recognise and was in keeping with the need to keep the design simple.
Preference test
In the guidelines I created earlier I established that headings should be in the brand blue, however when it came time to implement this design choice I was worried about clarity, hierarchy and accessibility. So I decided to run a preference test and shared the link with my peers on the course.
Team Black Headings
“Easier to differentiate.”
“Easier to see the titles because the color was different.”
“Black stands out more and is stronger contrast!”
“Separates the categories from the products better.”
“Black pops out from other purple elements. But i’ll say no black for titles.”
“The titles stand out more and it’s easier to see.”
Team Blue Headings
“This was a really tricky decision but I found that I liked the consistency more. However I liked that the black made it stand out a bit more.”
“It's more appealing having the same color, as the hierarchy is marked by the size of the headers.”
The results clearly favoured black headings like predicted and so this was implemented across the final UI.
-
It was unfortunate that I was only able to test the early prototype with two participants out of the six that originally volunteered. However, I was still able to obtain valuable feedback that allowed me to develop my design.
-
I think I was able to diligently stick to the original brief and brand values of a simple and clear end product. I also think creating that preference test when I was no longer sure of my original design choice was a good move.
-
It would be great to explore the UI for some of the other user stories / user flows. In particular what the advanced search criteria and filtering might look like. I would want to conduct some user interviews on what they would include or need to filter by or search for, as this topic was briefly mentioned in the protype testing.
Project Retrospective
Thank You for Reading. Let's Connect!
Drop me a message with some details about who you are and what I can do for you, and I'll get back to you soon.