Admari Modern Tea Culture: Creating an Online Experience While Steeping Elegance
OVERVIEW
The Admari Modern Tea Culture website project aimed to design a fully functional and visually captivating online platform for a boutique tea shop located in Miami, Florida. The primary objective was to create a seamless user experience that allowed customers to book events and workshops, explore a diverse selection of high-end teas in the online shop, and discover information about and sign up for exclusive memberships. As a UX/UI designer, I employed user-centric design principles, conducted thorough research, and iteratively developed a modern and elegant website that catered to the unique needs of tea enthusiasts and tea education seekers.
Timeline: 1 week design sprint - February 2023
Tools: Figma, Google Forms, Google Workspace, Maze Usability Testing
Methodologies: User Research, Competitor Analysis, Persona Development, Information Architecture, Wireframing, Visual Design, Usability Testing
Team: 4 UX/UI Designers - including myself
PROJECT SUMMARY
Admari Modern Tea Culture is a niche tea shop that offers premium teas and engaging tea education classes in Miami. The owner's main goal was to establish an effective online presence by designing a feature-rich website to accommodate customers' diverse needs. Extensive research was conducted to understand the target audience, competitors, and industry best practices. Based on the research findings, a clear information architecture was designed to enable easy access to key sections.
The website's visual design was meticulously crafted to evoke a sense of sophistication and tranquility associated with tea culture. The Tea Shop section allowed customers to browse and purchase different tea blends with filters and sorting options. The Events & Workshops section showcased a calendar of upcoming classes and workshops, with seamless event registration. The Membership page highlighted exclusive benefits, encouraging interested users to sign up.
USERS & AUDIENCE
Overall, the website aims to appeal to a diverse audience, including tea enthusiasts, learners, local customers, and online shoppers, all seeking a delightful and informative experience in the world of premium tea and tea culture. The design ensures that users can easily find relevant information, explore the tea shop's offerings, and participate in events and workshops, creating an inclusive and engaging environment for tea enthusiasts of varying interests and backgrounds.
ROLE AND RESPONSIBILITIES
As a member of the four-person design team, my role and responsibilities in the Admari Modern Tea Culture website project encompassed seamless collaboration with my colleagues to ensure a cohesive and successful design process. I actively participated in a crucial meeting and interview with the tea shop owner, gaining valuable insights into her vision and objectives for the website. To create a user-centered design, I conducted extensive user research, including surveys and interviews, to gain a deep understanding of the target audience's needs, preferences, and pain points. Additionally, I took part in market and competitor research to identify areas for improvement and offer a superior customer experience. Collaborating with the team, I played a key role in crafting user personas, providing valuable guidance for design decisions based on user goals and behaviors.
Working collectively, we developed the website's information architecture to ensure intuitive navigation and easy access to essential sections. I actively contributed to the creation of interactive prototypes from wireframes and visual designs, enriching the user experience. Moreover, I worked closely with my fellow designers to ensure design consistency across all website sections, aligning our efforts with the established brand guidelines and user experience principles. The result was an engaging Admari Modern Tea Culture website, effectively communicating the owner's vision and catering to the desires of tea enthusiasts, creating an exceptional online tea culture experience.
PROCESS
Interview with Stakeholder
User Research
Competitive Analysis
User Personas
Problem Statement
Design Scope
User Flow Diagram
Information Architecture (IA)
Lo-fi & Mid-fi Wireframes
Prototype
User Testing
Next Steps
INTERVIEW WITH STAKEHOLDER
I engaged in an interview with the tea shop owner to gain a comprehensive understanding of her vision and aspirations for the website. Through this crucial meeting, I had the opportunity to delve into her goals, expectations, and the unique essence of Admari Modern Tea Culture that she aimed to convey to the online audience. By actively listening to her insights and concerns, I ensured that the design solutions would accurately reflect the brand's identity and effectively meet her objectives. This collaborative dialogue played a fundamental role in shaping the design direction, guiding the subsequent research, and ultimately contributing to the creation of a website that resonated with both the owner's vision and the desires of the target audience.
USER RESEARCH
The user research phase for the Admari Modern Tea Culture website project involved a comprehensive exploration of the target audience's preferences, needs, and behaviors. Through a combination of surveys and interviews, I gained deep insights into the diverse motivations of tea enthusiasts and those interested in tea education. A survey using Google Forms was conducted and had 16 tea lovers answer it, this helped us gather quantitative data, providing a broad understanding of user trends such as online shopping habits, and interest in educational experiences. In parallel, one-on-one interviews were conducted to delve into individual experiences and emotions, allowing me to uncover insights about expectations from the website.
COMPETITIVE ANALYSIS
During the competitive analysis and market research phase, we conducted an in-depth study of the tea industry and similar businesses' digital presence. This research aimed to uncover competitive insights, trends, and online strategies adopted by other tea shops. By exploring this landscape, I gathered crucial information about user experiences on competitor websites, as well as customer preferences for premium teas and tea-related experiences. Through a review of customer feedback and engagement on competitor platforms, I gained insights into customer sentiment, pain points, and areas of resonance.
Our research identified a key competitor situated a short distance from Admari Modern Tea Culture's studio. This competitor offers tea tasting and educational experiences, appealing to those seeking tea culture enrichment. Their existing website boasts functional design and visual appeal, effectively highlighting tea offerings and event schedules. This competitor's online presence and engaging user experience served as an insightful benchmark, guiding us as we designed an engaging online platform for Admari Modern Tea Culture.
USER PERSONAS
Two user personas were created for the Admari Modern Tea Culture website project to represent the diverse range of potential users and their distinct goals, behaviors, needs, and preferences. By creating and referring to these personas throughout the design process, we made sure, as a team, that the website design resonated with both tea enthusiasts and those seeking educational experiences. This user-centric approach contributes to a website that accommodates a broader spectrum of user needs, enhancing user satisfaction and engagement.
PROBLEM STATEMENT
Admari Modern Tea Culture aims to create an immersive online experience that caters to the diverse needs of tea enthusiasts and those seeking tea education. The challenge is to design a functional and visually appealing website that seamlessly integrates online tea shopping, event registration, and membership sign-ups, while also offering comprehensive educational resources and engaging content. The goal is to capture the essence of Admari's premium tea offerings and educational classes, fostering a strong online community of tea lovers and learners in Miami.
DESIGN SCOPE
The design scope for the Admari Modern Tea Culture website encompasses a holistic and user-centered approach that aligns with the tea shop's goals and the diverse needs of its audience. The primary focus is on creating a functional and visually engaging online platform that seamlessly integrates various features and functionalities to enhance the user experience.
USER FLOW DIAGRAM
I created the following flowchart diagram to illustrate the checkout process. This flowchart represents a major aspect of the project, as it closely aligns with the owner's primary objective for the website – ensuring a seamless and efficient checkout experience for customers after selecting their desired products.
INFORMATION ARCHITECTURE (IA)
The information architecture (IA) provides a logical and user-friendly structure for the Admari Modern Tea Culture website. It ensures that visitors can easily access the different sections, whether they're interested in purchasing premium teas, exploring educational resources, or registering for workshops. The clear navigation and categorization enhance the overall user experience, making it effortless for users like Emily and Connor to engage with the website's offerings.
LO-FI & MID-FI WIREFRAMES
We initiated the process of visualizing the final prototype by crafting both lo-fi and mid-fi wireframes. These wireframes played a crucial role in translating our design concepts into tangible representations. The initial lo-fi wireframes allowed us to sketch out the fundamental layout and structure, providing a basic framework to build upon. As we progressed, the mid-fi wireframes further refined these concepts, adding more detail and specificity to the visual elements and interactions. This step was pivotal in shaping the user experience, enabling us to make informed decisions and iterate on design aspects before moving towards the final high-fidelity prototype.
PROTOTYPE
The high-fidelity wireframes and prototype for the website were meticulously crafted using the design tool, Figma. In this advanced stage of the design process, we delved deep into translating the refined concepts into pixel-perfect representations. With a keen focus on detail, we ensured that every visual element, interaction, and layout resonated seamlessly with the envisioned user experience.
USER TESTING
This segment of the Admari Website prototype highlights the streamlined check-out process, aimed at ensuring a smooth and seamless transaction for the user. The central emphasis was on crafting an effortless and engaging experience, fostering user retention throughout the process and ultimately ensuring the successful completion of the order placement.
In our user testing phase, we selected the Useberry platform as our tool of choice. The results we obtained underlined users' strong preference for a user-friendly interface, where each button's action aligns logically with their expectations. Notably, during our shopping experience testing, we achieved a positive outcome. Out of the 11 testers, 9 were able to successfully complete the tasks. These insights, coupled with our ongoing design enhancements, showcase our commitment to providing an interface that seamlessly resonates with user preferences and needs.
NEXT STEPS
The journey of designing the Admari Modern Tea Culture website exemplifies a harmonious fusion of user-centric design principles and stakeholder objectives. If we’re lucky to move into the implementation phase and beyond, our commitment would remain resolute – to create a digital platform that not only resonates with tea enthusiasts and creative learners but also encapsulates the essence of Admari's tea culture. Hopefully we will get a chance to work with the stakeholder in the near future.
CONCLUSION
The creation of the Admari Modern Tea Culture website reflects the seamless blend of user-centric design and stakeholder vision. Through comprehensive research and collaborative effort, we developed a platform that caters to both tea enthusiasts and people seeking tea education, offering a holistic tea experience.
Our research, including surveys and competitive analysis, provided crucial insights into user needs and preferences. The resulting information architecture ensured easy navigation through teas, workshops, events, and educational content. Wireframes and prototypes transformed ideas into tangible visuals, validated through user testing on Useberry.
The Admari website stands as a testament to the fusion of creativity, functionality, and user-centricity – a true digital tea journey reimagined.