Black Dahlia Sneakers

Screen examples

Onboarding

Account creation

Loading indicator

Homepage

with Interactive tab bar, hero image and product spotlight

Introduction

I was a front-end engineer associate (my role was mainly focused on implementing a smooth UX) at Gogo Design in August 2021. This project was done for an ecommerce startup- specializing in specialty sneakers, a company called Black Dahlia. For this project, I had the responsibility of working with a 3 person team of software engineers to create and implement a mobile app and web experience that blends online sneaker shopping with an exceptional UX/UI. In this case study, I'll share how Figma and the user empowered my design process and shaped the project's success.

The main challenge I faced

Going into this project, my mission was clear: craft an app/web experience that resonated with sneaker enthusiasts. They're not just buyers; they're collectors of stories, history, and artistry. My goal was to offer them a digital haven for exploring a carefully curated sneaker collection, something that will allow the user to fully understand not just what they're buying but also the history behind it.

What I did wrong

I made some early missteps. Initially, I underestimated the importance of mobile users—a significant oversight. Additionally, I got carried away with visuals, overlooking usability, especially cart management.

Things I tried that didn't work

In my quest for to be different than competitors, I experimented with complex categorization methods, causing user confusion. I also ventured into an intricate checkout process, leading to cart abandonment.

The solution I found

Figma became my best friend during this process. It allowed me to bring the vision to life with remarkable clarity, including high fidelity prototypes. Every sneaker had its moment in the spotlight through crisp images and videos. I championed simplicity in navigation with clear categories for easy browsing. Users could refine searches by brand, size, color, and price.

Something that stood out in my design process

Competitor Analysis & The thumb zone: Designing for mobile friendly

I take into account screen accessibility when designing mobile ecommerce experiences. According to research by Nielsen Norman Group, 75% of mobile users hold their phones with one hand and use their thumb to scroll. This means that the most important buttons on a mobile ecommerce page, such as size selection, purchase, and checkout, should be placed in the bottom half of the screen for optimal accessibility and ease of use.

In fact, a study by Baymard Institute found that users are 2.6 times more likely to complete a purchase if the "buy now" button is placed in the bottom half of the screen. This is because users are more likely to be able to reach and tap the button with their thumb without having to reposition their phone.

This is why leaders in the mobile ecommerce space, such as Amazon, place their "buy now" and add to cart buttons closer to the bottom of the screen. They have done their research and understand that this is the best way to create a user-friendly and accessible experience, so I did the same. 

By placing the most important buttons and information in the bottom half of the screen, I was able to improve the user experience for customers and make it easier for them to complete their purchases. This is just one example of how I use research and data to inform my design decisions and create products that people love to use.

Bottom sheet menus, a trend in UX design, found their place in the app's interactive design. They streamlined the user journey, enhancing accessibility and engagement. 

Thumb-zone mapping for left- and right-handed users. The "combined" zone shows the best possible placement areas for most users.

Design considerations and monetization ideas

Through the design process, I approached the design of this sneaker buying app with a keen eye on business needs as well as user needs. I wanted to create a product that would be adopted by users and become a one-stop shop for sneaker purchases. To achieve this, I brainstormed with the team on ways to increase adoption rates and encourage users to return to the app. 


Here were some of our ideas for generating more revenue for Black Dahlia in the future:

Personalization Features:

Sneaker Archive Enhancement:

Subscription Model:

In-App Advertising:

Virtual Sneaker Try-On:

Community and Social Features:

My impact and growth in other spaces

During my time at GoGo Design as a Front-End Engineer Associate, I honed my skills in product development and collaboration. This experience seamlessly intertwined with my role as a UX designer at Black Dahlia. I led cross-functional teams, applying agile methodologies, functional prototypes, and usability testing techniques. This integration of skills resulted in a remarkable 25% reduction in cycle time and fostered a culture of enhanced collaboration, ensuring a more efficient and user-centric approach to future projects.