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.

⁠

⁠

⁠

⁠

⁠

⁠

⁠

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.