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.
My Role: Research and Analysis, UX, UI Lead, Visual and Interaction Design
Jafra wanted to build a B2B experience for their global teams to manage monthly business goals, day-to-day task-driven activities, while also providing an easy manner in which leaders and current consultants could register new, prospective consultants. With a divided market in US and Mexico, each with its own requirements, Jafra engaged Optaros by MRM McCann to craft a clean, practical experience which addressed both business and consultant needs.
A week-long workshop with Jafra's dual markets, run by the Experience Strategy team alongside Technology/Dev, resulted in a series of client recordings which identified several key data points, some of which included:
• The desire for a clean, aesthetically-pleasing experience in the vein of Apple's products, incorporating elements of the Jafra branded styles and icons.
• The requirement to utilize Xamarin as a development platform, driving an optimization of design toward its out-of-the-box components (this would change partway through , switching to SAP).
• The understanding that 80% of Jafra's current consultants operated on Android devices
• Learning that a majority of their consultant base (primarily in Mexico) have trouble reading, Jafra impressed the need for the UI to rely heavily on not only iconographic solutions , but also employ gamification for the bulk of its data visualization in terms of monthly goal progression.
• Key functionality focus would center around Goal Progression/Visualization (employing gamification in the creation of custom visuals for a variety of progression types), Lineage Management and advancement, Offline Shopping within the app when Jafra's eCommerce experience could not be accessed via portal, and management of both a Calendar and Address Book.
After gathering data, two parallel UX tracks began:
• Functionally, flows were created which I translated with tech/dev (and our client partner) into a feature-value-matrix that tracked all potential features appearing on a respective page within the flow. It calculated value to the business and user, design/tech efforts, and became our source of truth.
• Visually, I crafted a moodboard which included discovery and comparative analysis based on conversations with stakeholders and end-users. Identifying key phrases and quotes from our workshops. I established a north star mission which included four words to design by: CLEAN, PRACTICAL, GAMIFIED and LIFESTYLE. Guided by that north star and comparable digital experiences and features, I laid out potential design avenues to the client and following feedback from the FVM and moodboards, I built a proof of concept as seen below. One of the key visual experiences we hoped to create was a large, identifiable animated hexagon (the hexagon being a key element in Jafra's global brand) which filled as tasks were completed, centered in which was the current number of completed tasks. This animation would provide a hallmark progressive visual for the less-likely-to-read consultant base, instantly communicating how many tasks they'd completed in their specific monthly goal.
The proof of concept was designed in Sketch and the prototype was built in Marvel.
At this point, a UX lead was brought in to complete the FVM and start the wireframes (which then became the new source of truth). My focus shifted to UI and visual/interaction design, taking cues from the moodboard and PoC to craft a robust, evolving pattern library within Sketch, working within restrictions set forth by the Xamarin platform (no gradiated colors, for instance; a specific calendar module, etc). This set of patterns (including color palette, text styles, components and views, icons and navigation) would be used not only to visualize the wireframes but also by front-end developers in the creation of styles, transitions and interactions within the code. The pattern library continued to evolve as new patterns were built in wireframes and visual stages.
One key challenge was the client's decision to switch platforms partway into the project. Thankfully, the switch from Xamarin to SAP freed us to a less restrictive set of patterns and it only took an additional 8 hours to iterate toward a more liberal use of interactive and visually pleasing components.
Working in tandem with the UX Lead and Dev team, I designed five batches of screens, covering Log-In flow, Dashboard and Opportunity Dashboard, Goals and Lineage, Calendar, Address Book, Offline Shop and Registration, and Account/Settings Management.
One of my key contributions was identifying and visualizing multiple gamified goal 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.
Using Sketch (alongside Adobe Illustrator and Photoshop for icon/image work), I designed and annotated high-fidelity visuals for all screens, established visual language and margins, documenting the adjustment of grid and spacing of elements based on device size, while also providing color values, text styles and interactions. Once a set of visual designs was approved, they became the new and final source of truth for the developers.
Though robust animation was not included in the scope of work, nor were intimate microinteractions, dev time was apportioned toward animating unique transitions. I took it upon myself to direct and spec these transitions for the front-end dev team, designing quick examples within Adobe After Effects.
Beginning as a hybrid UX/UI Lead, and then working in tandem with a dedicated UX resource as well as with a talented, overseas team of developers, I spearheaded design for a clean, usable, easy to navigate experience which made bold use of unique, gamified progressions. The experience bettered the lives of a consultant base in need of a visually-driven experience to guide both personal and professional growth, but also manage daily activities and make a task-oriented set of management tools both compelling and beautiful while remaining frictionless and functional.