Ecommerce Website Design
My Contributions
Information Architecture
UX/UI Design
Branding & Logo Design
Usability Testing
The Team
Brandon, Developer
Duration
overview
Eastwind Books of Berkeley is a small, independent bookstore in Berkeley, CA specializing in Asian American and Ethnic Studies.
I redesigned their ecommerce website to streamline the customer’s book-buying experience. I worked closely with the bookstore staff along the way — getting insights on customer and business needs, aligning on site structure and visual direction, and brainstorming logos.
BACKGROUND
Concerns over existing website
Eastwind Books witnessed a transition from mainly in-store sales to online sales during the COVID-19 pandemic. Though they had an existing website, the staff expressed concerns about its usability and overall aesthetic. These concerns became particularly pressing after their website became their primary business avenue during the pandemic.
My goal was to make “that whole website thing” more usable, creating a seamless and enjoyable experience for customers when purchasing books online.
“People would call in to order a book. We’d redirect them to order on the website, but...they’re reluctant to go through that whole website thing.”
Research
Understanding the client and users
I conducted 5 interviews with potential customers, delving into their shopping habits, motivations, and preferred online bookstore sites. I also spoke with 4 bookstore staff members, exploring customer demographics, frequently asked questions, and challenges with managing the existing website.
“I don’t want independent bookstores to close... but I choose to purchase from Amazon when it’s cheaper or when I need fast delivery.”
Key findings:
- Users like supporting local businesses, but also want to buy at the lowest price.
- Users enjoy browsing and buying gifts, with a preference for fast delivery options.
Meet Sarah and Vivian
I synthesized my research findings into two personas that I utilized throughout the design process. These personas helped me explain design decisions to the bookstore owners, such as which features to prioritize in the minimum viable product (MVP).
Identifying critical issues
I also evaluated the usability of the existing website through a heuristic evaluation. By identifying the current issues and their impact to the customer experience, I determined which issues were critical to address in the website redesign. View the full heuristic evaluation here.
Issues with greatest severity:
- Cart is difficult to discover because it's on the bottom of the page.
- Appearance of links is not consistent.
- Site architecture is confusing, with 24 global navigation links and 3 levels of depth.
site Architecture
Rethinking the website structure
During my heuristic evaluation, I identified an opportunity to enhance the existing navigation structure to facilitate easier customer browsing. To achieve this, I conducted a series of card sorts to reorganize the site structure based on user feedback. View the full results of the card sort here.
By analyzing the results of the card sort, I found that users preferred a flatter navigation system. With this knowledge, I reduced the existing global navigation from 24 links to just 7. Using these insights, I created a visual representation of the customer's journey through a site map and user flow.
Wireframes
Putting ideas on paper (and Figma)
Based on the site map and the user flow, I began sketching and creating some low-fidelity wireframes to explore different layouts.
While creating these wireframes for the MVP, I prioritized features that our personas Vivian and Sarah would consider important for purchasing books from Eastwind. I also resolved usability issues identified in the evaluation. At this point, I had begun sharing these designs with the developer and annotated the expected interactions of these features in the Figma file, so he could investigate Squarespace’s capabilities while I refined my designs.
visual design
Say hello, new logo
At the beginning of the project, the Eastwind staff expressed a desire for the new website to be more modern. Before transitioning to high-fidelity mockups, I collaborated with the staff to develop a new logo that captured their online brand identity. To initiate the logo design process, I conducted word mapping and sketched initial concepts.
Given client feedback, I generated more logo sketches with the concept of boats and water. Once we narrowed in on this concept, I digitized the top 4 variations on Figma for their review. The Eastwind owners loved the idea of the boat riding a dynamic wave, so logo 4 became the final logo design.
Note: the client had originally chosen logo 2 as their preferred logo. Logo 2 is shown in the high-fidelity designs before it was swapped out for logo 4 in the final prototype.
“Logos 1 and 4 with the blue water stand out. I prefer logo 4, as the concept of rough waters and boat in motion is aligned with Eastwind’s theme.”
Time for a branding refresh
I also crafted a mood board to visualize Eastwind’s brand. After reviewing this with the staff, I compiled Eastwind’s main colors, typography, and interface elements into a UI kit. This provided me with a strong artistic direction when creating interface elements for the high-fidelity prototype.
prototype & testing
Planning and building the prototype
To determine the vital screens to develop in high-fidelity and test with users, I documented the essential tasks that users should be able to accomplish on the website in a usability testing plan. This helped me concentrate my design efforts on the critical screens required for testing. View the full usability testing plan here.
As a result, I built an interactive prototype that allowed users to search for a specific book or browse book categories. View the initial prototype here.
Getting user feedback
I conducted usability testing with 5 participants and synthesized the research findings with an affinity map. Here’s what happened:
Key areas of improvement:
- More details for the gift options - what options are available and when will the user select them.
- ‘Shipping Outside of the United States’ link is not visible enough.
- Sales banner blends in with the rest of the color scheme.
- Hero section of landing page feels very overwhelming.
design iteration
Refining those screens
Based on the users’ feedback, I made a few improvements to the design:
- Distinguished the color of the sale banner from the red call-to-action buttons. I also used the hero section of the landing page to emphasize the sale event. See below for a before-and-after!
- Added an icon next to ‘Shipping Outside of the United States’ link for increased visibility. Users tried to edit the zip code for international shipping, so I included a link in the zip code popup modal that routed to the international shipping form.
- Provided more details of the gift options through a ‘Learn More’ popup modal on the product page.
Final prototype
Check out the final prototype to see the improvements ✨.
Conclusion
Key takeaways
- When designing a logo, bring at least a few different sketches to show your client. The initial sketches may not be anything close to the final logo (like mine!), but it helps the client brainstorm further or narrow down the direction.
- User research takes time to organize. Involving customers was incredibly helpful, but it required time and effort from the client and their customer base. The card sorting took two weeks to plan and execute, and I could have introduced this earlier on the process to get more participants. I learned to be intentional when discussing research methods with clients and plan for it as early as possible.
- Analyze competitor websites, even after initial research! Throughout the design phase, I constantly scrutinized at other websites to see how they implemented certain features. I was compelled to think critically about which design approach worked the best, and whether it would apply to the Eastwind website.
