At frog we redesigned the ExxonMobil speedpass+ app, which allows for a connected rewards experience, with an approachable, lively brand, and expressive illustrations.
As a visual designer, I developed an initial visual direction, mood board, and brand guidelines to help establish the look and feel of the concept. Then, worked in detailed design sprints with a team of six designers to create high fidelity visual design flows, user states, iconography, brand illustration system, and a comprehensive component library, to ensure that the final deliverable is developer ready.
Design with a focus on Safety and Trust
Our client wanted to improve the visibility and traction of the rewards program. Our team first went to gas stations conducted preliminary quantitative interviews to discover some concerns around the payment experience.
We identified a large concern for security and trust, where respondents had worries of being physically present at certain gas locations for fears of safety. In addition, many respondents were wary of paying for gas at the pump for concerns of their card information being stolen.
Identifying Friction Moments
A heuristic analysis of the app allowed us to identify pain points with the current application and identify opportunities.
Design audit for the previous application.
Clunky Interaction
Best in market (Facebook, Google) interaction pattern for side menus is to come from the left side of the screen and take up 75% of the screen. This pattern helps users understand the relationship between the menu and the background.
Contrast and accessibility
For users with visual impairments, this text may not provide a pleasant reading experience or have enough contrast. Type should be clear and communicate information to users comfortably.
Inconsistent Forms
The web view based form used to enter new payment information is different than the form used to register for a new account and to add in rewards cards. Using the native form would create a more consistent and user-friendly experience.
Static Promotions
Promotions should be dynamic, cater to the user, understand when users have already used a promotion. Currently, promotions feel very static. The home screen shows a promotion that has been redeemed. This reduces confidence in the payment system.
Validating the Visual Design - Two Directions
Working within the existing brand to explore the polarities of type, color, and iconography, and illustration, I alongside another visual designer established and validated two visual directions to help guide the narrative and drive a decision based on brand presence and tone.
Tactile
A calm, approachable, and elegant aesthetic is expressed through the subtle use of visual elements. Earthy undertones, slight shadows, and rounded shapes help soften the experience, creating a feeling of ease.
Color as information, refined spot illustrations, light and airy typography, soft shadows with a tactile quality direct, yet friendly tone of voice.
Celebratory
An expressive, fresh approach that celebrates the user’s journey through bold aesthetics and a personable tone of voice. Generous use of white space with flat UI elements and contrasts in color create a clear sense of hierarchy and focus.
Balanced color palette, expressive hero illustrations, contrasts in typographic hierarchy, conversational tone, with hints of humor.
Moodboard A
Moodboard B
Validation Flow A
Validation Flow B
We validated the design directions side by side using the same interaction model as a baseline for building the flows. Participants favored both directions, Ultimately the decision came down to brand prominence and usability. We chose a blend, focusing on the lightness and cleanliness of direction 1, with the playful tone illustrations from direction 2 for rewarding moments.
Designing for Transparency and Trust
Our last three sprints were spent building comprehensive detailed design flows, with a focus on using illustrations to delight the user and highlight rewards and loyalty. We referenced the ExxonMobil brand guide as a jumping-off point to pull the design elements together and create a more branded experience.
Sign Up Flow
From the onset, we introduce a consistent and branded visual system with button states, form fields, and many more UI elements.
Onboarding
The onboarding flows focus on building transparency and trust in the application and experience with rewarding illustrations and a conversational tone of voice.
Rewards Center - Home
In the rewards center, hero moments incorporated playful and engaging brand-focused illustrations to provide guidance and moments of joy for the customer. The witty illustration style extends to incentive moments where the user is encouraged to register.
Rewards Center - Guest User
Design Library
We documented the design system and guidelines clearly for a seamless extension to the client design teams.
ExxonMobil Design System
The illustration system was designed to be modular in that any designer could easily create landscapes and locations through the base components.
UI Illustrations. Imagining the user can select their own vehicle, for a more personalized experience.
Outcomes
The app successfully launched in early 2020 to favorable reviews. The client team saw a 46% increase in app usage and a 21% increase in loyalty and acquisition.
Patents here!
Learnings
DETAILED Design - This was my first detailed design project from start to finish. The states and flows were extremely prescriptive to account for every use case, which was cumbersome at first but made way for an extremely seamless design handoff.
No need to "reinvent"- It is important to make design decisions based on what is most expected for the user, and save heavily visual treatments for the rewarding moments in the design.
