Lifebrand Cover Image
Project timeframe:
Mar 2021 - Jan 2022
My role:
Product Designer
Team composition & credits:
Head of Design Veronika Madzinova
Tech Lead Uğur Oruç
Lead Product Manager James Fiala
Scrum Master Alastair Doman
Product Manager Thomas Gagne-Hall
Product Designers Anton Bukalo, David Hladik, Olga Osinceva
Software Engineers Alba Conde, Andrey Nadosha, Jan Urban, Julia Bazenko, Kristyna Doupalova, Ruslan Purii
QA Engineer Artem Oliynyk
Deliverables:
B2C Platform
B2B Platform
Design System

The product

01

LifeBrand is a social media reputation management tool. Their know-how is an AI technology that performs social media background checks.

When I joined the project, the main task for our team was to rebuild the logic of the AI entirely and then redo the platform from the start based on the new backend. Additionally, the stakeholder decided to change the direction of the B2C product and target it more towards a younger audience - recent high school and university graduates; therefore, some further visual adjustments were needed.

02

LifeBrand had already built three products - a B2C platform, a B2B platform, and a white label version. It was a great MVP at a time, but when the company started scaling, the backend of the scanner did not allow the functionality to grow. The next thing after text scanning was adding images and video analysis.
Lifebrand B2C PlatformLifebrand B2C MobileLifebrand B2B Platform

03

About the designs: the priority was keeping the platform clean; all the scanned posts with images were a loud visual element on their own. We added fun illustrations to make the product friendlier and wrote copy to sound informal yet informative. We built the platform responsive for mobile and tablet users, predicting that it might be the preferred way of usage.

04

Another important aspect is making the user feel secure using the platform. The nature of Lifebrand is sensitive, and it was essential to build the product entirely compliant and reassure the user that it is very protective of their data.
You can test out Lifebrand scanner at lifebrand.life.
Lifebrand Design System

05

While our backend team was focusing on the new scanner logic, I was working on building a design system - basing the library on the old MVP components, adjusting when needed, and adding structure to the whole Figma-Lifebrand ecosystem. I made a functional system that made it easy to build new flows and allow for scaling in the future (i.e., dark mode that was added after I left the project). Another highlight of this library - the engineering team built it custom in Storybook; I assisted with the logic and requirements. It's set there now and is easy to reuse for designers and the entire dev team.

The process

Lifebrand Brainstorming

06

When it came to rebuilding the whole product, after the initial backend draft was set, it was time for brainstorming, whiteboarding, and scoping sessions with product managers, engineers, and stakeholders. We started with a long-in-the-future vision of the features. There were a lot of unknowns in the equation. We needed to prioritize only a certain number of features for the initial release and think of all the edge cases that can occur while scanning.
Lifebrand User FlowsLifebrand High Fidelity Wireframes

07

I was in close touch with the engineers to better understand their idea. Further, I presented several versions of low and high-fidelity wireframes. We decided what flows add up to the logic and which structure makes sense for the social media scanning. I promptly tested the wireframes with quantitative testing, and then based on the confirmed concept, engineers proceeded to build functionality.

08

For the B2B product, we restructured the flows similarly based on the new scanner logic. I based the platform on the same design system. Finding a balance in what to display about the employee for their employer was challenging. As a result, the B2B platform is mostly focused on displaying average and median data about their employees.
Lifebrand Final Designs Structure

Next project: Reframe Care

View next project