Skip to content
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

5. Product Outcomes

In just 3 months, the UX and UI was pixel-ready for developers to code.
In 6 months we had our first version out in production, with an competitive edge coming from the deepening of the UX studies, understanding of user needs and a commitment to delivering a high-quality product.
Positive Market Perception coming from investors at pitch sessions that mentioned "A well-defined design system and a cohesive user interface contribute to a visually appealing and consistent product, potentially fostering a positive market perception", and that ultimately led BCompliance to its first series of investment.
Users feedback highlighted the efficient workflows, that come from optimization of information architecture and sorting card techniques for different platform views likely streamlined workflows for various user types. The identification and addressing of gaps in existing tools through competitor analysis could also positioned the platform as a more comprehensive and effective solution.

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.