Sofie

After quickly reviewing the flows and wireframes made by the client I saw room for improvement. To achieve the outlined goal I've proposed to follow the guidelines of the "Design Thinking" process. This methodology defines the following project phases: Empathize, Define, Ideate, Prototype and Test. When I started working on this project the client already finished Emphasize and Define stages.

I began with a competitor analysis and created personas to clarify user needs. The client wanted to shape the product flows using the Jobs To Be Done framework – a methodology I hadn’t worked with before, but quickly learned and adapted into my design process. The insight was clear: users wanted reliability and simplicity in choosing the right foundation online. This informed the product’s focus on accuracy, price transparency, and personalised guidance.

I redesigned the client’s wireframes, refined the hierarchy and spacing, and created high-fidelity mockups and an interactive prototype in Adobe XD. This first prototype helped the founders present the concept and align around a clearer user journey. Evaluators tested it internally, and the client decided to move forward with development.
‍

Feedback confirmed that users were eager to try a simplified skin-matching process, but also revealed opportunities to improve search behaviour, onboarding, and the mental model behind how the algorithm worked.

‍

Rebuilding for Scalability – Transition to React

While Bubble was great for prototyping, it became difficult to manage more complex logic and scale the platform for future phases. We decided to rebuild Sofie in React to gain flexibility, faster performance, and control over the product’s growing features.

A new development team joined, and to bring them up to speed I created a comprehensive project Wiki in Atlassian. It documented every detail – interaction logic, search flows, responsiveness, component specs, and style guides – effectively serving as the product’s design source of truth.
This documentation saved weeks of onboarding and became the foundation for smooth QA and iteration cycles.
‍

‍

Expanding Features – Phase II and Beyond

Once the foundation-matching MVP was stable, we expanded into Phase II, adding features such as a duplicates finder and swatch gallery for colour cosmetics. This evolution was partly driven by investor and accelerator pressure to show wider potential.

I refined the user flows, updated the design system, and ensured scalability in the UI to support new product categories. The design system – built in Adobe XD and documented in Atlassian — included components, states, and interaction rules that kept the product cohesive across rapid updates.
‍

‍

User Testing and Continuous Iteration

For the React prototype, I designed and ran a full remote usability test with ten participants using a professional testing platform. I prepared the screening questionnaire, tasks, and metrics (effectiveness, efficiency, satisfaction), and ran a pilot before the main study.
Participants matched our ideal customer profile and performed twelve tasks while thinking aloud.

The data revealed strong engagement and overall satisfaction. Based on insights, I:

• Rebuilt the search field and its logic for faster, more accurate results.
• Moved registration later in the journey to reduce user tension.
• Added contextual explanations so users could understand the matching process.

These refinements directly improved completion rates and reduced confusion during testing.

‍

New Directions – Chrome & YouTube Extensions

In the next phase, I designed a Chrome Extension for Amazon that allowed users to find product matches directly while browsing other sites.
Later, the client decided to pivot toward the booming influencer market, introducing a YouTube Extension where users could watch and shop beauty videos in one place.

I created a functional prototype in Webflow to demonstrate the new direction, incorporating a shade-matching algorithm, duplicate database, and universal checkout — merging product content and commerce seamlessly in one interface.

Collaboration & Communication

Throughout all iterations, collaboration was key. I designed interactive examples to show how filters, search, and responsiveness should behave, annotated every flow for the development team, and worked closely with QA to ensure design fidelity.
We communicated daily via Slack, held weekly review sessions, and tracked progress through Atlassian Confluence and Jira.
I also supported the marketing and investor side, designing pitch-deck visuals and three versions of the landing page.

‍