UX / UI Designer
MECCA Cosmetics
SuperHost Application: Empowering In-Store Customer Experience
This project involved the end-to-end UX/UI design of an internal-facing MVP mobile application, "SuperHost," for MECCA Cosmetics retail assistants. The application serves as a comprehensive digital resource to efficiently address customer inquiries, manage stock, and enhance in-store service capabilities.
Role
As the Lead UX/UI Designer, I collaborated closely with MECCA's internal UX team, leading and actively participating in client workshops. My responsibilities encompassed data synthesis, solution ideation, user journey mapping, wireframing, prototyping, visual design, and the presentation of design deliverables to both internal and external stakeholders, including members of the MECCA C-Suite.
Goals
-
Address existing gaps and limitations in the current in-store support system.
-
Define a clear and efficient User Journey, documented through a comprehensive Customer Journey Map for the MVP.
-
Develop a visually cohesive user interface that aligns seamlessly with MECCA's established brand identity and digital product ecosystem.
Timeline
This project was completed within an accelerated timeframe of two weeks (April 2024).
Understanding the Problem
Understanding User and Business Needs
The Challenge
MECCA's in-store "Hosts" play a crucial role as the first point of contact, guiding customers and assisting with various requests. The challenge was to create a dedicated digital tool, "SuperHost," to augment their capabilities, streamline their workflows, and ultimately elevate the in-store customer experience. This initiative aimed to move beyond reliance on the main POS system for informational queries, thereby improving checkout efficiency.
User Insights
Prior to my involvement, MECCA's internal UX team conducted thorough user research, including User Needs and Prioritisation Workshops with in-store Hosts. Key insights revealed the need for:
-
Intuitive and Mobile-First Design: A handheld application with easy navigation to allow Hosts to remain engaged with customers.
-
Data Security: Robust security measures to protect sensitive information accessed through the device.
-
Comprehensive Functionality: Capabilities comparable to the main POS for information retrieval, without disrupting the checkout process.
Business Objectives
The SuperHost application directly supported MECCA's strategic goals of:
-
Enhancing Employee Effectiveness: Providing retail staff with a powerful tool to improve their efficiency and knowledge.
-
Improving Customer Satisfaction: Streamlining in-store interactions and providing quicker access to information and services.
-
Creating a Secondary POS Support System: Addressing the need identified in staff surveys for a dedicated tool beyond the main checkout.
The MVP focused on enabling Hosts to: access detailed product information, scan barcodes for inventory and related product discovery, check stock levels across locations, facilitate product reservations, verify service and event availability, and access/update customer profiles (including loyalty status and transaction history) to enhance personalised interactions and identify upselling opportunities, contributing to increased average basket size and order value. A dedicated feedback feature was also integrated to gather real-time insights for continuous product improvement.
Design Process
Approach
Given the project's rapid timeline, a focused Double Diamond design approach was employed. This involved distinct phases of Discover, Define, Develop, and Deliver, executed in an agile manner. The initial three days were dedicated to intensive workshops covering brand immersion, user needs analysis (leveraging pre-existing research), technical constraints, pain points, business goals, and collaborative brainstorming sessions.
User Flows
Leveraging the insights gathered, I synthesised a streamlined user journey specifically tailored for the SuperHost MVP. This journey was designed to complement both the physical in-store customer experience and MECCA's existing digital ecosystem, ensuring a familiar and intuitive navigation pattern for Hosts.
Wireframing & Prototyping
In collaboration with MECCA's UX Design team, I facilitated a rapid ideation workshop involving feature brainstorming, sketching, and peer feedback. This collaborative approach enabled efficient prioritisation of features for the MVP. Subsequently, I translated these concepts into low-fidelity wireframes, followed by a paper prototype to validate the core user flows and ensure alignment with business objectives and user needs.
Visual Design (UI)
The visual design phase focused on creating a cohesive and on-brand experience, adhering to MECCA's recently refreshed style guide. Maintaining consistency across this new internal product was paramount. While respecting the established design system, I explored opportunities to introduce subtle visual distinctions to identify the SuperHost application as a unique tool clearly. This included proposing a new layout for the homepage to emphasise key functionalities like barcode scanning, adapting existing Product Detail Page elements for the handheld screen, and introducing a distinct typography treatment and a set of four new icons for the Customer Profile section to enhance usability and visual appeal within the application.
Key Design Solutions
The SuperHost application incorporated several key features designed to address specific user and business needs:
Secure and Efficient Login
Recognising the need for data security on shared devices, a streamlined login process with configurable time-out limits was implemented to ensure quick access for authorised personnel while minimising security risks.
Integrated Barcode Scanning
A central feature allowing Hosts to quickly scan product barcodes to access real-time information on in-store and surrounding store stock levels, as well as discover related products (variations or similar items), enhancing their ability to assist customer inquiries efficiently.
Accessible Customer Profiles & Loyalty Information
Recognising the need for data security on shared devices, a streamlined login process with configurable time-out limits was implemented to ensure quick access for authorised personnel while minimising security risks.
Real-time Feedback Mechanism
A dedicated in-app feedback feature enables Hosts to provide immediate insights on their experience with the application, facilitating continuous improvement and addressing any pain points proactively. This feature is easily accessible from the menu, ready to be accessed from any screen.
Interaction Design
To enhance usability and engagement:
-
Clear visual feedback was implemented for all user interactions, such as form submissions and data updates.
-
Subtle and intuitive micro-animations were incorporated to provide visual cues during navigation transitions, improving the overall user experience.
-
Barcode scanning functionality was strategically placed within the main navigation for quick and easy access from anywhere within the application.
-
The application's core functionality was logically divided into two primary pathways: support for customer requests and support for product-related inquiries. This clear information architecture allows users to navigate the application intuitively and efficiently, minimising the learning curve.
Accessibility Considerations
Adherence to WCAG AAA guidelines was a fundamental requirement. Throughout the design process, careful consideration was given to ensuring appropriate text contrast, legible typography, and accessible visual elements to create an inclusive experience for all users.
Final Design
The SuperHost app prioritised an intuitive, mobile-first design for on-the-go accessibility for in-store staff. Key design elements included a secure login process, integrated barcode scanning for quick product information retrieval, and easy access to customer profiles and loyalty details. Clear visual feedback and efficient navigation were crucial for enabling staff to assist customers seamlessly, enhancing both employee capability and the overall in-store experience.
Results & Impact
Outcomes
While specific quantitative data on the application's impact would be gathered post-launch by MECCA, the successful delivery of the MVP within the tight two-week timeframe and the positive reception from stakeholders indicate a strong foundation for achieving the project goals of enhancing employee capability and improving the in-store customer experience.
Lessons Learned
This intensive, fast-paced project provided valuable insights into efficient collaboration and rapid iteration. A key takeaway was the importance of quickly identifying critical information and focusing efforts on the core requirements for the MVP's success. The collaborative spirit and dedication of the internal MECCA UX Design team were particularly inspiring.
Next Steps
Following the completion of my involvement, the MECCA UX Design team took ownership of the prototype for internal user testing and further iterative design refinements.
Conclusion
The opportunity to design the SuperHost application for MECCA Cosmetics was a rewarding experience, particularly due to its direct impact on empowering retail staff and enhancing the in-store customer journey. The project's unique focus on bridging the online and offline experiences and providing immediate support to both staff and customers was particularly engaging. The challenging yet stimulating two-week timeline fostered a highly collaborative and efficient design process, where innovative ideas were encouraged and rapidly iterated upon. Witnessing the subsequent development of the application and knowing it will serve as a valuable tool for MECCA's teams across all stores is a testament to the power of user-centred design.
Thank you for reviewing this case study. Please feel free to reach out if you have any questions.
Skills Highlighted
UX Research
Facilitating and participating in Workshops (Brand Immersion, User Needs, Prioritisation, Customer Journey Mapping).
UX Design
Information Architecture, User Flow Creation, Wireframing (Low-fidelity & High-fidelity), Prototyping (Figma).
UI Design
Visual Design Principles, Typography, Colour Theory Application, Iconography, Style Guide Adherence, Contribution to Design Systems.
Tools
Figma
Other Relevant Skills
Strong Collaboration, Effective Communication (including presentations to C-Suite), Problem-Solving, User-Centred Design Principles, Commitment to Accessibility Standards.