URMston Bookshop website redesign
During my UX design course , I was given the task to redesign an
e-commerce website I chose to redesign a website for an small bookshop based in Manchester. Here I will present the process of my research and the results it led me to
Project overview
for the purpose of this project I focused on helping my clients users approach their need on Purchasing books online. After my user research I decided to focus on simplifying the purchase and search process for users to be able to enhance the engagement of the users with the website and to create more enjoyable experience for users.
Tools
Figma /Pen & paper /Slack /Zoom / Excel
Duration
2 weeks
Discover & Define
In order to find out who the main users are and what their needs could be, I decided to interview a few people to understand their shopping habits and their pain points while using an e-commerce website
Using the affinity map method I was able to find the main problems to be solved and create some JTBDs
"Usually I know what book I want to buy so I wanna search for it immediately "
"I wanna read a description before buying a book"
"I choose to buy a book if a like the cover so i wanna see clear pictures"
TBD
1. when purchasing books from an online shop I want to be able to search for specific books so i can Find what I want Faster
2.when shopping at a bookshop website I want to read a brief description about the book that I'm buying so that i can make sure I'm choosing the right book
3.when buying books online I would like to have different Delivery & payment options so I can choose the best option for me
OAL
simplifying the purchase and search process for users & Add some features such as delivery options & description to create the best experience for the user
in order to help My client & users achieve their goals I needed to research on positives & negative aspects of my client's current website & to compare them with competitors in the market so that I could start redesigning
URMstone
The results showed that Urmston's current website lacks most of the common features in e-commerce websites. However, they sure had their pros.
What I found ?
According to my research Current website has no :
1.Category options
2.confusing home screen
3.pictures for all products
4.confusing navigation menu
5.filter option
6. rating option
What I
did ?
to be able to solve these problems I decided to use card sorting method with a few more users that's because I needed to find the best way to design categories and navigation menu to make my user's process quick and easy to follow
Develop
After assigning the categories using the Cart sorting method, I started my Ideation phase by sketching using pen & paper and came up with some Lo-Fi digital wireframes at the end.
All the users mentioned they need to see books in categories so I made this navigation menu with the clickable categories i came up with my cart sorting results
2/3 users mentioned that they need to search for a title they have in mind so i designed this search bar at the top of the homepage to make it accessible & visible
scrollable bar for best seller & half price books with clear pictures of the books so users can achieve their goal on finding cheap, famous books
promotion sections based on users prefrence on buying the cheapest books
huge sign up bar at the bottom of the page to encourage user to create an account and be loyal to the website
social media & about section at the footer in case user wants more information
products with title & price with an action button to Add to the card
Filter section
navigation map that shows where the user is right now
review & rating option
description & all the details about the book
here you can see a clear action button for purchase & a heart shape to add the product to your wishlist
Recommendation bar
delivery options
Payment options
action button
conformation notification
After making some changes based on a quick usability test It was time to level up my prototype to hi fidelity stage
ok but how did you come up with colors?
at this stage I Gathered some pictures of my product & objects related to it and came up with a mood board
nude color to create contrast between colors
Dark navy blue (resembles the dark theme of the shop & it looks professional
orange(brings out excitement & encouragment
White(the best option for background as its the best color to compliment book covers
considering the bookshop's color pattern & results from my online research I came up with these colors above
how about the typography ?
After some online research and contrast checks I decided to move forward with these two typefaces as 1.They were easy to read and engage with which is an essential for an e-commerce website 2.they made a good contrast which again helps the user to read and engage easily
Deliver
Home page
children secondary navigation menu
Add to card notification
Category page
Final prototype
Final testing results
After designing my hi-fi prototype I decided to test it with 3 more users giving them a major task to complete
All the users completed the task successfully with 0-1 errors in less than 1 minute which was my target time
comments
user 1 mentioned he was confused when he saw both basket & card on purchase process & didn't know where to click on
user 2 mentioned she couldn't be sure if she added the book to the card as she didn't get an obvious notification
user 3 mentioned the book titles where a bit small so she couldn't see them clearly
what to do next ?
From the results from usability testing it is recommended to :
1.change the title of basket to card in purchase prototype to reduce the confusion
2.add a conformation notification after user clicks on add to card
3.change the font size of the book titles so it is more readable
for the next stage of the project we can also add more features to the prototype to make it more engageable
