Tomás' UX Portfolio

UX Portfolio

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

⁠

⁠

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.

⁠

⁠

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.

⁠

⁠

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.

⁠

⁠

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.

⁠

⁠

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

⁠

⁠

Usability testing

Usability testing was done using

usabilityhub.com⁠

(now Lyssna) was applied on different group of users to confirm and iterate the flows based on the success rates on the tasks.

⁠

⁠

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.

⁠

⁠

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.

⁠

⁠

⁠

⁠

⁠

⁠

⁠

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.