top of page
logo.png

Basic Formula

1

USER STORYTELLING + DESIGN INTERACTION

Rethinking the point of purchase through AR

Watch Video

logo.png

OVERVIEW

Change the way consumers shop

Basic Formula is a software company leveraging AR to display skincare brand ingredients interactively. The AR app will be used to help consumers visualize the products they are buying. As clean ingredients become the norm, companies that effectively showcase this idea will continue to be at the forefront of beauty. 

Deliverable

AR Software

Setting

Team of 3, consisting of UX 

Time

12 Weeks

Role

UXD, UX Research
UX Writing

The Problem Space

Focus on engaging all those involved in with skin care products to facilitate buy-in, as well as a collective input of ideas.

My Role

As the UX researcher, I reported the concept with UX writing, leading research efforts and uncovering key opportunities, creating deliverables and workshop findings.

Results

The main interactions for an AR mobile experience by

facilitating buy-in and collective input of ideas.

Unity.png

The UX Design Process

Research

- AR Domains

- Ideation

​

​

Concept

- Wireframe​

​

​

Evaluation

- Prototype

- Feedback​

Tools:

AR Domains

Current AR trends: Tools and technologies, User Needs, and other Takeaways such as educational use. The scope of the project limited the ideation phase, focusing on the end results.

Ideation

The ideation phase consisted of explaining the relationship between digital interactive experiences and beauty products as practice and study. Developing an application based on trends in digital experience design.


​

​

In order to elevate Basic Formula’s logo, we opted for a minimal 3-dimensional feel. When designing the new logo, the characteristics we operated on were simple and versatile, a logo we can only use in many sizes.

Brand Identity

Ingredients_edited.jpg
logo.png

Typography

Raleway

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Montserrat

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BF LOGO

Research summarized, suggested and expanded the ideation phase to define the end scope of the project.

Figma's prototyping features allowed us to create interactive flows that explore how a Basic Formula user may interact with the design

Context of the end user: Pop-Up store Physical scenario:

Public space = User journey 

Lighting: casting shadows to improve the 3D object presence

Motion of the user: creating spatial  awareness with visual cues 

Simple navigation: Minimum use of  buttons and use of infographics to deliver information

1.png

The Basic Formula app measures more than a product’s features, only promoting sustainable methods and clean ingredients

Basic Formula is committed to providing access to information and education that allows you to make the best choices. With this AR app, you would be able to get a visual anatomy and basic description to serve as an accessible tool.

By visualizing the wireframe, the experience previewed the AR following interactions before implementation:

​

1. Scan & Wayfind. This follows how we the user learns the AR tools to navigate the space. 

 

2. Product Interaction. This represents the technical and visual representation of the product.

 

3. Product Description. Finally, informing the ingredients that make up the product we are using or consuming. 

​

​

​

​

5.png
4.png
1.png
2.png
3.png
8.png
7.png
9.png

Two phases of the prototyping and testing raised 3 insights to leveraging AR to create a retail experience:
 

Part of the project is evaluation, which is integral to the process of the design. Our evaluation measure involved comparison with a referent model.

1. Reduced congestion of information.

Replace text with illustrations.

​

2. Changed space to Pop-Up environment.

Wayfinding to help user navigate

3. Menu < buttons to enforce motion

Reduce touch points for user 

Evaluation

The AR experience was implemented using Unity to achieve the main interaction in a realistic setting. To culminate the finding, the following assets were created to visualize the product display:

The results decreased visual elements and improved the overall augmented experience.

Key Takeaways

Before BETA testing for user feedback, the raycast on Unity will be implemented to help user’s navigate the model and information presented to them.

 

With BETA Testing, feedback from making more infographics and assets will give insight to help us make improvements to the functionality.

Other Projects:

2
3
vid
bottom of page