top of page

Improving UX | UI of
DurotimiAI. A SaaS for

early cancer prediction.

I enhanced DurotimiAI by analyzing the user experience

with UX audits, benchmarks, and user tests leading to prototype/ redesigning the interface for better usability.

Role

UX UI Designer

Tools
Figma / FigJam
Slack / Maze /
Miro
Microsoft Azure / Teams/ Whiteboard

Case summary

User problem

Understand the product

Outcomes

Predict cancer in an intuitive SaaS without increasing the workflow. As well as prevent or recover from errors while filling forms to add combinations of signs, symptoms and risk factors to predict the probability of cancer. Enhance the user experience by filling forms, flow and interactions.

I met with stakeholders to gather insights on the business process and did secondary research on the audience: experienced and novice General Practitioners. Our team examined the primary product process blueprint to identify issues and develop solutions through a new design.

Reduce mental effort and prevent error while adding combinations of signs, symptoms and risk factors to predict the probability of cancer. Enhance the user experience by filling forms, navigation and interactions.  

User Centric Redesign

jeremy-alford-O13B7suRG4A-unsplash_edited.jpg

General practitioners (GPs):
experienced one

rian-ramirez-rm7rZYdl3rY-unsplash-2_edited.jpg

General practitioners (GPs):
novice one
 

Personas

Panoramic of the project

hand with heart yellow icon
Empathize

User research

Competitive analysis

Search user yellow icon
Define

Personas

Pain points and opportunities

head-lightbulb icon
Ideate

Crazy eights

Information Architecture

Tree- test

Wireframe

gesture-double-tap yellow icon

Prototype

Low-fidelity prototype

High-fidelity prototype

screen with star icon

Validate

Usability test

Iterations

people on the beach illustrated by Kaue Oliveira

Benchmarket

The research of Patient Record Systems and AI-powered cancer prediction SaaS to identify best practices, evaluate user experience, and improve the design.

UX audit

To assess how well the interface was adhering to the 10 usability principles, such as visibility of system status, match between system and the real world, and error prevention. To identify issues related to these principles and provide recommendations for improvement.

illustration just with lines with two women stand up with the feet underwater

User Journey maps

Creating these user journey maps helped visualize the steps and interactions a user goes through using the DurotimiAi. These tasks maps provided insights into the user's experience, identifying pain points and opportunities to guide the design process to improve the overall how the GPs experience the SaaS. 

Customer Journey Map 1.jpg
User Journey Map.png

Opportunities

01.

Design consistency and brand identity

02.

Check the taxonomy and predictors 

03.

Specify each prediction details

04.

Reduce mental effort filling forms

05.

Rearrange navigation flow

Exploratory test

We performed a usability test with three users to identify medical copywriting issues, as well as interaction issues and validate hypotheses, improving accuracy and reliability.

illustration just with lines with two women stand up with the feet underwater

Issues uncovered by the usability study

A moderated study to test the main tasks: inform an animal sighting and check the general report. The research was done with 7 users between 13 years till 60 years old with the web app Maze.

affinity diagram-3

1

Users were doing the wrong path. Misusage generated by confusing labels: contact and inform.

 

2

The excessive floating button on home/ map was leading to misclicks.

3

Some confusion related to check the report and notifications

icon human and internet signal yellow colour
Lack of scales

Lack of measurement units for alcohol and tobacco scales

icon chart-donut
Not tech

Simple interface and clear step by step with visual appeal and option to use the microphone and speaker to complete the step by step.

icon global earth minimalist
 Information

The rescue team need accurate  information about the location and animal situation. Try to do a step by step simple but detailed.

icon monitor-dashboard
Gather data

A user dashboard that they can see the statistics of the rescues and app usage without identify the user by name.

Competitive analysis

Image by Harpal Singh icons
Design

Minimalist interfaces  (colour, shape, size, etc) with clues about how it may function. 

Image by Microsoft 365: girl lying on bed with a tablet
Goal

Step-by-step decreases mental effort. Each page with limited options removes complexity increasing 

straightforwardness.

The complete competitive analysis is... Read more

Ideation

Information architecture for the Eu vi app
Tree - test results
The term “contact” was misleading the user
report flow.

Solution: change the section contact to social icons.

After defining users and analyzing related webs,
It was time to create elements, flows, interactions
and relations between pages.

Methods applied here were crazy eights, Information architecture, 

tree-test and Wireframes

"Crazy eight" and "how might we" ideation methods for mobile and desktop

ideation process paper wireframe q
ideation process mobile paper wireframe
cellphone icon

Minimalist interface with no more than 4 actions each time.

traffic-light icon

Use semaphore colours to identify if the animal is dead, harmed or alive.​

pencil-plus icon

Option to add manually local reference as ex. near to the main square.

microphone-settings icon

Accessible text size with image support, microphone inputs available to fill answers and screen reader compatibility.

Prototype

Low-fidelity prototype

wireframe home screen eu vi
wireframe screen map app Eu ví
wireframe screen what is the animal of app Eu ví
wireframe screen how the animal is? from the app Eu ví
wireframe take a photo screen from the app Eu ví
wireframe desktop home screen from the app Eu ví
specific animal wireframe desktop eu vi
details wireframe desktop app Eu ví
eu vi wireframe desktop manatee
wireframe desktop what is the animal webpage Euvi
wireframe-desktop webpage Eu ví image detail

Validate | Usability test


High-fidelity prototype

a phone with the permission page of eu vi app
a mobile screen from euvi app showing a animals sight report
Home Screen from eu vi app showing a map
 a screen from eu vi app asking if the a manatee is live, harmed or dead.
 a screen from eu vi app with a confirmation pop-up
 a screen from eu vi app asking about more details
 a screen from eu vi app prototype showing option to user choose
 a final screen from eu vi app prototype giving thank you for the user
 a home  screen from eu vi app desktop prototype showing a turtle
 a screen from eu vi app desktop prototype asking details
 a screen from eu vi app desktop prototype  asking about what is the animal?
 a screen from eu vi app desktop prototype  asking how is the animal
 a screen from eu vi app desktop prototype asking how many animals are and the place
 a screen from eu vi app desktop prototype giving the thank you final message

Try out the prototype

I have improved the product to the final version based on test results and user feedback.

the home screen eu vi app that show endangered animal as a pin on the map as well as the button to notify
Screen from eu vi app that ask what is the animal it has different animals photos as well as turtle, manatee and 7 others

Next steps

1

Add tips on how to deal with endangered animals.

2

Inform about the weather on the home screen.

3

Gamification: given

rewards to users

bottom of page