Flush
Redesign of a mobile app to enhance usability, visual consistency, and discoverability.
Flush
Redesign of a mobile app to enhance usability, visual consistency, and discoverability.
Flush
Redesign of a mobile app to enhance usability, visual consistency, and discoverability.
Flush
Redesign of a mobile app to enhance usability, visual consistency, and discoverability.
MY ROLE
UX designer, UI designer
TOOLS
PROJECT TYPE
University project | Cognitive Ergonomics
YEAR
2024
MY ROLE
UX designer, UI designer
TOOLS
PROJECT TYPE
University project | Cognitive Ergonomics
YEAR
2024
MY ROLE
UX designer, UI designer
TOOLS
PROJECT TYPE
University project | Cognitive Ergonomics
YEAR
2024
MY ROLE
UX designer, UI designer
TOOLS
PROJECT TYPE
University project | Cognitive Ergonomics
YEAR
2024
Problem
Flush is an app that allows you to find public bathrooms. However, some usability issues might impair its use.
To name a few: visual branding inconsistency between different operating systems, missing or non-functioning search bar, and some functions are lacking visibility and discoverability.
Solution
Redesign of the application to make the visual consistent, implement some missing functions and fix usability issues.
The redesigned app allows users to discover and filter bathroom features more easily. Moreover, Norman's principles and Nielsen's usability heuristics are taken into account: the app provides feedback, more visibility, some signifiers and both internal and external consistency.
Problem
Flush is an app that allows you to find public bathrooms. However, some usability issues might impair its use.
To name a few: visual branding inconsistency between different operating systems, missing or non-functioning search bar, and some functions are lacking visibility and discoverability.
Solution
Redesign of the application to make the visual consistent, implement some missing functions and fix usability issues.
The redesigned app allows users to discover and filter bathroom features more easily. Moreover, Norman's principles and Nielsen's usability heuristics are taken into account: the app provides feedback, more visibility, some signifiers and both internal and external consistency.
Problem
Flush is an app that allows you to find public bathrooms. However, some usability issues might impair its use.
To name a few: visual branding inconsistency between different operating systems, missing or non-functioning search bar, and some functions are lacking visibility and discoverability.
Solution
Redesign of the application to make the visual consistent, implement some missing functions and fix usability issues.
The redesigned app allows users to discover and filter bathroom features more easily. Moreover, Norman's principles and Nielsen's usability heuristics are taken into account: the app provides feedback, more visibility, some signifiers and both internal and external consistency.
#
1
|
Evaluation of the existing app
Users don't understand the current app
The think-aloud conducted on Flush showed that the 5 users encountered the same problems in the application: poor visibility of some features, the search bar not working properly (or not present, on Android), and the lack of comprehensibility of icons and features of bathrooms.
#
1
|
Evaluation of the existing app
Users don't understand the current app
The think-aloud conducted on Flush showed that the 5 users encountered the same problems in the application: poor visibility of some features, the search bar not working properly (or not present, on Android), and the lack of comprehensibility of icons and features of bathrooms.
#
1
|
Evaluation of the existing app
Users don't understand the current app
The think-aloud conducted on Flush showed that the 5 users encountered the same problems in the application: poor visibility of some features, the search bar not working properly (or not present, on Android), and the lack of comprehensibility of icons and features of bathrooms.
#
2
|
User research
Which bathroom are people looking for?
To begin with the redesign, insights from 32 users regarding public toilets were gathered using a questionnaire.
Generally speaking, people don't want to spend money for public tolets and prefer toilets over any other type of sanitary. Besides, some women prefer separate bathrooms to mixed one for safety reasons.
#
2
|
User research
Which bathroom are people looking for?
To begin with the redesign, insights from 32 users regarding public toilets were gathered using a questionnaire.
Generally speaking, people don't want to spend money for public tolets and prefer toilets over any other type of sanitary. Besides, some women prefer separate bathrooms to mixed one for safety reasons.
#
2
|
User research
Which bathroom are people looking for?
To begin with the redesign, insights from 32 users regarding public toilets were gathered using a questionnaire.
Generally speaking, people don't want to spend money for public tolets and prefer toilets over any other type of sanitary. Besides, some women prefer separate bathrooms to mixed one for safety reasons.
1 euro
The maximum price many people are willing to pay for a public bathroom
Safety
Some women prefer separate baths to mixed ones (for safety reasons)
Sanitary
Almost everyone prefers the toilet to other types of sanitary
#
3
|
Designing alternatives
The most crucial thing is to highlight key information
After a brainstorming, we decided to highlight the info users are looking for.
For instance, info regarding accessibility, cost, gender division, and the type of sanitary facilities were made more readily available for users.
#
3
|
Designing alternatives
The most crucial thing is to highlight key information
After a brainstorming, we decided to highlight the info users are looking for.
For instance, info regarding accessibility, cost, gender division, and the type of sanitary facilities were made more readily available for users.
#
3
|
Designing alternatives
The most crucial thing is to highlight key information
After a brainstorming, we decided to highlight the info users are looking for.
For instance, info regarding accessibility, cost, gender division, and the type of sanitary facilities were made more readily available for users.
#
4
|
Prototyping
A consistent prototype requires a design system
The prototyping of the redesigned app was preceded by the creation of a design system.
The icons were taken from Google’s set of Material Symbols, so that they would be recognizable.
The colors followed the visual identity of the Flush logo, namely black and white.
Finally, the creation of components has made the design process faster and more flexible.
#
4
|
Prototyping
A consistent prototype requires a design system
The prototyping of the redesigned app was preceded by the creation of a design system.
The icons were taken from Google’s set of Material Symbols, so that they would be recognizable.
The colors followed the visual identity of the Flush logo, namely black and white.
Finally, the creation of components has made the design process faster and more flexible.
#
4
|
Prototyping
A consistent prototype requires a design system
The prototyping of the redesigned app was preceded by the creation of a design system.
The icons were taken from Google’s set of Material Symbols, so that they would be recognizable.
The colors followed the visual identity of the Flush logo, namely black and white.
Finally, the creation of components has made the design process faster and more flexible.
#
5
|
Evaluation of the new design
Breaking news! Users appreciate info clarity
The 6 think-aloud, conducted with both young and adult participants to evaluate the prototype, showed that the participants use the search bar extensively and appreciate the fact that the features of each bathroom are well explained.
However, the results of the think-aloud protocol vary according to age. Some adults struggle with icons, too-small texts, feedbacks not lasting enough.
#
5
|
Evaluation of the new design
Breaking news! Users appreciate info clarity
The 6 think-aloud, conducted with both young and adult participants to evaluate the prototype, showed that the participants use the search bar extensively and appreciate the fact that the features of each bathroom are well explained.
However, the results of the think-aloud protocol vary according to age. Some adults struggle with icons, too-small texts, feedbacks not lasting enough.
#
5
|
Evaluation of the new design
Breaking news! Users appreciate info clarity
The 6 think-aloud, conducted with both young and adult participants to evaluate the prototype, showed that the participants use the search bar extensively and appreciate the fact that the features of each bathroom are well explained.
However, the results of the think-aloud protocol vary according to age. Some adults struggle with icons, too-small texts, feedbacks not lasting enough.
#
6
|
Redesign
Design update
The university project ends here, but I decided to improve the prototype based on the results of the think-aloud protocol.
The main changes consist of: adding verbal cues to icons, increasing the text size, using more visual hierarchy, and making the UI more uniform and modern.
#
6
|
Redesign
Design update
The university project ends here, but I decided to improve the prototype based on the results of the think-aloud protocol.
The main changes consist of: adding verbal cues to icons, increasing the text size, using more visual hierarchy, and making the UI more uniform and modern.
#
6
|
Redesign
Design update
The university project ends here, but I decided to improve the prototype based on the results of the think-aloud protocol.
The main changes consist of: adding verbal cues to icons, increasing the text size, using more visual hierarchy, and making the UI more uniform and modern.
#
7
|
Redesign
Integrating design principles
In this final redesign, many more actions are accompanied by feedback and more areas now have a clearer affordance.
Primary functions, such as getting directions to the bathroom, now have increased visibility.
The design features both internal and external consistency, through the adoption of coherent visuals and the use of Material Symbols' icons.
#
7
|
Redesign
Integrating design principles
In this final redesign, many more actions are accompanied by feedback and more areas now have a clearer affordance.
Primary functions, such as getting directions to the bathroom, now have increased visibility.
The design features both internal and external consistency, through the adoption of coherent visuals and the use of Material Symbols' icons.
#
7
|
Redesign
Integrating design principles
In this final redesign, many more actions are accompanied by feedback and more areas now have a clearer affordance.
Primary functions, such as getting directions to the bathroom, now have increased visibility.
The design features both internal and external consistency, through the adoption of coherent visuals and the use of Material Symbols' icons.
Try the prototype
Enough talking, now it's up to your exploration!
Try the prototype
Try the prototype
Try the prototype
Enough talking, now it's up to your exploration!
Try the prototype
Try the prototype
Try the prototype
Enough talking, now it's up to your exploration!
Try the prototype
Try the prototype
Try the prototype
Other projects you might be interested in
Other projects you might be interested in
Other projects you might be interested in
Other projects you might be interested in
Framer template designed by Goran Babarogic, customized by me
Framer template designed by Goran Babarogic, customized by me