top of page
iu_edited.png

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

46a76c802176eb17b04e12108de7e7e0f3736dc6-1024x1024.webp
372615-200.png
slack_logo_icon_189220.png
zoom-png-logo-download-transparent-20.png
Microsoft_Excel-Logo.wine.png

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"

fe5f794b-2ede-4d2a-8bd3-4d3bf91f4bba.jfif

"I choose to buy a book if a like the cover so i wanna see clear pictures"

13d21399-1a43-4e31-a0b6-2f6458ff27f2.jfif

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  

ikfk.JPG
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.

tu.JPG

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.

ffy.JPG

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

eyery.JPG

products with title & price with an action button to Add to the card

Filter section 

sgr.JPG

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 

dh.JPG

delivery options

gsrg.JPG

Payment options

action button 

rh.JPG

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 

ee.JPG

orange(brings out excitement   & encouragment 

White(the best option for background  as its the best color to compliment book covers

rgwr.JPG

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

tuut.jpg
sga.jpg

Deliver

jryjr.JPG
Home page
wtwt.JPG
sg.JPG
children secondary navigation menu
rwrtwt.JPG

Add to card notification

jdjdj.JPG
Category page
twrtw.JPG
wyetuy.JPG
Final prototype
7365ye.JPG
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

dhdh.JPG
jryjr.JPG
bottom of page