Jafra Cosmetics| B2B Consultant App
Jafra, a global manufacturer and direct-sales marketer of beauty and skin care products, needed to design and implement a mobile app in both US and Mexican markets to help grow their business by increasing consultant enrollments and retaining a higher global consultant base.
Project Summary
Overview
Jafra needed to build an experience for their teams to manage business goals, day-to-day task-driven activities, while also providing an easy way for leaders and consultants to register prospective consultants. With a divided market in US and Mexico—each with its own requirements—Jafra engaged Optaros to replatform their app and also provide a clean, practical experience to help consultants manage their tasks and complete their monthly sales goals
My Role
Lead UI Designer for project, responsible for collaborating with a UX Lead on app flows and a feature value matrix, building out a pattern library/design system, visual design for all screens in two languages, functional and visual documentation. I was also responsible for ideating several types of gamified data visualization patterns, working with development to spec out progressive ratios, as well as designing a monthly calendar, item lists for company lineage and product catalogs, and specific registration flows for both US and Mexican markets, both with their own unique requirements.
Keeping Consultants Motivated.
Aside from the lack of a mobile tool through which consultants could access their daily goals, calendar and Jafra's robust product catalog, a week-long workshop revealed that Jafra was not happy with its visual aesthetic. They wanted a clean, austere experience (they mentioned Apple design as a point of reference) which also incorporated elements of their branded style and icons.
Key insights included:
1. 80% of Jafra's consultants operated on Android devices, leading me to believe that Google Material patterns might be the avenue to take for a clean and austere point of reference, rather than iOS design.
2. A majority of Jafra's consultants (primarily in Mexico) have trouble reading, suggesting that more iconography and less text would help with signposting and navigation.
3. Key functionality needed to incentivize goal progression and advancement, employing gamification and a variety of data visualizations to convey a sense of progression toward title advancement and sales rewards; A set of Lineage Management tools for Consultants to keep track of the goals of consultants they'd recruited; Offline Shopping, for when Jafra's eCommerce experience and product catalog could not be accessed via a browser portal; and finally, a Calendar and Address Book.
Gathering Requirements and Creating a Strategy
Based on the interviews, Optaros chose to leverage Xamarin as the app's platform (limited for visual design; no gradiated colors, for instance; a very specific calendar module), and the Experience Team (of which I was a part) created a set App flows which we then translated screen by screen into a feature-value-matrix that tracked requirements and calculated value to the business and user, design/tech efforts. We went through several drafts with the developers and our client partner, ultimately landing on a shared document that tracked requirements and user stories for every feature in the app. This matrix became an invaluable tool for surfacing institutional knowledge, tracking complex open questions and encouraging participation across multiple teams.
Using Beauty to Set the Mood.
In tandem with the finalization of the functional, I did my own visual discovery to build a moodboard we would share with both the US and Mexican stakeholders. I divided my research between looking at other multi-level marketing products and companies (like Avon and Take Shape for Life) as well as mobile products with modular design (Netflix, the App Store) and gamified progression for task-oriented goals (FitBit, Runkeeper, Google Fit.) I also identified key phrases and quotes from our notes and recordings from the stakeholder workshops, which allowed me to establishe a visual "north star" which was comprised of four words:
1. CLEAN (Austere, simplicity, less is more)
2. PRACTICAL (Task-driven, easy to use)
3. GAMIFIED (Incentivize growth and progression through data visualization)
4. LIFESTYLE (Employ Jafra beauty and brand wherever possible)
Ideating: Crafting the Perfect Pattern Library.
Guided by our north star and comparable digital experiences, I built a visual Proof of Concept. One of the earliest data visualization elements I created was an identifiable animated hexagon (the hexagon being a key element in Jafra's brand/style guide) which would fill as daily or monthly tasks were completed by a consultant. This animation would provide a hallmark progressive visual for the a consultant base with trouble reading, instantly communicating how many tasks had been completed in their specific goal.
Key elements of the Proof of Concept needed to include:
1. Opportunity Dashboard: accessible from the app header, providing a count of specific daily tasks a Consultant could accomplish each morning to advance and complete monthly goals.
2. Home Page: inviting and welcoming, offering immediate information about upcoming events, current monthly goals status (we used the animated hexagon I had designed, with large number to show the number of tasks already completed, and a threshold line which conveyed a sense of how much of the hexagon a Consultant still needed to "fill), available products in the catalog and current reward goals.
3. Reward Goal: a page that clearly explains to the Consultant what the goal is ("win a car!"), what tasks they needed to complete to get it, and where they currently were on the road to obtaining said goal.
Once the Proof of Concept was approved, my focus shifted to interaction design as the UX Lead began wire-framing from the feature value matrix and app flows. I spent a week building out a robust, evolving pattern library (which included colors, text styles, components and views, icons and navigation) One key challenge was the client's decision to switch platforms (Xamarin to SAP Hybris) right after I completed the pattern library. Thankfully, the switch freed us to use a less restrictive set of patterns and it only took an additional 8 hours to iterate toward a more liberal use of interactive and aesthetically pleasing components.
Making tasks fun through gamification and data visualization.
The UX Lead used my pattern library as a map for creating task-oriented data visualization on the Consultants' dashboard. Some of these included daily and monthly direct sales and sponsorship goals, commissions from other Consultants in their lineage, as well as indirect sponsorships from said lineage.
Once the UX lead completed a batch of wireframes, I applied visual design and annotations to that batch:
One of my key contributions was to identify and visualize multiple gamified progression modules for tasks throughout a consultant's monthly growth. These included a puzzle progression, linear fills, a sticker/colorform progression, iconographic progressions and both bar and radial charts.
I designed and annotated high-fidelity visuals for all screens, established visual language and margins, documented the adjustment of grid and spacing of elements based on device size. I also provided color values, text styles and interactions.
Transitions and Interactions.
Though robust animation was not included in scope of work, nor were micro-interactions, dev time was apportioned toward animating unique transitions. I directed and specced these transitions for the front-end development team, animating quick examples.
A compelling, incentivized experience for a growing community.
Beginning as a hybrid UX/UI Lead, then working in tandem with a dedicated UX resource as well as a talented, team of front-end developers, I spearheaded UI design for a clean, usable, signposted experience which made bold use of unique, gamified data visualization. The experience bettered the lives of an international, bilingual consultant base in need of a visually-driven experience to guide personal and professional growth. It also managed daily activities and made a task-oriented set of tools both compelling and beautiful while remaining frictionless and function
