BACKGROUND
In today's world, awareness of the harmful effects of the sun's ultraviolet (UV) radiation on our skin and overall health has grown significantly. With the increasing issues with melanoma (skin cancer), there's a pressing need for effective sun protection. Helios, an innovative environmental detector, aims to empower individuals to make informed decisions regarding sun exposure while offering a seamless and user-friendly experience. This case study delves into the UX/UI design process of Helios, from concept to realisation to final prototype.
MY ROLE
Sole Product Designer, leading user research, ideation and the final visual design. Contributed to product strategy, research, technical implementation and prototype.
CLIENT: University Project
DURATION: 5 months
TOOLS: Figma, Google Forms, Adobe Creative Suite
PROBLEM STATEMENT
As reported by Skin Cancer UK, 92% of people recognise sun exposure can cause health problems, however only 18% consistently implement skin protection from the sun's harmful rays. We recognised the importance of sun protection and our analysis identified a distinct need for accessible and precise environmental data related to UV radiation.
HYPOTHESIS
How can we effectively promote skin health, emphasise the importance of skin protection and foster better sun care practices?
RESULTS
In app experience that accompanies the Helios environmental detector assesses environmental risks from the user's surroundings. Solving the lack of accuracy issues with how changes in the environment can affect the skin.
PROCESS
COMPETITOR'S RESEARCH
With a specific project brief, my initial step involved researching and analysing well-established companies within the sun care industry, such as L'Oreal, Clinique, Nivea, and Estée Lauder. This analysis aimed to identify their core values and distinctive features. Additionally, I examined various sun protection apps like the SunSmart App, Sun Index, UVisio, and others. While these apps offered fundamental UV index information, they lacked personalisation and real-time environmental data. I closely monitored the emerging trend of personalisation in the beauty industry and saw the potential applications of this concept to the Helios project.
ENVIRONMENTAL DATA COLLECTION
In addition to the primary research, I engaged in interviews with environmental scientists and dermatologists. Through these discussions, we pinpointed essential data sources surrounding UV radiation, weather conditions, air quality, and the importance of personalised data for each users' skin. Subsequently, we seamlessly incorporated these sources into the Helios app system.
STAKEHOLDER INTERVIEWS
By using Google Forms, I designed a survey with the objective of gaining meaningful insights, diverse perspectives and prioritising stakeholder needs to identify gaps within the sun care industry. From the responses of 33 participants, the key insights are:
Lack of awareness: Many individuals underestimate the potential harm caused by excessive sun exposure and dangers of UV radiation.
Misconception: A common misconception is the belief that sunscreen is only necessary on sunny days.
Education: Promoting awareness about sun protection, protective clothing and regular skin examinations will significantly reduce the risks of Melanoma.
PERSONAS
We developed three personas to provide a more comprehensive understanding of the optimal users, their specific contexts and the backgrounds with the challenges they face. Given that the project revolves around a physical product and an app that are characterised by extensive personalisation, these personas serve as a valuable tool for ongoing validation and obtaining responses to questions that may arise later in the design process.
IDEATION
WIREFRAMES
Based on the insights gathered from the research, I created initial low-fidelity wireframes for both the app and the device's user interface that led to the high-fidelity wireframes. Through a series of iterative tests involving users and team members, I wanted to ensure straightforward navigation and enhanced readability. The proposed direction suggests adopting a sleek and minimal toolbar with interactive charts. When pressed, the redirection of the app would unveil a comprehensive horizontal display of all available information, improving the user experience.
REDEFINE
VISUAL DESIGN
Branding Board for Helios
As part of the design system team, I selected a vibrant and welcoming colour palette that harmonized with the sun protection theme of the app. I crafted icons and fonts that were not only visually appealing but also easy to discern, guaranteeing that the display remained legible even under the intense glare of the sun.
CONCLUSION
The Helios project showcases how a well-executed UX/UI design process can lead to successfully support of a product. By understanding the users' needs, integrating valuable environmental data, maintaining a simple and engaging design we developed a sun protection solution that addressed a pressing health issue around sun care.
Helios serves as an example of how technology can be harnessed to empower users to make informed decisions regarding their health and well-being, with a beautiful and intuitive user experience at its core.
REFLECTION
The approach at the time involved accumulating a substantial dataset and tailoring it to determine the most effective sun-protection solution for each unique user. This experience taught me the significance of empathising with the user's journey to inform the app's interface design. If I were to undertake the project again, I would place greater emphasis on streamlining the data collection process while incorporating weekly evaluations to aid in decision-making to make it easier to learn about sun-protection.
