Storiesla.com
Company: Stories - Books & Cafe
Year: 2020
Position: Solo UX Design
Who is Stories? Stories is a locally loved bookstore and cafe in LA. They have tons of books in stock and it's a great relaxing and quaint place to pick up a book and grab a bite. Their online presence is just a simple website where customers are able to browse books, order books for delivery or order a book for pick up in the store.
The Project
While in school for UX Design at GA, we were given the assignment to redesign an existing website for local stores around the LA area. We had several options of which website we would like to work on, and I chose to do Stories LA. With stories being such a great place, I wanted to try and reflect that in its website. The current site is full of information and can be a bit overwhelming to look through. I wanted to use my knowledge to enhance the user experience by simplifying the site and making it feel easy and quick to use, in return making more sales for the business.
My Role
This was a solo project that allowed me to bring together all of my UX skills and apply them to the entire process. While doing solo research on the existing site, I also interviewed several people to find out how the site could be improved. Using UX ideation skills, I was able to identify usability issues and find solutions.
Heuristic Evaluation
I had never been to the Stories website before, so I wanted to start by doing my own Heuristic evaluation and see what some of the pain points were that I experienced on the site. I identified the issue, decided what type of issue it was and then gave it a severity rating. Here is a list of some of the findings I came across
C&C Analysis:
I wanted to dive into some other sites, and see how Stories features compared to theirs. I went scouting for well known sites, and also local competitors. Specifically I reviewed Nordstroms, Barnes and Noble and local bookstores Hennesy & Ing, and Skylight Books. I used a Competitive and Comparative Analysis chart to help me see the differences. I went looking for features such as Featured Items, New In, an Email List, Social Media Links, a Sale Items Page, Guest Checkout options, Product reviews and ratings, and if they had both Shipping and Pick-Up options.
I found that Stories lacked in quite a few of those areas including having Featured Items, an Email List sign up, Sale Items Page, an option to checkout as a guest, and Product Ratings.
Interview Findings
After doing some of my own research on the site, I decided to hand it over to the users to get their insight. I scouted out users for interviewing by sending out surveys to find a wide range demographic that could be useful for my research.
Once I was able to get together 5 different users, I interviewed them individually, starting by asking them a bit about themselves and their typical online shopping experience and also how they prefer to read and order books. After getting to know them all a bit better, I gave them each the task to try and order a book to see how they would be able to complete it. From these interview I found that the users said things such as:
The User
With the information I received from my interviews I was able to narrow down who the target user I would be focusing on would be. I created the Persona “Nate” who is a compilation of all the users that I interviewed. He is a single 26 year old videographer in Los Angeles. He works a lot on his computer from home and doesn’t have a lot of time for going to in-store book stores.
Creating the User Nate was the perfect way to help me go through the process while being able to keep the target user in mind.
Journey Map:
Keeping the target user Nate in mind, I mapped out what the journey might look like going through the existing Stories website. The following points were some key points that I discovered while watching my interviewees go through the site.
When first coming to the website, it was compiled with words which made it hard for Nate to tell what the website was for.
When trying to browse books, he initially found it difficult to find where he was able to browse for books.
Once he made it to the browsing page, all of the text on the page was the same size and font making it hard to differentiate the book titles from other information.
When he clicked on a book he might be interested in, it didn't redirect him to a product page, it instead dropped down to reveal nearly the same amount of information that was presented before clicking it.
He then had to click “more info” which made another dropdown on the same page which gave a bit more information about the book and its author.
Finally when he was going to check out, he only had the option to create an account to check out, ultimately leading him to abandon his cart completely.
Identifying the Problem:
Taking all of the information that I had gathered from my research and interviews, I found that there was a main goal in mind for the target user, in other words; for Nate.
“Nate needs a quick and easy way to order books online, because he is busy working from home and wants to stay inspired.”
Knowing the struggles that our user has with the current site, including finding it hard to easily browse books, being unable to differentiate important text and titles, not being able to find all of the information wanted, and having an unpleasant checkout experience, we now are able to start solving the problems.
How might we find a solution:
I took what I knew and created a couple “How Might We..” statements to brainstorm solutions.
-How might we create a place where the user can quickly order books
-How might we help users find books they are interested in?
I did some site mapping and card sorting to help me figure out what would be the best way to streamline navigation and make browsing the site easier and quicker.
Solution
By cleaning up the site, adding fresh and easy to read typography, adding easy to use navigation, and simplifying the checkout process, we hope the numbers of orders will highly improve.
Beginning the Design Process:
With the goal to apply the users needs and cleaning up the website, I started with creating a few Mid-Fidelity Wireframes.
Because Nate wants his experience to be easy, simple and quick, I found that it would be best to add things to the website like putting “books” in the main navigation bar, and putting browsing on the main page.
As you can see here, I have mapped out the flow between the wireframes to assure that I had created the right amount of wireframes to complete the user flow.
Usability Testing
Taking the new designs and creating a prototype out of them, I interviewed 3 different people to see how they felt about it. I asked each of them to purchase a book under a specific category. This was a very helpful way to find what parts of the design worked and what things could be changed to enhance the users experience.
Some of the pain points that came up during the usability test were that:
From Mid-Fidelity to High Fidelity
After compiling all of the information from my different stages of research keeping both Nate and the usability testers in mind, I turned the mid fidelity wireframes into high fidelity wireframes, and made some changes to appropriately help out the users. I wanted to incorporate all of the users needs while trying my best to keep a very simple and easy to view layout.
On the homepage I wanted to try and make it more apparent that you were looking at an online bookstore by showing some new releases, best sellers, and popular this month books.
On the “Books” page where you can browse books, I wanted to make it feel more approachable and more browsable by keeping the main results simple and the side navigation clean, with easy to use drop downs.
For the product information, I wanted to create the products own page for an easier way to quickly read about the book and also offering some suggestions similar to the book and books by the same author.
Finally, The Prototype
To fully show the walk through of how the website would flow, I created a Prototype.
To follow the prototypes flow the pages go in the order of Homepage>Books>Subject Filter>Body Mind & Spirit>Where to Begin Book>Add to Cart>Checkout
Next Steps
In ending this project, there is always more to do. Based off of the research and user needs, I brainstormed a few Next Steps that could take the design even further.
