Note Studio:
Effortless Shopping Experience
Redefining the Online Shopping Experience for Stationery Lovers
Note Studio is an e-commerce platform that provides customers with a wide range of quality yet cost-effective stationery products. As the Product Design Lead, I collaborated with a cross-functional team to overhaul the website experience, with a focus on making product discovery, pre-checkout, and overall user interaction more seamless and engaging.
ROLE
Product design lead
CLIENT
Note Studio
PROJECT
E-commerce/Web Experience
(2023)
MY ROLE AND IMPACT AT NOTE STUDIO
Research
I kicked off the project with comprehensive user research, conducting user interviews and surveys to understand user pain points and frustrations with the existing platform. Additionally, I conducted a competitor analysis to identify trends and best practices within the e-commerce space. This research provided invaluable insights that guided the overall design strategy.
Design
I led the redesign of Note Studio’s website by facilitating co-design sessions, defining problems and direction, and co-creating wireframes and high-fidelity prototypes based on user insights and stakeholder feedback. The focus was on improving the product discovery process by introducing clear categorisation, search functionalities, and filters. The checkout process was revamped to reduce friction. Bringing more intuitive and engaging browsing experience for users by enhancing interaction optimisation. The final designs were prepared for developer handoff, ensuring a smooth transition from design to implementation.
Communication
Throughout the project, I produced weekly presentations for stakeholders, ensuring continuous alignment with the product manager and developers. By setting clear agendas and communicating progress transparently, I kept the team informed and on track, fostering collaboration. This helped us stay agile and quickly adapt based on feedback.
NOTE STUDIO
About
Note Studio offers a large collection of stationery products, from notebooks and writing tools to office supplies and art supplies. The platform aims to help customers find quality stationeory and deliver a delightful online shopping experience for them.
Problem
Prior to the redesign, Note Studio faced challenges in terms of user experience. Key metrics like bounce rates, session duration, and exit pages showed that users might have struggled to navigate the site and complete purchases. Some users felt overwhelmed by the sheer volume of products and inefficient navigation, leading to high bounce rates and low conversion rates.
⬇️
monthly visitors
😳
users left the site after only scrolling several pages inc. homepage
⬆️
cart abandonment rates
* Client names and sensitive details have been anonymised for confidentiality. The design process and outcomes reflect the actual work while adhering to non-disclosure agreements.
Research/
Competitor Analysis
After a detailed analysis of direct competitors in the e-commerce stationery space, including platforms like Paperchase, Typo, and Muji, I noted that successful competitors excelled at simplifying navigation and product discovery, something Note Studio lacked.
User Interviews
To better understand the needs of our target audience, I did surveys and user interviews with both current customers and potential users. The insights I gathered were synthesised:
💡CHALLENGE / HMW💭
How might we enhance Note Studio’s website to make product discovery intuitive, help users easily shop and checkout, develop a bond with the brand, and improve overall user satisfaction?
Design Solutions/
Improved Navigation 🔍
Introduced robust filtering options, including a filter menu, filter buttons, and filtered indicators, to make product discovery more intuitive.
Optimised Interactions ↩️
Optimised responsiveness and interactions for a fluid user journey, giving users a feeling of control and creating an engaging website experience
Streamlined
Pre-Checkout ✅
Redesign the steps before checkout by adding necessary prompts and reducing content or cognitive load for each step
Impact &
In usability testing sessions we observed real user interactions with the initial prototypes and gathered comprehensive feedback on the user experience and interface.
Improved Navigation
We introduced robust filters, allowing users to quickly find what they were looking for. This change reduced bounce rates on the homepage and resulted in users spending more time on the site and viewing more pages per session on average. The feedback led the team and me to think about personalisation.
Optimised Responsivenss
Satisfied users revealed that the fluid interactions and engaging responsiveness give them a sense of control. Users can interact with elements in a predictable, intuitive way, leading to greater satisfaction.
Streamlined Pre-Checkout
Users appreciated the faster flow and fewer distractions. With only the necessary information being asked, users feel more respected and less overwhelmed, which helps create a positive perception of the brand and improves the likelihood of return visits.
& Iterations
Based on the research insights and testing data, the team and I went through multiple iteration co-design. Based on the feedback gathered, we continuously improved the designs.
Improved Navigation + Personalisation
Apart from the aforementioned solutions, we also wanted to draw customer's attention to personalised recommendations, which streamline the shopping journey by helping users discover products that align with their preferences, browsing history, or previous purchases. This reduced decision-making time, added convenience, and created a more engaging, tailored shopping experience. Users feel understood and valued.
Key Learnings
Continuous Testing
Practicing an agile workflow, we emphasised development sprints and early prototyping to deliver testable changes regularly and gather user feedback. With each new iteration, the prototype evolves to meet user needs more precisely. Prioritising testing on elements that have a high impact on conversions or user experience is important, while learning from all feedback remains crucial.
Cross-functional Collaboration
This project requires collaboration between various teams and stakeholders — development, marketing, data, and customer service. Involving all relevant teams from the start and defining roles can help prevent scope creep and misalignment on project goals, while also ensuring smoother decision-making processes.
Embracing Flexibility
User expectations and trends can shift rapidly. By remaining agile, continuously monitoring user behavior and adjusting design priorities based on real-time insights, we are able to quickly pivot and response to these trends, maintaining a competitive edge.