Product design
Benefit cosmetics UK was looking for a digital solution to integrate and streamline their disparate systems, which included online booking, eCommerce website and CRM system. The goal of the project was to provide a seamless experience for customers and employees, with real-time data collection and integration into their central Customer Data platform. To bring this vision to life, I created a beautifully designed native app that not only lets users book treatments but also provides them with engaging content and exclusive loyalty rewards.
Activities:
Discovery // Site map // Screen flows // Wireframes // Design system // Screen design // Guidance // Live app
Year:
2023
DISCOVERY
During the UX discovery phase of the Benefit app project, several activities were undertaken to ensure a clear understanding of the project's requirements and goals. The initial phase involved working closely with key stakeholders to define the project's requirements, constraints, and KPIs. A review of in-store processes was conducted, which included documentation review, meetings with relevant stakeholders, and in-person visits to stores to gain a better understanding of the user experience. Existing platform architecture was reviewed and studied, including relevant user-facing and internal components, as well as the existing and future technical infrastructure required for the solution to operate effectively. A detailed review and definition of the key data and information flows within the solution architecture was undertaken. User research was conducted to define key user personas and top-level user journeys, while also reviewing the Benefit Cosmetics brand and creative guidelines to ensure consistency with the company's overall brand identity.
SITE MAP
Creating a sitemap for the Benefit Loyalty App was a crucial step in the development process. This process involved investigating the structure and grouping of features and concepts based on the initial user journeys and feature set. The sitemap provided a high-level view of the app's information architecture, allowing the team to see how different sections and features related to each other.
SCREEN FLOWS
The screen flows demonstrated how users could achieve specific goals within each section of the app, such as registration, onboarding, treatment booking, profile management, and earning or spending loyalty points. By visualising how users would navigate through the app, the team could identify potential pain points or areas for improvement, and adjust the design accordingly.
WIREFRAMES
Through annotated wireframes demonstrated the page-level information architecture, page IDs, and page interaction design. They provided a visual representation of the intended design and served as a blueprint for the UI and development phases. They took into consideration required API calls and back-end lookups, and focused on reflecting the end-user experience. They also included labels and signposts to indicate the intended functionality of each component and their contained elements. Each section of the app had its wireframes delivered separately to demonstrate every interaction in thorough detail.
DESIGN SYSTEM
Here, the emphasis was not just on creating a visually stunning interface but on infusing each UI element with the brand's distinct visual identity. From the initial stages of UX to the culmination in delivering an intricately detailed design system, the focus remained on applying intuitive UI design psychology seamlessly.
SCREEN DESIGN
During the design phase of the Benefit Loves app, our team collaborated closely with the development team to ensure that the user experience design requirements were met using Flutter's framework of widgets and components. The design was also influenced by the integration of several third-party services, such as the loyalty mechanics platform, booking system and CMS which each impacted the front end in different ways. To further improve the user experience, we worked closely with the in-house design team to adopt a cleaner digital branding expression and to establish a fresh look for the app.
PUBLISHING GUIDANCE
In order to ensure that the rich editorial content within the Benefit Loves app was consistent and easy to manage, our development team established structured data models within Contentful, the headless CMS used to power the app's content. To further support the in-house content teams tasked with creating and publishing this content, a comprehensive publishing guide was created. This guide provides step-by-step instructions on how to create, format, and publish articles within the app. By using this guide, the content teams are able to consistently produce high-quality, well-formatted content that enhances the user experience of the app.
LIVE APP
The Benefit Loves app was publicly released one month ago and has received positive feedback with a five-star rating on the App Store. The team is currently working on Release 1.5, which is scheduled for release in the coming month, and will include new features based on user feedback and our scheduled roadmap. The current version's user-friendly interface, editorial content, and loyalty mechanics, have received a fantastic response from users, all powered by the latest technology including Flutter's framework and Contentful's headless CMS.
