Odradek
GOAL
Design a responsive website for a local business. If there is already a website, analyze what already exists and improve the solution with a main focus on the purchasing process.
MY ROLE
UX Design: Research, Concept Testing, Usability Testing
UI Design: Color Chart, Wireframing, Prototyping
DURATION
9 days
DISCOVER
BACKGROUND
Our task was to explore the market and connect with a specific stakeholder looking to improve their business promotion. While local shops have typically relied on their physical storefronts, today's business landscape highlights the importance of a strong online presence, which shouldn't be underestimated.
CLIENT
tools: stakeholder interview
Odradek, a bookshop in Berlin-Schöneberg, named after a creature from a Kafka novel, showed eagerness to collaborate with us. They provided valuable insights during our interview, where we focused on understanding their customer base, core values, and what sets them apart as a book retailer. We also aimed to grasp their unique identity to incorporate it into the website design later on. This was crucial as Odradek uses a third-party service for purchases, which we aimed to seamlessly integrate into the website for a smooth user experience.
USER
tools: user interview, online survey
Odradek's customer base predominantly consists of local, loyal women aged 30 to 45, drawn to the store's diverse and unconventional book collection and personalized customer service. This unique blend makes Odradek stand out in the local bookstore scene. With these insights in hand, we focused our interviews on women who appreciate a satisfying bookstore experience and engage in online book shopping. Our main goal was to improve the website's e-commerce functionality. During the interviews, we explored their book-buying habits, how they discover and choose books, any challenges they face while browsing, and their thoughts on digital assistance.
CONCEPTUALIZATION
THE PROBLEM - THE SOLUTION
tools: affinity diagram, user persona, user journey map
Utilizing the insights gathered from interviews and survey responses, we immersed ourselves in the data to gain a comprehensive perspective. This analysis highlighted that key facets of the purchasing process revolved around recommendations, reviews, and a nuanced receptiveness to digital assistance. Further statements provided by interviewees and survey participants revealed a recognizable tendency towards valuing human connection in the context of book purchases, particularly within physical stores. This prompted us to think about the challenge of recreating this interpersonal connection on a website.
IDEATION
tools: crazy 8s, brainstorming, dot voting
With the problem statement serving as our guiding objective, we engaged in a session of Crazy 8s to translate our initial thoughts into tangible concepts on paper and screen. Numerous ideas centered around the challenge of infusing online recommendations with a human touch and enhancing the advisory aspect to make it more personable.
The initial notion involved a book randomizer that offered random suggestions based on the customer's chosen topic or genre. However, this concept lacked the desired human connection in guiding someone's choices. Subsequent brainstorming led us to devise a questionnaire designed to mimic the interaction one would have with a staff member in a physical bookshop. Similarly, this virtual staff member asks specific questions about the customer's reading habits and preferences, ultimately compiles a personally curated book selection.
SOLUTION DESIGN
INFORMATION ARCHITECTURE
tools: heuristic analysis, sitemap, user flow
With our concepts in hand, we moved into the prototype phase, carefully planning how to organize content across the website. We used a structured sitemap to organize all content effectively, creating clear connections between different pages. At the same time, we analyzed a competitor's e-commerce site to better understand usability, providing a solid foundation for our prototype development. The sitemap guided our User Flow, outlining how users navigate through our "Book Buddy" questionnaire to get personalized recommendations. After selecting a book, users can add it to their cart and complete the checkout process. Another option is our "Staff Picks" section, where Odradek's staff offer brief reviews of books they've personally read. Users can easily transition from this section to the book page to begin the purchasing process.
PROTOTYPE
tools: figma, usability testing
Guided by the initial feature drafts and insights from the heuristic analysis, we dedicated our efforts to crafting Mid-Fi wireframes for key sites such as the landing page, book page, cart, staff picks page, checkout, and questionnaire.
Following usability tests conducted with our target users, we gained invaluable insights that proved instrumental in refining the user experience. The main points of the test were the following:
-
The buttons in the questionnaire had different colors, which confused users as they thought they might have different meanings
-
The title „Lisa is reading“ in the staff recommendations section was unclear as the user asked, „ Who is Lisa?“
-
The official Odradek logo was hard to get as it was not intuitive how to read the different-sized and colored letters
Post-testing, the focus shifted to refining and improving the website's overall aesthetics. With decisions made on typography, color schemes, and UI elements, we advanced towards constructing our High-Fi prototype, giving the website the polish it rightfully deserved.
FINAL DESIGN
tools: figma
Discover the final prototype of the website provided below. Additionally, we’ve initiated a first exploration into the responsive design of the bookshop. Please note that, due to time limitations, this representation serves as a preview at this stage.
NEXT STEPS
In the forthcoming phases, our focus will be on finalizing the development of crucial pages including an account page or book sites to enhance user experience. We aim to broaden the spectrum of payment options to accommodate diverse customer preferences, including methods like PayPal, Apple Pay, and Google Pay. Additionally, we plan to introduce a new feature named the "Book Randomizer", enabling users to input their book preferences and obtain tailored recommendations. Subsequently, we will engage in extensive usability testing and refine the Book Buddy feature iteratively, ensuring it delivers a seamless and intuitive experience for users in search of personalized book suggestions. And finally work on a holistic responsive app version of the bookshop.