Contact

Work Collection

Clapper Case Study

Role

Product Designer

Timeline

4 Weeks

Deliverables

Visual Design

Mobile Application

Role

Product Designer

Visual Designer

Timeline

4 Weeks

Deliverables

UI Design

Digital Assets

Interaction Design

Introduction

TL;DR : In a fast-growing social media space, users need better ways to express themselves and connect. I designed a profile tagging feature to improve discoverability, focusing on a seamless visual flow that drives engagement and growth.

There are far too many options to research when buying a new shampoo that actually works. CareFree aims to remove stress from indecision and provide accurate results tailored to each users’ preferences.

Challenge

The challenge was to design a seamless profile tagging system that enhances personalization, improves engagement, and drives meaningful connections.

Users needed a better way to showcase their interests, roles, & communities within the platform, but existing methods lacked visibility and structure. Without a clear way to categorize themselves, discoverability and networking opportunities were limited, making it harder for users to grow their audience.

Research

Empathizing with users was the first step in recognizing some of the pain points in the shopping experience. I conducted research by interviewing a variety of participants with different hair types and asking questions regarding the process in choosing a hair product.

Understanding how much they paid per product, what the primary use of their chosen product was, and where they bought their product were essential to building the personas later.

This is also demonstrated from user interviews

Some user interviews that were conducted with control questions

Personas

After collecting key points from user interviews and struggles they faced when shopping, I of course...began working on personas. People with a variety of needs and suggestions helped curate some of the cases in which shoppers may struggle in the most, and how CareFree can provide them with solutions.

Information Architecture

An information architecture diagram was created to give users a welcoming introduction to using CareFree. Once users would input their personal qualities at the start, they would be able to navigate through reviews, products, and links for finding the information they need.

There were three primary functions that users could accomplish: Getting to know more about their hair type, saving products they trust, making it easier to research ingredients and chemicals.

User Flow Scenerio

I created two scenarios presented below for the primary functions of CareFree. Although users can search for products they like on the service at home, the most functional use case is when users are shopping at brick-and-mortar stores not knowing what to buy.

Indecision can be extremely costly for someone who lives a busy life, but this scenario aims to remove indecisiveness from the equation.

Sketching and Wireframing

Idea sketches were created for the primary visuals and features that customers would use regularly, along with some optional changes they could make.

Mood Board

The concept of CareFree was inspired by some issues that I also experienced when finding the right hair product, but the visual look and feel of the service is inspired by other pieces that emphasize the importance of personal care as well as the consumption of organic and natural products.

Style Guide

Reviewing my research, personas, wireframes, and visual inspiration I began to gather my assets for the high fidelity mockups that would give me a clear vision as to how CareFree would look under development. Simplicity was the goal for allowing users to navigate the service with little to no confusion as well as creating a recognizable visual style.

High Fidelity Mockups

Having made some adjustments from the sketching process to the low fidelity wireframes I began to have a clearer vision for what Carefree should represent and how it will better immerse users throughout their daily usage. Some of the high fidelity mockups implemented colors with more contrast to attract usage in certain heat mapped areas.

What I learned

UX over UI
For the sake of time not every visual element has to break the mold of previous design benchmarks. The number one priority at times must be creating a meaningful experience that resolves user pain points and meets business goals.

Visual tools
Using valuable tools needed for details in design such as arrow paths for prototyping, image upscaling software for cleaning blurry photos, and action settings for creating an immersive experience were all new features I have implemented in my design process going forward.

Ecommerce Experience
Having previously designed online services, this was my first time designing a service that is used to browse third party products. Although CareFree is meant to solve an issue with products found in retail markets, it highlights the importance of effective UX writing done at the lowest level instead of leaving the work to an entirely different service such as CareFree.

Essential Research Collaboration
Conducting proper research with candidates who are willing to provide essential data is key in developing a product accessible to every stake holder in the project. More questions should be asked in the research process in order for users to be asked less questions in the final product and avoid being frustrated.

Looking to start a new project?

Let's Talk!

Looking to start a new project?

Let's Talk!

Looking to start a new project?

Let's Talk!

Looking to start a new project?

Let's Talk!