Sunriver
Books & More
Website Redesign from UX Research to UI prototype
Project Overview
​
Timeline: 2 week design sprint
Role: UX Designer - Research, Synthesis, Ideation, Wireframing, Visual Design, Branding, Prototype
Tools: Figma, Google Suite, Zoom
Skills: Figma, competitive analysis, user interviews, usability testing, card sorting, affinity mapping, user persona, sketching, wireframes, brand design, prototyping
​
A cozy dog friendly bookstore in a small town gets a new look for their virtual store to better match the experience in person.​​​​
Their old design was outdated, dark, and could be overwhelming for new customers. To begin this redesign, I spoke to prospective customers and conducted usability tests and card sorts to deduce some key ways to improve the user experience. This inspired the new site map and UI design, with a new logo and style guide to match the warm feel in person.
Discovery
Getting Lost in the Bookstore
Sunriver Books is nestled in a small shopping center in a tiny resort town with a website that is mismatched to the open and inviting atmosphere in person. They aim to create an inviting and friendly atmosphere within the bookstore where you will feel comfortable to browse, talk about books with others, or simply stop in to say “hello!” Toward this end, they host several book clubs for the community. One thing that makes their bookstore special has always been that it’s a dog friendly space and they sell things for the pets alongside the books for their owners. This is born out of the owners love for their dogs, who they lovingly dub their CEO of the small business.
.jpg)
The Problem
​
The problem is that their virtual bookstore is not very user friendly because it’s confusing and the color theme feels outdated and dark (and not in the cozy old library kind of way). With just a quick tour through the virtual storefront, you can tell their navigation is complex and isn’t intuitive. The homepage is busy and doesn’t feature books, which is their main source of income.
Competitive Analysis​
​
After looking at the website, it made me wonder, are their competitor’s websites any better? There are several other small bookstores in the area including Roundabout Books & Cafe, Dudley’s Bookshop Cafe, and Big Story Bookstore that would be more direct competition. I compared them to Sunriver books by asking myself the following questions: Do they have an easy checkout process? Was the navigation simple and clear? Did the layout make sense? Was the information organized in an intentional way that made the user experience easier? Here’s how they compared to each other:
In the end, Roundabout Books & Cafe seemed the most competitive because their website was superior on all measures. To diminish this gap, I decided tey would be a comparator I would use for inspiration in the redesign. Alongside them, I decided to use Barnes & Noble and Indigo books as comparators because they also had better usability and are larger chains that are commonly known in the United States and Canada.
​​
User Research & Usability Testing
​
With competitive analysis came a better understanding of the bookstore landscape locally, and now it was time to get another perspective from potential users that enjoy reading and shop for books. I conducted 5 user interviews and then 3 usability tests on the original Sunriver Books website. Let’s consider the questions I asked during the interviews:
​
​Tell me about a time you purchased a book.
What about that experience did you enjoy?
What challenges do you typically encounter?
What do you look for in a bookseller?
What types of things do you like to pair with the book buying experience?
Is there anything else that we missed that was impactful to that experience?
​
​​​I chose these questions because it would give me insight into their book buying experience, the good and the bad, and what preferences they have. Since Sunriver Books sells more than books, I wanted to get a sense of what they liked to pair with book buying to see if this could inform the focus of the design and how much these should be prioritized. I always like to ask at the end of my interviews if there was anything we missed that might be impactful so that I make sure I have an in-depth understanding of their experience. I gained a lot of insight about the book buying experience in general, but I wanted to gain more specific details about the pain points experienced when using the current website. Here’s a summary of the usability test results:
Task:
Please browse for a book and select one to add to the cart.​​
​
Please think aloud.
​
Measure:
Takes over 5 minutes to add book to cart.​​
​
Noted pain points and helpful features.
Results:
2 participants used quick search​ methods,​
1 participant got overwhelmed by browsing
I saw first hand the importance of a search bar in ecommerce websites to improve the efficiency and simplicity of the user experience. The test participants mentioned several areas of improvement including an easier way to find books, a more robust search function, clear book categories, more book focus on the website main page, detailed descriptions and suggestions for similar reads, a wishlist to store future purchases, and maybe even a watchlist for anticipated books. This was yet another layer of insight, but I wasn’t quite done yet.
​
Card Sorting
​
I wanted input from users that would inform my reorganization of the website navigation, so I designed a card sort and found 3 people who would volunteer to complete the activity for me. Below you can see an example of what this looked like:
Once they were complete, I created a chart and compared what books were grouped with which labels to see if any patterns emerged. I discovered there was some overlap between them and they did stay with main genres that you commonly see at major book sellers. Now I had a better view of the book buying experience, pain points, and how to improve the clarity of the navigation.
​
Overcoming Analysis Paralysis
​
Needless to say, I had a lot of user data to analyze and condense into a user persona that would guide my designs and continue to focus my efforts. This is where I felt the pressure of having barely more than a week to conduct research and analyze my findings. It felt like time was going warp speed and I didn’t have a warp drive to keep up. While my brain loves to deeply process things and look at the bigger picture, I needed a new strategy here. From this experience, I learned to manage large piles of data by breaking it down into incredibly small chunks of information and taking it one at a time to get the momentum I needed. My warp drive was chunking the data into a manageable size and checking them off the list as they were completed.
​​
Affinity Mapping
​
I created two affinity maps, one for user interviews and one to help analyze the usability test comments, that helped clarify my findings and verified my hunch that I was dealing with more than one user persona. The usability test map largely reinforced for me the findings I mentioned before, so let’s focus on the user research affinity map. Before I get deeper into discussing the persona, let’s take a look at some highlights from my affinity map that started the epiphany for me:
​​​"I appreciate a simple and efficient buying experience."​
​​​"My preferences reflect my lifestyle and interests."​
​​​"I enjoy the community created around books."​
​​​"I like to multi-task while enjoying books."​
​​​"I think deeply about the books I choose."​
There was a bit of a divide in the research on what’s important to the users. While some prioritized efficiency, others prioritized connection. To figure out who my primary versus secondary persona was I took note of the precedence of one focus over the other, and there was one that did indeed take the lead over the other by a hair. For the sake of time this was important, because I knew I could only design for one user persona in the time allotted to me.
User Personas
​
For the online book buying experience, my primary persona was the one who prized efficiency and simplicity. You can learn more about David, my primary persona below:
In contrast, my secondary persona was the one who prizes connection and thinks deeply about what books to add to their collection. You can learn more about Christina, my secondary persona below:
As I mentioned before, for the sake of time, I needed to focus on David’s needs and pain points as I moved forward into the user interface design of the new website. David needs a simple and efficient way to find and purchase a book online because he doesn’t have a lot of extra time between work and family responsibilities to go into the bookstore. This is the problem I need to solve.
Design
A Successful Fix & Flip of a Virtual Storefront
With all that was learned during my research, I knew simplifying and reorganizing the information architecture within the website was vital. To begin, I considered what was already there and the elements that the users enjoyed and wanted improved upon. I wanted to keep true to the spirit of Sunriver Books and keep some of the personality of their current website, while upgrading the elements that hold them back.
Site Mapping
​
I reviewed the card sort and comparators to make a well-informed redesign of their site map. Here is what I came up with:
This keeps many of the elements of the original website and just reorganizes those elements in a more streamlined layout while adding the adjustments needed from the research.
​
David's User Flow​
​
Now that this basic framework is set, we can consider how David would navigate the website. Let’s take a look at this possible user flow, which will inform my sketches and wireframes further on.
This highlights a simplified path through the site map that prioritizes David’s need for efficiency in finding his next book. Now I can take this and begin the next step where I start to visualize the components and frames, using the comparators for inspiration and adding to them as needed.
Sketching & Wireframing
​​
I largely leaned into the layout and navigation of the competitor, Roundabout Books & Cafe, and then added pages from Indigo and Barnes & Noble that seemed more straight-forward or cleaner in appearance. With all this in mind, I got to work on my sketches. Between the inspiration and looking at the site map, I sketched nearly every page of the redesign and before I knew it I had over a dozen. I hope these can help in the future within other design sprints for the website redesign. I started my wireframes based on those sketches and screenshots from the comparators as my guide. If you’re interested, you can see more of the frames here. Here are some examples of how they translated into my designs:
Logo Design & Style Guide​
​
​Next, I started to experiment with my style guide ideas and realized the current logo needed an update, too. Keeping with the theme of the sun and the river that the town is named after and the nature focus of the original logo, I did a remix that included an abstract sun over water and featured a bright sunny yellow and a cheerful watery blue.​
With these as a starting point, I went to Adobe Color to finish out the palette. Much like the open and light feel of the physical bookstore, I wanted the redesign to reflect this so there is more harmony between the physical and online experience. I also considered typography and chose a serif font that was easy to read while feeling a little old-fashioned to match the bookstore aesthetic.
This allowed me to begin the high-fi prototype!
Conclusion
Looking to the Future
This is just the beginning of the iterative process for this redesign. The account pages still need to be built out and the other wireframes added to the initial high-fi prototype. These additions would serve the other half of the initial user demographic and will help round out the virtual experience with the community element of the bookstore. Creating full functionality in the prototype would make useability testing in future phases of the project more accurate in comparison to the original study. In addition, considering many people shop from their phones this could open even more ecommerce doors for Sunriver Books & More.
I learned so much about troubleshooting and time management during this design sprint. Design is an interactive process and it will go on beyond any one phase of a project. I learned through this experience that I would love to work in a team where more can be accomplished in less time and in a capacity that allows me to see these projects evolve over time.
