top of page

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‭.‬


Figma /Pen & paper /Slack /Zoom / Excel



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"



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


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  


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 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


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



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


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

bottom of page