Projects










Project Info




Revela


Duration: 12 weeks 
Role: UX/UI Design, Design System
Tools: Figma
Location: Toronto, Canada 



Introduction




Revela is a B2B and B2C startup that offers AI-powered skin assessment software. It helps skincare businesses analyze customer skin and provide personalized product recommendations, addressing the unique needs of different skin tones for a more effective and tailored skincare experience.

My role was to design a comprehensive design system from scratch, including designing user flows, wireframes and final screens for their new website, in collaboration with another designer and a developer lead.













Problem Space







GoalOur challenge was to design a scalable system and website that ensured consistent branding and was easy to use. We focused on creating an inclusive platform to help skincare businesses offer personalized solutions, especially for diverse skin tones, by making complex AI insights simple and accessible.


As part of Phase 1, we focused on building the foundational elements, including the design system, website wireframes, and high-fidelity designs.

Our goal was to create a seamless & intuitive platform that addressed both business & customer needs, ensuring an accessible, personalized experience while maintaining efficiency in the design process.












Design Process







Research & Discovery







In the initial phase, we focused on understanding the brand’s identity and setting the right tone for the product. This started with selecting branding colours and creating a mood board that reflected the company's values and vision. We also conducted a competitive analysis to identify opportunities and gaps in the market, ensuring Revela’s design stood out in both the B2B and B2C space.





Moodboard








Design System  Development







With the brand's identity in mind, we began building a scalable and cohesive design system. The goal was to create a system that was easy to update, ensuring consistency across the platform while accommodating future growth.

  • Collaboration & Iteration: Worked closely with the team to iterate and refine components of the design system. Given the fast-paced nature of the project, it was crucial to keep the system flexible, lightweight, and easy to update as new needs arose.

  • Consistency & Scalability: Focused on creating a system that could be easily expanded as the platform grew, enabling seamless updates and adjustments.







Colours
Icons
Typography
Grids & Layout 
Accordian for FAQs
Buttons
Button States
Text Input States
Carousel
Text Input Size







Information Architecture & Wireframing







While the design system was being finalized, the team focused on structuring the website’s information architecture. 

  • Information Architecture: Collaborated with the team to organize and structure content in a way that made sense for both businesses and consumers, ensuring smooth user flows.

  • Wireframes: Multiple iterations were done to refine the layout and functionality before finalizing the designs.


  



 
Information Architecture







Wireframes









High-Fidelity Designs







With the wireframes approved, we moved into high-fidelity designs. The challenge here was to integrate the branding colours and finalize the visual design of the website, ensuring it was both visually appealing and user-friendly. 

Phase 1 laid the groundwork for a cohesive and scalable design system, setting the stage for future developments.
















Key Learnings  



Collaboration with the developers: It not only improved the end product but also enhanced my ability to communicate and problem-solve across disciplines.

Building a Design System: This experience helped me understand the importance of consistency in design and how a well-structured system can streamline workflows, improve team alignment, and save time in future iterations.










                  Contact                                                                                                                                                                                                                                                      

© TrimanGrewal