UX/UI Design - Concept Project
Increasing Sales with Aframerican Bookstore.
Aframerican Bookstore was established in 1990, it is an entirely African-American owned store. They sell books of, by, and for African-Americans, and they believe in providing a conscious raising literature about issues surrounding African Americans, their history, and their religion. They place a high importance on their self development titles because they believe that people who know themselves usually do better about themselves.
Due to the effects of Covid-19, most physical stores around the world have had to close their physical location. This has moved traffic to their websites. My goal was to help Aframerican Bookstore increase their sales by redesigning their eCommerce website.
(Current Website)
Timeline: 2 Week Design Sprint.
Role: UX/UI Designer.
Methods: Business Analysis, Competitive/Comparative Analysis, Heuristics, Target User, User Scenario, User Flow Map, Information Architecture, Wireframing, Prototyping, Usability Testing, Branding.
Tools: Figma, Whimsical, Optimal Workshop, Procreate, Photoshop, InDesign, Illustrator, Paper and Pencil.
Note: This was a concept project and was not sponsored by Aframerican Bookstore in any way.
The Challenge
With the increase in support for black owned businesses, people are taking to educating themselves, and want to discover something new. Aframerican Bookstore prides themselves in their wide variety of titles that can be found in their store. Even though these titles are reflected on their website, customers still found it difficult to make a selection.
The Solution
Redesign the website in a way that give customers more confidence in making a decision. I believe that by designing a eCommerce website that allows the customer more freedom to discover and decide what they would like to purchase, the result will create increased sales and decrease bounce rate.
Research & Discovery
How does the current website work?
I began my research with looking into the current website. I wanted to identify any pain points that users experienced when trying to purchase a book. I began by conducting a task analysis and followed that up by reviewing the website with a heuristic analysis. The key takeaways are as follows.
1. Users did not know if they were in the right place.
Users had a satisfaction issue when arriving at the Aframerican Bookstore’s website. They did not know if they were in the right place. Some users even double checked their arrival by opening a new tab and typing the bookstore’s name into Google.
This could cause the user to leave the website thinking that they are not in the correct place, and give up all together.
2. Users were confused by extra navigation.
To be able to view the items for sale, a user must select “Catalog” and then select “View Catalog”. Many user’s found this redundant and an efficiency issue. On the page above you can see highlighted are 3 links on a single page for the “Catalog”.
Many users can become confused and unsure about the legitimacy of the site when presented with this extra step. With one user saying that the site seems “too homemade”, and thus deemed it untrustworthy.
3. Users were unconfident and would not purchase.
When selecting a book to add to cart users were having learnability issues trying to find the description of the item they wanted. Many users stated that they would not purchase the book if they couldn’t see what they were getting.
At this point many users would verify that the book they are looking at is the book they want by checking Google, and at that point would find a cheaper option and abandon the site all together.
What does the competition look like?
After looking at the website and the way it functioned I wanted to see how similar stores were approaching their websites. When looking into the Aframerican Bookstore’s competition I started by looking for any other Black-owned bookstores in the area. I also knew that the bookstore was featured on lists to purchase from Black-Owned businesses, so I looked into those lists. I chose 4 additional bookstores from across the US. I then created a features comparison to compare some of the issues that I found during my heuristics evaluation.
Based on the features comparison. Most eCommerce websites utilize a multitude of features. As a user you would expect to have the ability to login and review your past purchases, create a wishlist of items you may want now or in the future, and review a description or image of the item you want to buy.
Defining the Problem
Who is this targeted towards?
I took the time to research into the type of people shopping for books online. Due to the political climate and the Black Lives Matter movement, many people are taking the time to either learn about Black history, racial injustice, or are looking to learn something new that they wouldn’t think to look into. They want to support black owned businesses and are looking for something interesting within. What that book is yet, they just don’t know. Meet the spontaneous shopper…
The Spontaneous Shopper
Scenario:
The SS loves to read. Normally the way they would decide what to read is they will go down to their favorite book store and look around until they find something that catches their eye. Due to COVID-19, most bookstores are closed, so they can't go to discover a new book to read. The SS is open to any genre and subject. As a believer in human rights, the SS wants to raise their consciousness about Black issues, and learn about Black history at the same time. The SS needs a way to discover new books written by Black authors.
Behaviors & Attitudes:
Loves chance discoveries.
Doesn’t specifically buy products because they are popular and on-trend.
Buys when something comes onto radar, rather than when specifically looking for something.
Frustrations:
Dislikes long checkout processes, and makes purchase decisions quickly.
Loses interest after waiting too long and chooses fastest delivery or pick-up options.
What problems does the user face?
1. Based on the needs of the user, the site doesn't offer much in the way of showcasing certain books for someone on the lookout for discovering something new.
So by showcasing new books, and introducing different Black themes and topics, the spontaneous shopper will be able to discover books they wouldn't ordinarily be on the lookout for.
2. A spontaneous shopper also likes to make quick decisions, so having a long drawn out checkout process would also be hindering the user.
As of now Aframerican Books allows you to check out through PayPal or through a mail in form. By allowing the target user to have the option to “Buy Now” allows the user to be able to make quick purchases.
3. Lack of descriptions and images does not give the user confidence to make a purchase.
But if the shopper does not know what the book is about they are less likely to choose that book. So adding descriptions and product images can help solidify a decision to purchase because the user has peace of mind as to what they are getting.
Design & Solutions
The user’s journey.
What journey will the user take to be able to overcome the issues they face? Based on the our research and pain points I created a User Flow Map to show the new direction the user will take. The user needs to be able to discover a book, see what it's about, and then the user will need a way to purchase that book as soon as they decide that they want it, but if the user decides that they want more than one book, the check out process needs to be short.
Putting an idea to paper.
After mapping out the user's journey, I put pen to paper and began creating the website by first sketching. When sketching I focused on the different ways that the website could be laid out. The biggest issue in this step was because Mr. Taylor had passed and I could not reach anyone at the shop, I had to make assumptions on what the owner would want. One result was to add a blog section. Mr. Taylor was a born teacher and liked to spread information to anyone who came to the shop. So to have a place where the shop could continue to spread information and in addition, have books backing up their teachings for further reading, would be a good addition to the site.
After sketching, I began to create the wireframes in Figma. I created dummy text and no images just to create the look of an almost pieced together website. After wiring together the screens it was time to test.
Testing makes for a better result.
I began by creating a script to walk through the tasks. Then after each test I interviewed them in places they may have gotten stuck, or looked confused. When conducting tests there were a few stand out problems.
1. Users were not aware that they were able to scroll down. By shortening the carousel users were able to see some of the information below.
2. Users were confused with the formatting of the information on the pages that showed lists. By adding spacing between the information users had an easier time viewing each set at a glance.
3. Users also had a hard time seeing the “add to cart” pop up. Enlarging this and using contrast helped differentiate it and make it stand out better.
The proposed solution.
It doesn’t stop there…
I really enjoyed working on this project. I believe that there are still many things to do for this. For now I would like to spend time completing all the wireframes for the project. Fleshing out each page and adding branding throughout.
As for next steps I believe that the user and client would also benefit from some type of newsletter feature and digital marketing, that way they can receive notifications about new books, or unique books, with the options to (if possible) simply purchase straight from the email. Another feature to add would be the option for a forum of discussion. If Aframerican Bookstore was the place to learn things, I believe that by adding an area where people could ask questions and or receive resources, it would greatly benefit the business.
All in all, the work with The Aframerican Bookstore is far from done, and I will continue to work on it until it is.