Creating a seamless e-commerce experience
RESEARCH
Understanding users and business needs.
I first wanted to gain a general understanding of Dawn: the browsing experience, its unique character — both online and in person — and how it translates online. To start, I conducted a heuristic evaluation of the Dawn Treader Book Shop’s website.
Right away, it became clear that the website functions more like a blog than a bookstore. It’s heavy on text and light on interactivity — there’s no shopping cart, no search or filters, and no straightforward way to browse or buy books. Instead, users are directed to a separate website that hosts Dawn’s product listings, which breaks the flow and makes it easy to get lost or frustrated.
What does the competitive landscape look like?
Through a competitive analysis of Barnes & Noble, Pegasus Books (a local bookstore in Berkeley, CA), and Books-A-Million, I found that all three prioritize clear navigation, strong visual hierarchy, and direct calls-to-action that guide users toward browsing and purchasing.
Defining the user.
To better understand Dawn Treader’s audience, I developed a persona representing a typical customer — someone who values the charm of used books and enjoys the discovery process, but struggles with the store’s outdated and inconsistent online experience.
PROBLEM
Defining the problem.
Desk research showed that despite having a loyal customer base and strong community presence, Dawn Treader’s online experience fails to reflect the charm and accessibility of its in-store experience. The lack of clear CTAs, limited search options, and inconsistent visual hierarchy create friction in what should be an intuitive browsing experience. Users who want to explore inventory or make purchases online often encounter confusing navigation, inconsistent information, and limited functionality — leading many to abandon the website altogether in favor of larger, more convenient retailers.
Ultimately, I settled on three main goals:
Create a unified browsing experience that connects product discovery and purchase.
Improve clarity around book availability and condition.
Build trust through a modern, community-oriented online presence — specifically, the website should seem trust-worthy and legitimate so the user is willing to both spend time and money on its products.
OUR CORE NEED
How might we streamline Dawn Treader’s digital presence to merge discovery and purchase into a single, intuitive experience?
IDEATION
Brainstorming!
During lecture, we used Crazy 8s to rapidly sketch design ideas and explore potential solutions. Drawing inspiration from the competitive analysis I conducted earlier, my initial focus was on three core features:
A consistent navigation bar across all pages for seamless browsing.
A prominent search bar to make product discovery effortless.
Immediate access to the shopping experience to reduce friction for users ready to purchase.
After sharing these sketches with my peer group, we came up with our final solution sketch.
One of my peers gave valuable feedback regarding the importance of establishing a unique voice for our business. In a crowded industry, it’s not enough to compete on functionality alone — the website should reflect the personality of the brand and foster a meaningful relationship with users.
Consequently, I revised my goals mentioned previously:
Create a unified browsing experience that seamlessly connects product discovery with purchase.
Improve clarity around book availability and condition to reduce user uncertainty.
Build trust through a modern, community-oriented online presence — the website should feel legitimate, approachable, and authentic, encouraging users to invest both their time and money while fostering a lasting connection with the brand.
Design system
First draft hi-fi wireframes
ITERATION
User testing
I conducted three user tests on UserTesting.com. Each participant lives in the United States, has previous experience purchasing books online, and are in their adult years. Participants were asked to rank their frequency of purchasing books online on a scale from 1 to 5, with 1 being the lowest and 5 being the highest.
Participants were tasked with purchasing a copy of “Harry Potter and the Sorcerer’s Stone” on both the original Dawn Treader website and my current prototype. All participants were able to complete the task on the prototype and none were able to do so on the website.
Participant 1
29; Male; United States
Occasional buyer (3/5)
Main Task: Purchase a copy of “Harry Potter and the Sorcerer’s Stone” on both the Dawn Treader website and prototype.
Task Completion: Completed task on prototype. Did not complete task on website.
Wants/Needs: Immediate access to purchase. Clear product listings and relevant details. Trust in website legitimacy for online transactions.
Paint Points:
Prototype: Confusion over checkout and “add to cart” method.
Website: No books in Shop Online section, unclear navigation, and need to contact someone to purchase.
Participant 2
30; Female; United States
Frequent buyer (5/5)
Main Task: Purchase a copy of “Harry Potter and the Sorcerer’s Stone” on both the Dawn Treader website and prototype.
Task Completion: Completed task on prototype. Did not complete task on website.
Wants/Needs: Legitimate, trustworthy, and modern browsing experience. Easy access to product listings. Accurate product details (specifically regarding condition).
Pain Points:
Prototype: Shipping dropdown confusing; “add to cart” not leading to next page.
Website: Confusing Shop Online page, difficult search, unsure if results are correct.
Participant 3
46; Female; United States
Occasional buyer (3/5)
Main Task: Purchase a copy of “Harry Potter and the Sorcerer’s Stone” on both the Dawn Treader website and prototype.
Task Completion: Completed task on prototype. Did not complete task on website.
Wants/Needs: Clear navigation and search functionality. Quick path to purchase. Faith that website is trustworthy and easy to use.
Pain Points:
Prototype: “Add to cart” button.
Website: Navigation confusing; Shop Online section not clear. Difficulty identifying if the search results belong to Dawn Treader or elsewhere.
Affinity diagramming
After analyzing these sessions, several patterns and pain points emerged:
Users struggled to find the separate hyperlink that directs to Dawn’s storefront hosted on AbeBooks. Even when they did, participants were unsure whether they were actually purchasing from Dawn Treader or from another bookstore, since AbeBooks hosts a variety of sellers across the country.
While the prototype was generally easier to navigate, participants noted issues with the “Add to Cart” functionality and some confusing elements during checkout, such as the “Shipping to…” dropdown.
Users found the website’s structure unclear, particularly the “Shop Online” section as it told users to contact Dawn via email and phone number. Many explored multiple tabs (About, Book of the Week, Shop Online) without success in locating where to purchase books.
Participants described the website as outdated, “drab”, and less trustworthy/legitimate. They expected a more modern, streamlined experience that clearly connected users to products and purchase.
I also received feedback from course instructors regarding my struggle with Dawn Treader’s chosen font: Georgia. The font only had four styles: regular, bold, italic, and bold italic. My GSI (graduate student instructor) suggested to choose a new serif font to accommodate to needs of this project.
SOLUTION
Finalized desktop wireframes
Finalized mobile wireframes
Finalized prototypes
