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.

Project: Ecommerce

Team: Iā€™m alone šŸ˜”

Timeline: August - September, 2021

Role: UX/UI, Strategy, 3D, AR

Tech: Figma, Unity, Blender

Problem | 58% of customers stop doing business with a Ecommerce platform due to a poor customer experience

Ecommerce is seeing increased growth during the pandemic as people are turning to online stores. However, many smaller and newly-launched brands are struggling to drive conversions and the problem lies within their customer experience.

Solution | An intuitive ecommerce platform that prioritizes customer experience and leverages Augmented Reality to enhance the shopping experience


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


A dedicated shopping experience for people on-the-go.

The mobile app shares the same functionality as its sister counterpart, but targets frequent customers. In addition, only on this mobile app or the mobile web version can users take advantage of the Augmented Reality feature.

View the prototype

Mobile flow


Use Augmented Reality to enhance your shopping experience.

Emerging technologies such as AR are proving to be useful in many industries and leading E-Commerce businesses are taking advantage of this new trend.

The Process


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.


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


Exploring early concepts

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


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.


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.

Ryan Rosales | Video Game UI/UX Designer