UI/UX Case Study
Odyssey Notebooks
Amita Chandekar
UX/UI Case Study
07/2023
Redesign
The Beginning
In today's digital landscape, a strong online presence is the cornerstone of success for businesses. As designers, we embraced the 4-week challenge to revamp Odyssey Notebooks' website, driven by the belief that a well-crafted platform can elevate their brand and engage customers effectively.
The Goal
The primary goal of the website redesign was to create an intuitive and visually appealing platform that offers an exceptional user experience. Odyssey Notebooks aimed to showcase their premium products, drive higher conversions, and become a leading destination for premium stationery, inspiring self-expression through writing.
Project Overview
Design Challenge
Odyssey Notebooks' website had a plain catalog format, limiting the ability to showcase premium products.
The lack of visual appeal and user-friendly interface lowered customer conversion rates.
A redesign was essential to enhance user engagement and support business growth.
Solution
Focused on creating a user-friendly browsing experience.
Developed a logical system to showcase premium notebooks, journals, and related products.
Constraints
Time: 4-week deadline limited design exploration.
Shopify Integration: This requires seamless integration with Shopify templates.
Limited Customization: Shopify Basic Plan restricted design customization options.
The Client requested to proceed with the design, and they will handle the integration part later.
Discovery Phase
We began by analyzing both internal and external factors to identify key opportunities for improvement. This approach ensured that our redesign addresses business needs while staying competitive in the market.
Internal Analysis
Stakeholder Meetings
Conducted Zoom calls with key stakeholders to clarify business needs, refine goals, and understand challenges.
Focus
Defined functionality requirements to align with the brand’s vision and improve user engagement.
External Analysis
Competitor Research
Analyzed competitor websites to identify best practices and opportunities for differentiation.
Market Context
Considered trends in premium stationary to ensure the redesign resonates with user expectations.
Product Understanding
Odyssey Notebook’s specializes in premium handcrafted notebooks, focusing on two standout papers:
68 gsm Tomoe River Paper
83 gsm Cosmo Air Light Paper
Showcasing the superior quality of these papers was essential to the website design. Other paper types were categorized separately to ensure precise navigation and a smooth user experience.
Current Website
To initiate the redesign process, we thoroughly examined Odyssey Notebooks' current website. We conducted a competitive analysis, focusing on the landing page. We utilized attention insight, heatmap, and focus map to gain deeper insights. The results provided valuable data, enabling us to better understand user behavior and make informed decisions for the subsequent redesign stages.
Landing Page
Heatmap
Clarity Insights
Insights
Users were drawn to specific sections on the landing page based on the heatmap.
The focus map highlighted the most prominent elements that caught users' attention.
Some sections received minimal engagement, indicating potential areas for improvement.
Certain elements may need restructuring to optimize user flow and engagement.
The analysis helped identify opportunities to enhance user experience and guide redesign decisions effectively.
Website Analysis
As part of the comprehensive website analysis, we explored the current website’s analytics, focusing on target users, traffic patterns, and social media presence. By comparing these metrics with its competitors, we gained valuable insights into Odyssey Notebooks' market position and identified areas for improvement.
70% Traffic through Desktop
Most users within 24 - 44
Less Social Media presence
Insights
Design for Desktop Users: With 70% of traffic coming from desktop devices, prioritize optimizing the website for desktop users to enhance their browsing experience.
Optimize Mobile Experience: While desktop traffic is dominant, ensure the website is still mobile-friendly to accommodate the remaining traffic and provide a seamless experience across all devices.
Tailor Content for Target Audience: With the majority of users aged between 24-44, craft content and design elements that resonate with this demographic to improve user engagement.
Boost Social Media Presence: Address the lack of social media presence by incorporating social media integration and strategies to increase brand visibility and user engagement.
Competitive Analysis
A thorough competitive analysis was conducted, evaluating three direct competitors and one indirect competitor. Using our standardized set of eight metrics, we compared Odyssey Notebooks with these competitors, gaining valuable insights into their strengths and weaknesses. To view the complete competitive analysis, please click here.
Insights
Benchmark Against Competitors: By comparing metrics with competitors, identify areas where Odyssey Notebooks can improve and implement strategies to stand out in the market.
User Flow
Next, we crafted a simple user flow, serving as a guiding framework to enhance the website's usability. This flow enabled us to streamline the visitor's journey, ensuring easy navigation, quick access to products, and seamless conversion actions. By mapping out the user's path, we aimed to optimize the overall user experience and facilitate a smooth interaction with the website.
Wireframes
We created digital wireframes to lay the foundation for the site’s structure and user flow.
These wireframes focused on product exploration, landing page, and navigation.
Client feedback helped guide further refinements at this stage.
First Iteration
Recognizing the client's preferences remained unclear, I proactively presented three distinct UI concepts to gain valuable insights into their design preferences, dislikes, and expectations. This approach aimed to align our vision and deliver a design that resonates with the client's vision for Odyssey Notebooks' website.
Initial Feedback
The initial feedback from the client encouraged us to break free from the conventional theme colors and explore alternative color schemes that align with their brand identity, aiming for a unique touch on the website design. They emphasized the importance of standing out from competitors and sought our creative input in achieving this goal.
Furthermore, the client expressed a desire for a visually compelling section on the landing page, effectively conveying the value proposition of their products without overwhelming the user. This presented a significant challenge that required thoughtful and creative design solutions. Despite the rocky start, we viewed this as an opportunity to elevate the project and craft a truly exceptional website for Odyssey Notebooks.
Client Requirements
The client appreciated the section that showcased the product's value proposition visually, but they felt it needed refinement. While they liked the idea of incorporating illustrations since it aligned well with the essence of notebooks and journals as well as added a creative touch to the overall design. they expressed uncertainty about incorporating them. To align with their preferences, we decided to opt for a compelling hero image of a notebook that conveys the essence of their brand and products effectively. Adapting the design based on the client's preferences was important.
Design System
Given the time constraint of 4 weeks, I established a well-defined design system, encompassing color palette, typography, and UI components. Throughout the design process, I utilized components to streamline edits based on client feedback. Implementing a global auto-layout for the frame facilitated easy addition or removal of sections, benefiting both the design process and enabling future client modifications.
Odyssey Notebook’s Transformation
Landing Page
Before
No Visual Hierarchy
Inconsistent Image Sizing
Low Image Resolution
Unclear Sections
After
An intuitively structured and concise menu facilitated seamless navigation, guiding visitors effortlessly through the website.
A visually compelling section to effectively convey the value proposition of their premium products without overwhelming the user.
Each section was thoughtfully defined, showcasing the distinctive paper types, inspiring confidence in Odyssey Notebook’s premium products.
Testimonials beamed with user satisfaction, reinforcing the brand’s credibility.
A minimalist FAQ section offered clarity without overwhelming visitors, catering to their inquiries.
Listing Page
Before
After
Visually unappealing
Inconsistent Image sizing
Low Clarity
This interactive carousal allows users to explore the premium paper collections with a simple click, offering an engaging and seamless browsing experience.
The all-encompassing collection on display showcases the wide array of premium notebooks and journals offered by Odyssey Notebooks.
The inclusion of customer favorites also streamlines the navigation process, providing users with quick access to the most sought-after products, ultimately improving the overall usability and satisfaction of the website.
Product Page
Before
After
Product page features an image carousal for multiple product views, accompanied by concise details on the right, ensuring a seamless shopping experience with comprehensive product insights at a glance.
Vital product details and return policy are conveniently housed within an accordian menu. This ensures a clutter-free presentation, allowing users to access essential information with a simple click.
“Recently Viewed” section encourages further exploration, gently urging shoppers to add more to their cart by providing easy access to previously browsed products, enhancing engagement and promoting a seamless shopping experience.
Cart Page
Before
The cart page lacks a feature that allows users to modify the quantity of items they have added to their cart.
After
The progress bar incentivizes customers to boost their order values, qualifying for free shipping, ultimately increasing revenue and promoting customer loyalty, thus benefiting the business.
On the cart page, users are provided with the functionality to easily adjust, edit or remove the quantity of items they have added to their cart.
“Recently Viewed” section enhances engagement, fostering repeat visits and conversions.
Reviews page
Before
Cluttered layout
Cognitive Overload
Inconsistent Image sizing
Lack of visual hierarchy
After
The form field strategically remains disabled to promote authenticity. Only genuine customers who have purchased can leave reviews by inputting their purchase order number.
This thoughtful approach safeguards the credibility of the reviews, enhancing trust among potential buyers and elevating Odyssey Notebooks' reputation for transparency and customer satisfaction.
Additional Pages
The additional pages, including 'Our Story' and 'Policies,' feature a user-friendly accordion format, cleverly organizing all relevant information to maintain a clutter-free interface. This thoughtful design ensures that visitors can access essential details with ease, offering a seamless browsing experience and encouraging them to delve deeper into Odyssey Notebooks' brand story and policies, fostering a sense of trust and transparency.
My Experience
Immersive collaboration with Odyssey Notebooks deepened my understanding of artisanal stationery and the art of crafting premium notebooks and journals.
Working closely with the client's team allowed me to align the website redesign with their vision, ensuring a seamless user experience tailored to their target audience.
I was inspired by Odyssey Notebooks' passion for craftsmanship, and this dedication translated into a visually stunning and user-friendly website design.
Key Learnings - Discovery Phase
Start with Clarity: Before commencing the design process, it is essential to identify and understand the business goals, user problems, and create a roadmap with clearly outlined deadlines and deliverables. This alignment with stakeholders ensures a focused and purposeful approach.
Document Everything: From the beginning, maintain a comprehensive document that captures all key points, including business needs, identified problems, design stages, feedback, and discussions. This single source of truth becomes invaluable for effective collaboration and decision-making.
Business Alignment: Understand the business's revenue streams and language to align design solutions with their objectives. Value feedback from the business stakeholders, as they possess unique insights into their operations.
Stay Open-Minded: Avoid becoming overly attached to design ideas and be receptive to input from all stakeholders. Valuable suggestions can emerge from diverse sources, fostering better design outcomes.
Collaborate Early: Involve main stakeholders and developers from the project's inception to encourage co-creation of ideas. Their input will be valuable in shaping the feasibility and success of the design implementation.
Key Learnings - Delivery Phase
Establish Design Consistency: Define design patterns and language early in the delivery phase. Consistency is key to achieving good design and creating a unified user experience.
Embrace Iterative Feedback: Continuously gather feedback and refine the design throughout the delivery phase. This iterative approach ensures the final product meets user expectations and fosters positive interactions.
Prioritize for Time Constraints: With time constraints in mind, prioritize key design elements and essential user flows. Focusing on these critical aspects is crucial to deliver a compelling and functional website within the set timeline.
Conclusion
In conclusion, the project's reflection allowed us to identify key factors that contributed to our success, as well as blockers that hindered progress. Valuable learnings were gained to enhance our process in the future.
Key Takeaways
Ensure Complete Business Requirements: Don't initiate the design process until all business requirements are thoroughly understood and documented.
Prioritize UX before Visual Design: Avoid jumping into visual design until the solution's UX is well-defined and validated.
Invest in Discovery: Dedicate ample time during the discovery phase to validate assumptions and ensure the right approach is taken.
Acknowledge Mistakes: Recognize areas where improvements can be made, such as dedicating more time to problem framing to save time during visual design.
By acknowledging these takeaways and continuously refining our approach, we can strive for an even more effective and efficient design process in the future.