Apple macbook mockup.png
 

Role: UX /UI Designer (Team Project)

Timeline: 6 weeks 

Platform: Website in Squarespace

About the project

This design proposal was for the startup company, 4 Optimizing, whose goal is to sell healthy, vegan chocolate snacks. The mission was to create a compelling design that would entice the target audience to try their products.

The problem and the solution

4 Optimizing is a startup company and needs their stakeholders and target audience to be aware of their products. They want to bring great-tasting, healthy products to market and are already being sold in local stores. Our solution was to create a branding proposal, complete with a logo, product package design, a website and a motion piece to advertise their products on social media. I was the UI/UX designer on the team to create their website mockup and prototype to showcase the products and its details.

My teammates

Nikki Keller

Brand designer & Art director

Yura Ten

Motion designer

Munjeong (Lea) Kwon

UX/UI designer

Keiko Xiwen Li (Myself)

UX/UI designer

Check website prototype:

(There is loading page we created before entering the website)

 Scroll down to see the design process

 

 

Design Process

Tools I used for the project
Approach

We started by researching and analyzing 4 Optimizing's competitors. We also determined who their target audience was and built a brand concept before beginning the design process.

Compile an analysis (using S.W.O.T. ) of 3 competitors,

User Jorney

​ The user journey helps us to come up with key points of the brand method.

 Wireframes

 Non-interactive & interactive Information

Concept Strategy

  • How might we question

  • Describe the concept

  • Create user personas

Analysis

Finalize

Final design outcome with the prototype and present to the client

Feedback

Design the desktop interface 

Art Direction

  • Mood boards

  • Style tiles

Design

  • Weekly feedback from our client

  • Based on the feedback, adjust the design

How might we...

These are our how might we questions for brainstorming the solution for 4 Optimizing.

Blind Designs _ Proposal.jpg
User journey

With this journey, we can come up with key points of our brand method which are trustworthy marketing, premium package design and an informative digital platform.

Blind Designs _ Proposal copy.jpg
Persona

Based on our research, we created 2 personas. 

John Persona
Kim Persona
Wireframes

While the brand designer was creating the package design, we started to work on building wireframe of the website. As the company requested to use website platform Squarespace, my UI/UX design partner, Munjeong, researched what kind of interactive features were available in there. Based on her research, we discussed and created the wireframes. We received feedbacks from the client and designed several iterations.

Wireframe first version

Wireframe version1

Wireframe final version

wireframe_finalversion.jpg
Art Direction
Style tile.png
Blind Designs _ Final Pitch.jpg

Package design created by Nikki Keller

Based on the product package design and 4 Optimizing requesting a minimalistic aesthetic, we determined the art direction of the website. We explored several color options before settling on a light blue green that gave a feeling of cleanliness as the the products contains only great ingredients that benefit users health. 

Final website design
Slide 16_9 - 7.jpg

Check website prototype:

(There is loading page we created before entering the website)

Thank you for watching:)