Meta Apparel - Web and Mobile Design

With my nearing the end of the Google UX Design Professional Certificate program, the last course gave me the option to come up with my own idea. I decided to identify UX problems within the ecommerce industry and create solutions that would promote an improved customer experience on digital devices.

WEBSITE

An intuitive shopping experience on desktop.

The experience focuses on getting users straight to shopping the moment the website loads. In addition, all users are treated as guests and aren't prompted to register an account unless they choose to.

View the prototype

Home page

Apparel page

Product Information page

Checout Process page

Mobile flow

RESEARCH

Synthesizing secondary and primary research

To identify underlying problems I conducted secondary and primary research to examine common pain points, market trends and competitors.

Main insights

Customer experience is essential

• People want the process of purchasing products to be quick and painless.

• Customers value multiple payment options and detailed product information.

Consumers look for legitimacy

• Potential customers rely on social media, product reviews and data security to decide if they will continue their shopping experience.

• According to a study by Conversion Fanatics, "trust seals resulted in a 28.2% increase in conversions among new customers and a 19.2% increase in successful orders."

Consumers think AR helps them decide on purchasing a product

• 80% of survery responders think AR helps them visualize products and contributes to completing purchases.

Competitive Analysis

I researched direct and indirect competitors to see how they approached their customer experience.

Persona

To put myself in the shoes of users, I created a persona to guide me through the design process.

IDEATION

Exploring early concepts

I explored design directions before ultimately expanding on concepts that corresponds with the user flow.

DESIGN

Testing low-fidelity prototypes

I tested those concepts with 5 participants to confirm if I was heading in the right direction.

Website - low-fidelity

View the prototype

Mobile - low-fidelity

View the prototype

Main insights

Natural habit to rely on the navigation bar

• After hearing instructions, 60% of testers immediately used the navigation bar to advance to the next part of the process.

• The remaining 40% scrolled through the home page out of curiosity before scrolling back to the top and move on to the next page.

• Testers ignored the top bar in the mobile version.

Testers were lost in the website's navigation

• All testers either asked where they were or referred to the navigation bar to understand where they were.

Ideation on high-fidelity insights

Using data from previous research and low-fidelty test results, I created high-fidelity mockups and tested again with the previous 5 testers.

Increasing the navigation's usability and accessibility

• I added breadcrumbs as a waypoint for users to know where they are in the website.

• I included the American flag icon as a visual to indicate various language options for accessibility.

Clarifying product versions

• 40% of the testers commented on how they preferred seeing alternative product photos instead of color markers as it's easier for them to understand.

CONCLUSION

Reflection & Learnings

The outcome of this project was beyond my expectations and a great way to complete the Google UX Design Professional Certificate program. The duration of this process presented challenges and opportunities.

It was a challenge to find physical and remote people who were willing to participate in my research studies and test my prototypes. But I'm thankful to those who helped out.

The opportunities were an invaluable experience and allowed me to continue exercising my design thinking, polishing my UI skills and practicing 3D design and AR/VR development.