Timeline

1 Month

Team

1 Designer + 1 Developer

Role

UX/UI and Graphic Designer

Skills

Wireframing, 2D Design, 3D Design, Motion Design, Prototyping, Market Research, Mockup Creation

Tools

Figma, Adobe Photoshop

Visit

OverviewDemmo corp is an emerging fashion label created by Christian Velasquez that blends streetwear themes with high fashion. With a heavy reliance on visuals and graphic design to create pieces, imagery is very important to the brand. The task of this project was to create an e-commerce platform for the brand that showcases products in a simple and seamless way, while optmizing for conversion.

Role + Responsibility
As the sole designer of the website, my role was to design components, UX/UI, and motion tests for this website.

Objectives
Optimized checkout was the top priority of the site. The site was also to be engaging and interactive on some level. Due to the volume of products of the brand, the client also wanted discovery to be easy for the user.

Tools + Technologies
Figma was used to generate wireframes, mockups, and prototypes for the website’s layout and design. After Effects was used to prototype interactivity on the home page. Illustrator was used to create 3D icons for the home page. This shop was developed on Shopify using custom components and front end code.

Research + Testing
For this website, competitor analysis was conducted on brands such as Stussy, Supreme, Uniqlo, and more. Observing the funnel between shopping, adding to cart, and email sign ups allowed for a better understanding of what could help 99based acheive higher CRO. A/B testing was also conducted for column count on mobile to maximize user satisfaction.

A/B Testing + Unmoderated User Study
In the unmoderated user study comparing shop layouts, the single column shop received positive feedback for its large product images, which made it easier for some users to view items clearly. However, a common drawback was the excessive scrolling required, which made it time consuming for users to locate specific products.

In contrast, the double column shop was praised for reducing the amount of scrolling, allowing users to find products more efficiently, an advantage that could potentially increase conversion rates through better product discovery. That said, some users felt that the smaller image sizes made products less visible compared to the single column layout.

Single Column

Double Column

Home Screen
When designing the landing page, I conceptualized an interactive landing menu to increase user interest as soon as the user lands on the page

Outcome
In the unmoderated user study with A/B testing, the 2-column shop layout outperformed the 1-column version in both usability and conversion. The user pool navigated more efficiently, discovered products faster, and preferred the familiar structure. Overall, the layout made better use of screen real estate, led to higher engagement, and increased conversion rates.

Close