01. Explore
02. Deliver
Problem Statement
Challenge
-
From the Client: We are looking for ways to improve our current charting system, to make it more user-friendly. We need a UX team to get an understanding of our customers' current impressions of the system, and spot opportunities for improvement.
Resources Available
-
UX Researcher to collaborate with
-
Existing research/analytics
-
Bucket of customers to interview/test with
Technical Constraints
-
Browser-based product
The CEO of Easelly requested user experience research & a prototype based on the research findings on the charting feature. Our first step was to learn more about Easelly, and we needed to know who uses charts/graphs, why they use them, and how they use the charting feature.
Problem Statement
03. Empathize
Comparative Analysis
User Journey
User Flows
Card Sorting
Wireframes
06. Reflection
Usability Test & User Interveiw
PRODUCT DESIGN
Books & Crannies
Heuristics Analysis
Competitive Analysis
Style Guide
05. Ideate
For this project, I was assigned one of four clients and four user types. And I applied various research methods to find out the problems of the client’s website, and it was a project to redesign the client’s website according to user type and survey results. I conducted research based on Heuristics, Competitive, and Comparative Analysis and reflected the findings in the design process. And since the bookstore has been in operation for a while, I tried to show their own personality by respecting their brand as much as possible.
My client is Books & Crannies that is located in Martinsville, Virginia.
They have grown on a national scale after the owner posted a viral tweet about her hesitation as black-owned in fear of losing white customers. This tweet offered many people a basic understanding of the underlying effects of institutional racism. And also she is trying to support indie bookstores. And hosts various events such as children’s readings, open mic poetry, and book signings featuring local and regional authors. They used gray, black, and red colors on their website, probably because of their logo. And they are showing that they are real book lovers. The reason I said this is they support indie bookstores and recommending indie books separately on the web. And They are actively communicating with the community through various events related to books. And most of all, there is no bookstore in the area where this bookstore is located. There were no bookstores until this bookstore was established, but this is where the owner participated in the startup sponsorship program and created the bookstore with donations. I think I can say that would be their brand.
Who’s the client?
Books & Crannies is the only bookstore in Martinsville, Virginia, offering a wide range of events and being seen as a bookstore with strong solidarity with the local people around it. They were building their own brand by supporting Indie books and bookstores, not just dealing with popular famous books.
They were seen on their website trying to capture as much content as possible about them. However, it seemed distracting because the contents were not organized. And for navigation to play its role, it had to be clearly visible, but it was hidden and covered by the logo. So it was not easy for me to use the menu in the beginning. And the page browsing the book was supposed to be able to find the book with only a very long filter and a search bar. Therefore, I felt that it would not be easy for users to browse books. In Particular, the biggest problem was a shopping cart that was hard to find. At first, I thought there was no shopping cart. But I found out later that there was a shopping cart in the middle of the website. Lastly, I decided that appropriate color placement is needed because the theme color of the existing website is also too monotonous.
I tried to come up with 4 solutions for my busy type user. All of them try to ensure that my user can complete the checkout quickly, and I thought neat design elements were essential.
Solutions
-
Learnability
I gave Severity 3 points for this part.
Recently we have had many rules of thumb online, which is a cart icon usually at the top and right side. Logos should be connected with the homepage, And also there are so many icon symbols, most of all know about what the meanings are with no explanation. But Nowadays, people are getting used to using smart devices. So I think people could learn and get over this type of problem that this website has when people use the website.
-
Efficiency
The following is efficiency. I gave this part of Severity 4 points.
The reason was because of the problems with navigation and cart location. Navigation is invisible and the cart on the bottom right of the page under the VERY long list of books.
-
Memorability
I scored Severity 4 points.
Even if people learn 'how to use it, where the cart is, Navigation may not work by the logo, etc.' but we could forget easily Because we already have so many habits in using digital products.
-
Error Management
I scored 4 points. This is since the navigation menu is not very visible, and not easily finding your cart, and the location of the fiter. I think these are critical problems, especially the cart, if people can not find the cart, it make them give up shopping.
Barnes & Noble used a total of five navigation systems. After looking at Barnes & Noble's navigations, I thought it would be better to organize the icon type category in a key way because a long list could interfere with my busy type user's shopping. Amazon was using a total of three navigation systems. It could also check an icon-shaped category here.
And I thought when my user who really doesn't like to wait is shopping, it would be helpful for her shopping if the action buttons were put at proper spots and also properly arranged.
I picked iPhone Books and Audible as Comparators. The reason why I chose these two as competitors is that they provide similar services first, but they provide experiences to users in different forms. In addition, the two are mainly providing their services based on the mobile app, so it is possible that users will be able to access more quickly and access various contents easily. Therefore, I thought that I could find many strengths through these two.
So I determined a total of five items to do this: Navigation, Product, Background color, Cart, Arrangement. Among them, Particularly, I paid attention to their UI and Arrangements.
While conducting this analysis, I tried to use both background colors and thought the contents were more noticeable on the dark one. And it was easier to focus on the books because they were really well-aligned. Also, I could find the Iconized category on the iPhone Book app too. I thought it looked much easier to see and find the category than Audible's list when searching for books.
Persona & Scenario
04. Define
My user type is Busy, so she hates spending a lot of time shopping. If anything interferes with her shopping process, she gives up shopping. Therefore, my persona is currently working at home as a working mom in her 30s. She has to take care of her 6-year-old son and do housework when she has time. Therefore, she only tries shopping when she has something to buy or buy in advance.
Scenario
She wants to buy books during lunchtime. But she doesn’t have time to go to a book store. Because she is working. So she decided to buy books online. She wants to buy two books for her and her kid. A book for her would be chosen as the bestseller of cooking. And the other one would be chosen through the search bar using the book title, named “The Little Engine That Could”. After buying the books, she would eat lunch and wash dishes and read some of her work documents. So she doesn’t want to waste her lunchtime.
If my user uses this website, I think she would be disappointed with a little cluttered design first and feel uncomfortable with not being able to see the navigation. And also thought that the filter and cart would confuse her because it was in an unexpected position.
I made this user flow based on the sketch I drew, and it has three happy paths. The first is that the user decides to buy it on the best seller on the homepage. The second is to buy a book in the recommended section on the homepage. The last thing is that the user does not buy books in both places, but uses navigation to find and purchase books.
Bestsellers and recommended books were displayed on the homepage, making it easy for busy users to explore books. My user type doesn't actively explore when shopping, so I wanted to display products intuitively so that they could be seen easily. Therefore, I made this plan to help my user quickly decide which books to buy directly from the homepage and also efficiently proceed to checkout.
According to my current user scenario, my user has to buy two books. One book is for himself and the other for her son. The user expected that the book for herself would be purchased through a simple explorer, and because she knew the name of the book for her daughter, I thought that she would find and buy the book using the search bar or filter, so I made the plan like this.
I executed a Card Sorting based on 37 words.
The cards I presented were based on the contents of my current bookstore website. I conducted card sorting to redesign the existing navigation. However, the contents of the existing website were a little messy, so my card sorting results were not very clear either. But, the classification of book sales, check-out, payment, and user information pages that I wanted to deal with the most clearly was almost equally well classified in all four results so I was able to design a site map.
This Site Map has a structure that places the shop to the shopping cart in the header and the rest of the items in the footer. I designed the header as simple and neat as possible so that my users can save as much time as possible in shopping. I made this decision because I thought that putting a simple header on a website would not only make shopping easier for users but also make it aesthetically pleasing and good to see.
Sitemap
I made 17 wireframes. When I was making a plan for wireframes, I was deeply thinking about what structure would be helpful for my user. So I tried to reflect the solutions that I got from the research as much as possible and also make my user enjoy shopping with the website in a great way.
Now I will talk about my User interface Style. I used the color that my customer used before, but I adjusted the saturation because both are strong colors. And I tried to increase readability by mixing the font with serif and sans-serif. And the reason why I changed the type of sans font was that the soft and modern type font would be more balanced on a relatively strong background color.
User Interview
-
What do you think is the brand color of the website? Did those colors make you focus on the website? or did it interrupt you?
-
Did you get the feeling that the content layout is organized when shopping? Or was there any distraction?
-
How was it when you used the icon category navigation?
-
How much would you like to give out of 10 points if you were to score this website checkout process?
The average score was about 8 points. This is because the user did not enter the address, but the order was completed, or on some pages, the user wanted to go back to the previous page, but could not go back. And in my idea, there were frames created by imagining animation functions. However, my prototype had no animation function, so the frame rather confused the user. I think that’s why I got this average score.
Buy Now
My website has a quick view function. However, the users who conducted the test did not have Buy Now on the website, so they couldn’t proceed with the faster checkout, so I really want to add this function.
Event Page
There is an event page on my homepage. The reason was that my client actively carried out the event. However, I wondered if this section should be on the homepage after the test. Therefore, I thought it would be better to add event information with an animation effect after the image on the main page.
Category Filter
I would like to study and research how to make filters if the bookstore has more books and genres and so on than now. The reason is that the current solution is tailored to a set type of user, so there are some types of filters that are needed. I could see that the other bookstores compared using the Competitive and Comparative analysis were very large and had many types of filters. Of course, they may be because they are very huge bookstores, but the current filters alone may not be enough for users to feel comfortable because this bookstore will also have more and more books. Therefore, if I want to make further progress here, I would like to establish filter systems for that time in preparation for my client to have more books.
Review
I would like to make the review and score features because busy users don’t like to browse so I think they could buy books just being review. I don’t have time to read reviews because my current user type is busy. Therefore, I did not add space for writing reviews. However, since there is not only one type of user, in reality, I would like to create a review section and develop the current website into a place where various users can share their opinions, share information, and purchase books.
Leaderboard
Nowadays, people are less likely to read books. And people use cell phones or use computers more, so they get closer to electronic devices than books. However, I think that if I create this feature such as holding an award and giving badges to people by competing for the number of books they buy or read through the leaderboard, the website usage rate will be able to further increase more than now.
Next Steps
I picked Barnes & Noble and Amazon Books as competitors. The reason why I chose these two places is that they are first a large bookstore that anyone would know, and secondly, many people are using both websites. Therefore, I thought these two would be already providing a variety of User Experiences to many people and would have been verified. So I chose the two as competitors because I thought that if I first took advantage of the strength of the competitors' websites based on the strength of the Books & Crannies, I could provide users with a more convenient experience than now. And I compared a total of 5 items: Navigation, the Theme color of the website, Checkout, Cart, Arrangement. Especially, I focus on Navigation and Check-Out.
Prototype
Insights
I thought my user could have a hard time when shopping because of the invisible global navigation. And even I had to look closely and click whenever I tried to click it. So I organized it clearly. My user will be able to shop without being confused on the changed website.
I got rid of all the red-letter settings on the white background and set black as the main background color among the three theme colors. And by cross-laying the red that is one of the main colors, users are not visually bored. Therefore, my user will not have to be disturbed by shopping with less readable red letters. And since solid background colors make you more focused on your content, users will be able to shop in the appropriate way.
I think organizing the lines well is the basis of alignment. Of course, there may be exceptions to convey meaning in a different way. However, I think it could make the user feel uncomfortable if it seems to have stopped while aligning. Therefore, I arranged it properly so that users can focus more on shopping. Therefore, my user will be able to complete the purchase by quickly selecting the books she needs to buy from the neatly organized books.
The quick and simple purchase process is essential to my users. Therefore she will quickly put one of the two books she needs to buy on her card by avoiding long text filters and placing categories of icons. And as soon as she enters the book browsing page to add to the cart another book, she will be able to search the name of the book in the search box that you can see, find the book, put it in, and complete the purchase.
At first, I thought there was no cart on the customer’s website. But when I looked at the client's website a little more, it was under a very long category filter. Therefore, I thought all users would have the same confusion as me. So, I made cart icons and put the expected seats so that all users can easily access the cart.
MORE STUDY CASE