top of page
Rectangle(1)_edited.jpg

sweatscan

Project Overview

The Product

SWEATSCAN is a platform designed to bring awareness to users about hyperhidrosis which are catered to all screen sizes; mobile app and responsive website. This app will act as an informative tool for users with or without the medical condition. It has features that will help maximize quality of life for users with the condition. Besides that, assistive technology such as a screen reader have been made compatible with the web app.

Project Duration

February 2023 to March 2023

My Role

UX designer leading the app and responsive website design from conception to delivery.

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.

The Problem

Excessive sweating or medically known as hyperhidrosis affects nearly 5% of the world’s population. However, due to lack of education in hyperhidrosis by the general population; most people have gone through their lives undiagnosed or relieved of their symptoms. Consequences of this medical condition have spurted anxiety and decline in mental health among hyperhidrosis sufferers.

The Goal

Design an informative app that will create awareness on the topic of hyperhidrosis and help existing HH sufferers manage their lifestyle with expansive features presented within the app.

To find ways to mitigate the  problem, I have undertaken the steps below to first understand my user base.

User Research

Google UX Design Certificate - Empathy Map [sweatscan]_edited.jpg

I conducted user interviews, with a range of participants from different backgrounds. Empathy maps were created post-interview and it was found that there was a particular user group that required attention.  The feedback received from this user group had indicated that their social environment lacked the knowledge about hyperhidrosis which allowed me to identify a pain point on the process of navigating life with HH. This experiences had made them suffer from social anxiety and they felt the need to be seen and make connections with other sufferers that redirected me to another user's pain point in support groups. Major pain points gained here left an opportunity for SWEATSCAN  to create an educative app that catered hyperhidrosis users as well as the general public. An easy access tool to obtain information, symptoms, treatment as well as a support group enabled SWEATSCAN to enrich their lives better.

Google UX Design Certificate - Empathy Map [sweatscan](1)_edited.jpg

Personas & Problem Statement

Persona 1 - SETH

Next, using the empathy maps created in previous session; I developed a set of personas to help me understand further the user group I would like focus on. Persona cards gave  identities and problem statements which provided me a clear description of the users' needs that should be addressed.

Problem Statement

 

Seth was a sufferer of focal hyperhidrosis who needed a platform to create awareness about hyperhidrosis because more people being aware of this condition can help during his social interactions.

yes2_edited.png

Seth's journey map in his routine daily life is presented below which helped me reduce impact of designer bias when ideating for the new product.

YEA1_edited.jpg

Persona 2 - JANINE

Problem Statement

 

Janine was a sufferer of generalized hyperhidrosis who needed a platform with therapist and support groups as she will be able to connect with people with similar medical conditions and manage her depression.

yes3.PNG

Janine's journey map in her routine daily life is presented below which helped me identify improvement opportunities when ideating for the new product .

YEA2_edited.jpg

Competitive Audit

Then, I researched and identified several direct and indirect competitors present on the market. Competitive audit exercise helped me to solve usability problems and reveal gaps and opportunities present which can be applied when ideating the SWEATSCAN responsive website and app.

SWEATSCAN 1.PNG
SWEATSCAN 2.PNG
SWEATSCAN 3.PNG

Ideation

Later, I did a quick ideation exercise using crazy eight method to come up with ideas on how to address gaps identified in the competitive audit. My focus was specifically to create fully responsive design with basic information on the homepage whilst optimizing each design for screen reader usage.

op.PNG

To start the design process, I made the decision to use the matrix structure for responsive website design and app which allowed users to follow their own path while navigating SWEATSCAN. As the platform is designed for compatibility across devices, a progressive enhancement design was used. Gestalt Principles were applied from conception to final stages of design.

Graphic Designer

1

Digital Wireframes

Prototype Designer

2

Low-fidelity Prototype

Study Group

3

Usability Studies

Digital Wireframes

Easy identifiers to read more information 

homescreen.png

After ideating and drafting some paper wireframes, I created the initial designs for the SWEATSCAN app. They were then adapted digitally in Figma for a bird's eye view. These designs focused on delivering easy navigational flow that were easy to identify and skim through. 

Large text and visuals to bring attention to this feature

sweatscan.PNG

Homescreen Wireframe

Digitized Wireframes

Low-Fidelity Prototype

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of booking an appointment and receiving confirmation.

Usability Studies

Once I was satisfied with the prototype, I conducted an unmoderated usability study to assess how easy it was for participants to navigate through the app. To ensure a seamless output from the study, I had prepared research questions that reduced implicit bias and experience bias and included open ended questions.

Study Type

Unmoderated usability study

Location

Malaysia, remote

Participants

5 participants

Length

5-10 minutes

Parameters Set

Findings

tracker.PNG

Sweat Tracking & Support Groups

Users were keen on keeping the feature

1.PNG

Intuitive Labels

Users wanted intuitive labels when navigating the user flow

2.PNG

Booking Appointment

Users wanted more negative spaces and larger icons

With the basic prototype in place, I started refining the design process. Using the insights gathered from usability study, I created mockups that reflected the brand identity by incorporating various aspects of the design system.

Mobile Mockup

1

Mockups

Mobile Phone

2

High-fidelity Prototype

Wheelchair Icon

3

Accessibility

Mockups

Typography.png

Based on the insights from the usability studies, I applied design changes by implementing intuitive labels for an intuitive navigational flow. 

Additional design changes included allowing more negative spaces surrounding texts and larger icons usage. 

Mobile Mockups

homescreen(1).png

Heading towards the final stages of the design process, I had to ideate on the visual branding of my design. To start, I looked at various typography options available, and finally set my eyes on Inter which gave a prominent look that will drive your attention to the page and Imprima  for sub-headings for a more soft and  subtle look.

 

Next, I wanted a color grading that reflected sweat and naturally water was always presented as blue. Hence, Hex Code 0000FF  was chosen whereas Hex Code 000000 accompanied it to allow visual balance. A 60-30-10 rule were applied in the overall  colour palette, where Hex Code 0000FF  was the neutral color and Hex Code FFFFFF  as the second complimentary color whilst Hex Code 000000  was the third accent to allow emphasis and contrast.

Last but not least, I decided to incorporate delicate but strong symbols and images associated with the main theme of SWEATSCAN. Images such as water droplets and bubbles were recurring iconography  that can be seen throughout the mockups.

All the typography, iconography and color schemes were compiled together and presented in the design systems.

Colors.png
Icons.png

After usability studies

After usability studies

book appointment.png
support group.png
time selection doctor.png
time selection doctor.png

Before usability studies

Before usability studies

1.PNG
homescreen(1).png

High-Fidelity Prototype

Subsequently, the final stage of the design process involved including navigation and  interaction features. Based on the usability study, I understood that simple and clean navigation was essential especially for users with disability. Therefore, I  chose a Z-shape layout that would be best for assistive technology which will allow users to skim information from left to right, then move diagonally to the left; before being able to scan to the right again.

Regular gestures and motions were used to create a simplistic aesthetic throughout the app.

Accessibility

Lastly, the final touches involved emphasis on positive inclusion of the product design for people with cognitive and physical disabilities.

 

During the ideation phase this product, I knew that I wanted to incorporate a design that  included the disabled community. Keeping that in mind, I shifted my focus on users of assistive technology; where the best approach could be used to incorporate them in my designs.

dd.PNG

01

Clear labels for interactive elements that can be read by screen readers.

02

Initial focus of the home screen where short informative labels helped define the primary task or action for the user.

03

WebAIM contrast checker had been utilised to ensure color and contrast scheme selected were catered to large demographic with various vision types.

A responsive web app that will be adaptable across devices such as mobile phone, tablet and desktop websites were considered as early as in the wireframing stages. A progressive enhancement method was used as I started designing a dedicated mobile app first, and the transition towards planning for bigger frames was more ideal.

Industrial Structure

1

Information

Architecture

Web Design

2

Responsive

Design

Information Architecture

With the main app designs completed, I started work on designing the responsive website. The SWEATSCAN  sitemap was created to provide a bird’s eye view of the organizational structure of each screen’s design to enable a cohesive and consistent experience across devices.

Google UX Design Certificate - Sitemap - SWEATSCAN.png

Responsive Design

Mobile website prototype

homescreen(2).png

Tablet app prototype

homescreen(3).png

The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.

Desktop website prototype

homescreen(4).png

The entire designing process had allowed me to focus my attention to details that were both visible to the naked eye as well as minor details that were normally been overlooked upon.

Paper bag

1

Takeaways

Pink Stairway

2

Next Steps

Takeaways

Impact

Users shared that the app was a reliable source of information, allowing users to use it in social situations or at home. The engaging content as well as the support group feature had positive feedback amongst users with the condition. 

What I Learnt

I learnt that hyperhidrosis education was an opportunity to explore, and finding ways to create exposure to those who need it; gave satisfaction and hope for a community to be seen.

Conduct research on how successful the app is in reaching the goal to bring awareness about hyperhidrosis

Add more educational resources for users to learn about hyperhidrosis

Create a podcast to reach a wide demographic

bottom of page