Eso Won Books
(E-commerce Book Website Redesign)
Overview
Eso Won Books is a black-owned bookstore and one of the largest bookstores in Los Angeles. They are an important part of the community that brings knowledge and history to society. Due to recent Covid-19 and Black Lives Matter incidents, they have gained much interest. The company would profit from improving its current website to accommodate the increase in business.
Team: Solo
Duration: 2 weeks
Role: UX/UI Design
Platform: Desktop Application
Tools and Methods
Heuristic Evaluation
Comparative and Competitive Analysis
Card sort
Usability Testing
Persona
Figma
Wireframing
Prototyping
Site Map
The Challenge
The website does not accommodate a modern customer’s expectations and is not user-friendly. The layout and functionality of the website are poorly designed leading to customer dissatisfaction. Thus, the webpage was identified as a possible “friction point” that negatively affected their business and reputation.
Client’s Problem:
“I am overwhelmed and not sure where to look and the checkout takes too long“
In the yelp reviews, many customers were constantly confused, overwhelmed, and ultimately abandon the sites before completing their tasks.
Possible Solution
I believe that if I redesign the website functionality by applying better navigation, webpages, links, simplifying the checkout process, and creating a consistent theme then it is likely to achieve a greater user experience.
-
Make Navigation Understandable
-
Create consistent theme
-
Simplify Checkout Process
How To Solve This…
After gaining some footing on their business, I explored their Business Competitors and Comparators to understand the e-commerce book industry better.
Competitive Business Analysis
Analyze Business Comparative and Competitive
Comparative and Competitive Analysis allows me to analyze Business strengths and weaknesses as well as feature inventory.
Comparative Business Analysis
The Result
After gathering all the information, I found that Eso Won Books needs to improve its navigation labels, develop a better checkout process, and expand new features to help users find what they are looking for on the website, make a good decision before buying the products (e.g: product reviews, recently view, and recommendations) as well as create a convenient or easy way for users to purchase online products.
Clarifying the Target User
Having a persona helps me understand users’ needs, behaviors, experiences, and goals for the specific audience. This can be extremely helpful to inform business strategy and brand strategy to fulfill users and business goals.
To Reduce The Current Workflow System
I began to create a site map that helps me identify and reduce unnecessary features from the current site.
Through card sorting and site map, I am able to redesign the home page and other pages with clear navigation labels so that users can easily maneuver throughout the website.
The Designs
Initial Sketches
I began with sketches to create a very efficient way of communicating my design. From paper to pen, the sketches were drawn out to create multiple pages of how users would interact with the product. These were later transferred into high-fidelity mockups.
From Low to High Fidelity Wireframes
Homepage
By improving the home page navigation labels, users can find books information easily without feeling overwhelmed
A Shopping Cart
A shopping cart is a helpful tool for users to manage all the products that they decide to buy. Customers can add, remove, and manage product lists in the shopping cart to improve their buying experience.
Checkout
Reducing checkout flow steps from the original website gives users attention to follow the content easily.
Product Category
I created a search filter to ensure an improved user experience. This can help users drill down to their needs with ease, it eliminates the need for numerous searches queries just to find something specific. Users will also be able to save their favorite books that allow them conveniently maintain quick access to their frequently search.
Product Details
From the homepage, users can click a specific product and view the product details information with a review and product comparison to help users make a good decision before buying a product. I added book recommendations to help users find books easily on the website. Recent views are added to remind users of what they have previously shown interest in. I also used bread crumbs to help users navigate easier throughout the pages.
Usability Testing
Results:
Some improvements I make on the website that creates a positive impact on the user experience:
Clear navigation that made it more intuitive and user friendly
The buttons are consistent which give users a better experience throughout the website
Breadcrumbs help users to have a reference point during their search
Things Need To Improve:
Through usability testing, I found that users wanted to see their order summary before purchasing a product. This gives users freedom and control to review and/or make any changes to their orders in case if they are making mistakes or changing their minds about the product.
Design Iteration
Order Summary
I added an order summary into my design iteration to help customers review their purchases before making a final decision to buy the products.
This will also help users to prevent any mistakes or make any final updates before purchasing the books.
Reflection and Next Steps
Learning to analyze the design and prioritize the main keys are important. UX research helps me simplify the web pages designs and create a better user experience that satisfies client needs and business goals.
There are several opportunities to improve the designs and navigation labels through card sort and site maps. I learn in-depth about user experience which allows me to apply the knowledge and design user-friendly websites.
If this project were to continue, building the front-backend site and other pages that satisfy business needs would greatly increase the business sales.