Skip to content
Tomás' UX Portfolio
UX Portfolio

icon picker
B2B Data Compliance Platform from Scratch

User Journeys, Information Architecture, Usability Testing, Design System, Web Responsive, Native Mobile | Lead UX/UI Designer for BCompliance | 2021

1. Context

App Type: Web Responsive and Native Mobile (React Native)
Role: Senior Lead UX/UI Designer working directly with the C-level
Company Objective: As the new Brazilian Data Privacy Law (LGPD) comes into effect, BCompliance is dedicated to assisting small to mid-sized businesses in building a communication platform for consumers and businesses to ensure LGPD compliance.

2. UX Challenge

Screenshot 2024-01-19 at 11.20.51.png
Design, validate with users and launch the communication platform from scratch with user-centered design.

3. UX process

Service Blueprint

Blueprint mapping was used to get a hold of the essential interactions between parties, in order to structure the first goals of each persona.
Screen Shot 2020-08-12 at 09.23 1.png

Competitor Analysis Research

I conducted research in order to understand how the personas already solved compliance matters with the existing tools and with that mapped some of the gaps on the market with the qualitative insights.
Screenshot 2024-01-19 at 12.01.17.png

UX Personas, User Stories and User Journeys

Leveraging comprehensive research insights and a nuanced understanding of the positive and challenging days each user persona might encounter, we strategically designed the main interactions between partners. Through the meticulous process of crafting user stories, we translated these insights into actionable design elements, ensuring that our solutions align seamlessly with the diverse needs and experiences of our target audience. By intertwining UX Persona building and user story creation, our approach remains user-centric, fostering an effective and empathetic design outcome.
Screenshot 2024-01-19 at 12.05.19.png

Information Architecture

With all the journeys mapped out, we proceeded to consider each unique platform view for every user, employing the sorting cards technique in collaboration with stakeholders. This method facilitated the exploration of optimal structures for the system's mind map, ensuring a comprehensive and well-organized approach.
Screenshot 2024-01-19 at 12.06.55.png

Wireframing

The system was designed mobile-first, since it fit the quick task oriented interface, and because of it’s size, that offers more constraints, which then would be more easily rippled into other sizes. I designed it for:
• Communication Platform Native mobile, Responsive Web
• Client Platform Responsive Web
• Backoffice Responsive Web
Screenshot 2024-01-19 at 12.09.44.png

Usability testing

Usability testing was done using (now Lyssna) was applied on different group of users to confirm and iterate the flows based on the success rates on the tasks.
Screenshot 2024-01-19 at 12.11.46.png

Design System

Once the flows were at the best state we could get, I defined Material based Design System with the frontend developers and applied to the defined UX in lo-fi wireframes form.
Screenshot 2024-01-19 at 12.12.26.png

User Interface

The interface approach followed a modular way of disposing content in columns, so it would be always easy to navigate on different areas.
Frame 2507.png
Screenshot 2024-01-19 at 12.13.44.png
MacBook - 119.png
Documentos _ Visualizar 1.png
Screenshot 2024-01-19 at 12.14.24.png
Screenshot 2024-01-19 at 12.15.06.png

go

Product Outcomes (KPIs)

Time to Pixel-Ready Status: Achieved pixel-ready UX and UI for developers in just 3 months, meeting the project timeline and ensuring a smooth transition to the development phase.
Competitive Edge Metrics: User engagement metrics increased by 25% post-launch, attributed to enhanced UX studies and a deeper understanding of user needs.
Investor Feedback Score: During pitch sessions, investor feedback on design and user interface received an average score of 4.5 out of 5, highlighting the impact of a well-defined design system.
Competitor Analysis Impact: The identification of gaps through competitor analysis positioned the platform as a more comprehensive solution, leading to a 25% increase in user adoption rates, as users recognized the added value.

Thanks!


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.