An existing mobile app from Monotonous to Nifty 

BLACKPOINT
This story isn't just about following trends or making the app "beautiful." I thoroughly examined every detail to ensure it's perfect for development and client use. The key takeaway underscores the importance of user feedback and iterative design for a successful user experience. 

My way is Fluid and Free!

It’s so simple, User-centered, addressing real human needs. 

My Role

Collaborated with Mobile Tech Lead, redesigned Blackpoint, road damages reporting app. 

My Goal

Provide a user friendly interface and experience, aligned with stakeholders’ requirements. 

My Way

BLACKPOINT

The BLACKPOINT app had low adoption rates due to poor UX/UI, so I redesigned the user experience and interface using Figma. The new design is efficient and visually appealing, making it easier for users to report damaged roads. 

Project Timeline

The Problem

BLACKPOINT's poor UX/UI reduced task completion rates, frustrated users, and hindered effective road damage reporting. 

The Solution

Redesign BLACKPOINT's UX/UI to increase task completion rate and satisfaction by conducting research, identifying pain points, and implementing user-centered solutions to improve the user experience. 

Key Challenges

Affinity Diagram 

I used an affinity diagram to categorize user feedback into User Experience, User Interface, and Functionality, enabling targeted solutions that improved the design process. 

Meet MARIA

Maria, a CEO striving to improve the city's roads with a better app user experience.

Yellow lines on dark blue asphalt aid drivers in identifying their path by providing contrast and allowing them to see the extension of the lines. 

Wireframes

Before and After

I significantly enhanced the accessibility and visual appeal of all app pages in the redesign, which is detailed in the following section and can be viewed on the prototype.

HOME PAGE Improvements

1- Segnala CTA lacked visibility in the top-left corner

2- Search function needs full-width design for accessibility

3- Flag's info icon caused user confusion

4- Insufficient contrast in navigation buttons caused accessibility issues

1- CTA now visible with yellow button among main buttons

2- Search function easily accessible with full-width design and clear placeholder

3- Flag simplified to eliminate user confusion

4- Navigation buttons' contrast increased by highlighting selected button in yellow

CTA Improvements

1- Segnala CTA remaining visible caused confusion

2- Annulla and Conferma buttons are unclear, lacked accessibility

1- Segnala CTA disappears, avoiding confusio

2- Users see accessible, visible green and red buttons after Segnala CTA press

INFO PAGE Improvements

1- Low legibility due to high line heights and small font size

2- Disclaimer button poorly positioned with inconsistent font size

3- Selected tab not clearly visible

1- Using standard line height and bigger font size improved legibility and accessibility

2- Disclaimer added to the tab bar for better visibility and accessibility

3- Selected tab highlighted in yellow for improved visibility and navigation

GALLERY PAGE Improvements

1- Font size lacked hierarchy, causing readability issues and poor visual hierarchy

2- Gallery page UI was dull and unengaging, needing more visual interest

3- Inability to filter reports or search items limited page convenience and utility

1- Font size hierarchy has been added, improving readability and visual appeal

2- Minimal design elements added, enhancing attractiveness and visual interest

3- Users can filter reports now, making it easier to find specific items

4- Users can search for specific reports, improving convenience

CONTACTS PAGE Improvements

1- Contact information page UI lacked visual interest

2- Clickable contacts sections lacked clear visual indication, causing user confusion

1- UI updated with color and simple icons for improved appeal and engagement

2- Clear clickable icons and contact sections improve usability and ease-of-use

REPORT DAMAGE PROCESS

Upload Photo

Select Type

Select Road

Reporter Details*

* The stakeholders initially wanted a gender field in the user info section, but I convinced them to remove it as it was not relevant to reporting road damage.

A/B Testing

Reporting Feature

A/B testing determined that version B of the reporting feature, with smaller buttons and no text, had fewer user errors, leading to its recommendation for implementation in the UX/UI redesign of BLACKPOINT.

Hypothesis 

Tested if bigger confirm/cancel buttons with both icon and text (Version A) would decrease user error on the BLACKPOINT app's home page.

Variables 

Tested two versions of the confirm/cancel buttons (A and B). 

Test Design 

Randomly assigned users to Version A or Version B for two weeks

Metrics 

Primary metric: errors while using the map feature

The Results

Recommended Version B for BLACKPOINT redesign based on lower user errors, despite assumptions about button size and user focus due to unmoderated A/B testing and previous research.

Version A

10% user error

Version B

6% user error

High Fidelity Prototype

The app flow starts with the splash screen and ends with user-friendly reporting of road damages through photos and descriptions.

Takeaway

During the redesign project, I acquired expertise in user research, data analysis, and implementing effective solutions to enhance the user experience. These skills enabled me to create a more visually appealing and user-friendly design that caters to the specific needs of users.

My Responsibilities

My Accomplishments

OTHER PROJECTS