Hearthfire Books & Treats Case Study
Hearthfire Books & Treats is nestled in the mountains in the beautiful town of Evergreen, Colorado. It has a wonderful collection of books with staff members that always know your name. It is always full of energy from customers stopping by for frozen yogurt or hot chocolate. Unfortunately, the charm of this small town bookshop and frozen yogurt parlor is often overlooked because of the convenience of Amazon.
Hearthfire has always been very close to my heart. I grew up in Evergreen, and some of my fondest memories were getting off the school bus with my little sister and walking to get a cup of frozen yogurt before doing homework. My first job was running Hearthfire’s stand at the farmer’s market. My goal with this project was to conduct a redesign on the Hearthfire website to better reflect the shop that so many people love so dearly.
My Role:
Execute the entire UX process, from research to development to design.
Tools:
Marvel, Miro, & Sketch
Scope:
Two weeks to conduct research & design a prototype for my suggested redesign
Project Goals
Goal 1
Update the website to better reflect the store Evergreen knows & loves.
Goal 2
Make it easier for users to shop local, especially during COVID-19.
Goal 3
Develop a better understanding of the UX process, from start to finish.
Key Findings
Heuristic Evaluation
I started my project by conducting a heuristic evaluation of the current website. From this evaluation, I concluded that language consistency, visibility of system status, aesthetics, and navigation could all be updated to improve the user's experience.
Competitive & Comparative
Analysis
I looked at Hearthfire's competitors to find business opportunities & better understand how other sites structured their navigation.
While Hearthfire had tabs for most of the features that other websites had, not all of their pages were functional. For example, the staff favorites tab led to a picture of a staff member, but no actual book recommendations. The features displayed prominently on other websites were also buried in the second tier of navigation, making them much harder for the user to access.
Barnes & Noble
The Last Bookstore
Next Page Books & Nosh
Powell's Books
Feature Comparison Chart
Getting to know the users
User Interviews
I conducted 3 user interviews to better understand what users' behavior when purchasing books. All of the research participants preferred shopping local, but usually purchased books from Amazon instead because they saw Amazon as more convenient.
Interview Questions
- Can you tell me about the last time you bought a book online?
- Where do you normally shop for books? Why?
- What is the last book you purchased?
- What categories do you find helpful when searching for a book online?
- How do you discover new books to read?
- What genres do you usually read?
- What features are important to you in online checkout?
- How do you feel about having or making an account for online checkout?
Affinity Mapping
I gathered information from my user interviews to create an affinity map, and I discovered seven categories:
One of the largest frustrations users had was a lack of availability of certain books when they shopped at small bookstores. Because of this, users ended up mostly buying books on Amazon, despite all users saying they would prefer buying from small, local owned bookstores.
Problem Statement
Alfred needs a way to find all of the books he needs locally so that he doesn’t have to support Amazon when buying books.
How Might We
HMW make small book stores more accessible than Amazon?
HMW make sure local stores have the same selection as Amazon?
HMW make the online experience for local bookstores more enjoyable?
HMW discourage users from ordering through Amazon?
HMW make local bookstores as convenient as Amazon?
Persona
Journey Map
Amelia encountered a few frustrations while shopping for books online:
- She wanted to always be able to see the price while checking out. She wanted to make sure she was finding the cheapest price available.
- She wanted the option to order books she needs for school, even if they are no
User Flow
The goal of the project was to create a better checkout experience for our website redesign. I chose to create a user flow for the checkout experience to stick to the prompt. In the future, I would like to create a user flow for ordering books that aren't currently offered at Hearthfire so that users have a way to complete all of their book orders locally.
Card Sort
I used a card sort to decide how to organize some of the rogue categories on the current website. From my data, I developed the categories for the site navigation. There were still some items that didn't fit clearly into a category, so I decided to follow up with a tree test.
Tree Test
Where would you go to shop for local authors?
Where would you go for gift certificates?
Where would you go to find the store’s phone number?Where would you go to find a service that helps plan book-themed trips?
Where would you go to find a reading list for school?
Creating Solutions
Wireflow
Paper Prototype
While testing my paper prototype, I found that the flow was very easy for users to understand. However, there were some adjustments that users wanted to make navigation easier, like a back button on every page.
Greyscale Prototype
In the greyscale prototype, I was able to develop a better understanding of user needs. I learned that my users wanted many options for logging in to check out, including an option to sign in through Amazon for free shipping. This insight was especially useful because I mostly viewed Amazon as competition. However, there are ways to work with Amazon to make shopping local more convenient.
Design Choices
Final Prototype
The final prototype combined the changes I found in my usability testing with the branding I created for Hearthfire to create a user experience that allows Amelia to shop local with the same convenience as ordering through Amazon.
Next Steps
I have many plans for a further iteration of this project:
- Build out the process for ordering books by ISBN so that users will be able to order books that wouldn't be available otherwise.
- Continue to explore the design process in order to add more dimension to the website. While I am happy with how the minimalist look turned out, I would love to see if there are ways to make it look less flat.
- Create a responsive design. The current design is made for web. Future iterations should include mobile so that users can visit Hearthfire on the go.
Takeaways
This was my first website redesign, so to say that I learned a lot would be an understatement. My biggest takeaway is that it's always due, but never done. I have so many wonderful ideas for updates to this website that would improve the experience for users, but I had to focus on just developing one. I have a tendency to be a perfectionist, and this project was no exception. However, seeing what I could accomplish in two weeks helped me get over my perfectionism. I am proud of my work, and while I know that there will always be more changes, I am happy to take it one two-week sprint at a time.