The product

This project aims to develop a business that specializes in designing interactive login pages and user interactions. The business will leverage existing website details, images, and colors to create more engaging and user-friendly designs. Additionally the login pages will help the business owner (Ethan Greens, our user) to collect and analyze user activity data to inform the development of new products and services.

Project duration

11 months

The Problem:

Ethan Green (persona) wants to construct an app to share his recipes to the world, he wants to own and manage his own space with what he already has, but doesn’t know hot to create his idea.

The Goal:

Create an app design for Ethan Green’s audience where interaction among users is possible (e.g; chat, comment, share, like and others.)

My role:

UX/Product designer

• Product/UX Designer: Created design and product with user focus
• Product manager: Managed product development
• UI Designer and Web developer: Created user interfaces in website

Responsibilities:

Conduct pre-design research, create design from paper wireframes to high-fidelity prototypes, usability testing studies and iterate on design based on the research.

First low-fidelity prototype

Ethan didn’t have a specific brand identity, therefore we had to try some colors first after finalizing his brand design identity.

Second low-fidelity prototype

After developing his brand identity, I tried different formats and this layout was chosen among three different options in total.

With the insights gathered from the usability testing research study and obtain feedback, I continued to create a high-fidelity prototype used for the second usability testing research study.

Color contrast irritates some users

• 3 out of 5 users say colors are too strong for their eyes
• 2 out of 5 users say that colors are not compatible for dark mode, which makes them want to use the app less

Spacing was noticed to be incongruent within some elements

• 3 out of 5 users mentioned noticing more than 4 elements being not aligned “well” or changing sizes from screen to screen

Elements alignment fixation

Previous designs weren’t aligned with a specific guide, which made some elements appear further or closed from what it was intended to be. Newest version implements a solid and rigid guidelines to follow for space between elements living for enough space to read, touch comfortable see the information displayed.

Elements size changes

Some buttons were larger than others unintendedly and showed no reaction while pressed with a misuse of transitions and animations to add interaction between actions. New elements follow a ration aspect to differentiate within their purposes.

Color contrast corrections

Colors have been drastically changed, without changing the brands identity or altering the apps purpose.

Initial wireframes

Newest iteration

Impact:

I can firmly admit that designing with inspiration from fellow designers and analyzing digital products myself has been of great help. Iterating this design has given me the opportunity to search more things related to design and think beyond what I was comfortable with so far.

What I learned:

Empathy and understanding directed to users and fellow designers is crucial for any design. Although reaching out to others might be complicated, doing so will open new tunnels and inspirations for creativity and always lead to good criticism and connections.

One quote from peer feedback:

""The app is designed for Ethan to share his recipes while giving his followers a space to connect, swap stories, and bond over their favorite dishes. It's the good mix of culinary content, a fun vibe, and a community that loves to cook and share together."

• Fellow UX Designer

Second case study

Blog: Responsive Design Learning for Life

Responsive Web Design

Case Study 2 >>