Embedded Files
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
Understand
Specify
Design
Evaluate
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
Identify the root cause of poor UX/UI and adoption rates
Balance aesthetics and functionality in the redesign
Convince stakeholders to allocate resources and time
Ensure the new design aligns with the organization's goals and mission
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
Conduct user research to identify pain points, needs, and preferences of the target users
Create and organize user feedback using tools like affinity diagrams
Design and implement UX/UI improvements to increase adoption rates and improve user satisfaction
Conduct A/B testing and data analysis to validate design decisions and identify areas for improvement
Collaborate with stakeholders, developers, and project manager to ensure design implementation and maintain design consistency throughout the app
Utilize the user-centered design framework to create a more usable and user-friendly product that solves real human needs
My Accomplishments
Conducted user research and A/B testing to identify pain points and recommend solutions for the redesign project.
Streamlined the design process and improved team efficiency by creating complex components using Figma.
Successfully advocated for resolving UX issues with stakeholders.
OTHER PROJECTS
Google Sites
Report abuse