Celero, a prominent solutions integrator in Canada, and STACK formed a strategic partnership to create and release a new digital member experience and rewards platform called the Aura Loyalty App. As the primary UI/UX designer, I collaborated closely with the Celero team to white-label the STACK App into the Aura Loyalty App. This experience taught me how to efficiently rebrand app features to fit another brand, optimizing the process.
SCOPE
White-labeling, UI/UX Design, Rebranding
TOOLS
Sketch, After Effects, Photoshop, InVision, Jira, Zeplin
PROJECT GOAL
The objective of the project is to white-label the STACK app to create the Aura Loyalty app for credit union members. Leveraging STACK, our design team reimagined a visual language for Aura. One of the primary goals was to streamline the design and development process for future white-label projects. Throughout this process, I closely collaborated with the development team, particularly on the color labeling system.
MY ROLES
AAs the primary product designer for the project, I oversaw the end-to-end design process, creating app screens and component & UX flow documentations. Additionally, I was responsible for developing and maintaining the color labeling system to ensure an efficient white labeling process that could be easily applied to future white label projects.
WHITE LABEL DESIGN SYSTEM
With scalability in mind, my focus was on creating a versatile white-label design system that could be applied to other brands with minimal edits. The objective was to enable significant changes while keeping the design system edits to a minimum. To ensure future scalability for white-label products, it was crucial to have components that provided flexibility and customization when building features and layouts.
To maintain consistency and facilitate customization, all elements, components, and modules needed to adhere to strict rules. This approach ensured that the design system could be easily adapted for other brands while maintaining a consistent visual language.
✓ Customize colors and typography, and upload brand assets
✓ Modify components, shapes, and content configurations
✓ Utilize updated modules to construct page layouts according to project requirements
Colour Label Documentation
Colour Label System in Google Sheets
Aura Colour Palette in Zeplin Styleguide
COLOUR LABEL SYSTEM
To facilitate the development team's ease of switching colors for a white-label app, I created a comprehensive color label documentation with STACK and Aura example screens. Additionally, I provided a color palette documentation and a Google Sheets file that the development team can refer to. The Zeplin Styleguide's color palette also adheres to the white-label colors specified in the color label documentation.
Aura Virtual & Physical Cards
ASSET DOCUMENTATION
Based on the requirements provided by Celero, I created several asset documentations, including modifications to components and content configurations. The example above shows the asset documentation for the virtual and physical cards for the Cards tab.
FINAL SCREEN DESIGN
The final screens of the Aura app were developed based on the original STACK screens with modifications including changes in colors, typography, assets, and content configuration. Additionally, certain functionalities were either added or removed to align with the specific requirements of the Aura app.
Marketing Designs for Social Media
Aura Card Carrier Design
Aura Loyalty in App Store
TAKEAWAYS
In this white label project, I gained valuable insights into the importance of flexibility and scalability when creating a white label design system, including a color label system. Working closely with the development team, I gained a deeper understanding of their implementation process and flow. This allowed me to optimize my designs for seamless implementation, ensuring that the development team could deliver the project effectively.
Overall, this experience taught me the importance of collaboration and communication between design and development teams for successful project delivery.
