Data-Driven UX Redesign for E-Commerce Platform

Justin Emmanuel Sanchez

0

Web Designer

UX Designer

UI Designer

Canva

Figma

The owner of a tutoring company in Atlanta, GA reached out to me and asked me to be a part of her design team. Prior to joining, I went through an interview process where she asked me to design an E-Commerce platform to showcase my skills and creativity.
The task was to design a simple, one-page product page for the brand, Gucci. She did not want a full-blown copy of the actual Gucci products but my own creative take on the name.

Play with my Prototype:

Although the prototype was very simple, there was plenty of planning and design choices laid out prior to executing the final wireframe.

Planning

We all know Gucci as a lavish brand. Highly priced handbags and accessories that are showcased at fashion shows and other high-end places.
For this project, I wanted to flip that narrative on its head.
Gucci to me, at least for this project, was a Skate brand. Not just any skate brand, skateboarding footwear.
With that in mind, I went to work and started creating an inspiration board with anything and everything skateboarding.

View the planning phase

From here, I pulled screenshots of other E-Commerce websites that I thought had cool UX design. I took a lot of inspiration from Baggu and a skateshop called 510 Skate Shop.

Typography and Color

For typography, I didn't want anything super fancy, that would have defeated the purpose. Skaters are simple and functional. Bold lettering and simple logo design will be enough to get the message across. Merriwhether Sans was easy to understand and wasn't too curvy but still had a cleanliness to the look on the page.
As for colors, I wanted to keep it neutral and have that one pop of color. At first I went with orange because it was known for "optimism, happiness, enthusiasm, and youthful connections". However, after designing the page with this, I felt like it had a similar look to Grubhub.
I played around with the colors and was inspired by the simple red from the brand "Supreme". It was straightforward, bright and it well-known among skateboarding scenes. I went with a "Shocking Pink" because among all the neutral colors, this pink should be able to pop out of the screen and really make a presence to the users of the site.

Execution

Once I had all of my inspiration in one place, I was ready to design. The constraints for this project were as follows:
• One mobile screen page • Provide a logo • 5 days to complete
The first couple days were mostly planning and maybe just putting a few components together. Once all of the main components were built in Figma, it was as simple as drag and dropping the pieces in place.
I like to organize my designs so I use Auto-Layout to build out my wireframes. This will keep everything in once place and create sections for each part of the design. I also created components to streamline the creation of the 12 items on the page.
Finally, to make each item unique, I chose a couple of items to have reduced pricing and shoe size availability.

Check out my design workspace

Results

Once I felt like my design was complete, I sent it over to the client. She was surprised that I had finished a day before the deadline. I scheduled my interview the weekend after and she allowed me to present my work.
As mentioned before, although the page is simple, the client really enjoyed my presentation on the intention behind the design. She loved how I had data that backed every piece specifically in the color.
After this exercise, I was paid and was hired on to be a part of the her company at Simplify Tutoring for contract work. I felt I had proven my worth and am grateful for the opportunity. I look forward to documenting my work with her and presenting it here soon!
Like this project
0

Posted Oct 21, 2024

Justin reimagined the user experience of an e-commerce screen by conducting user research and crafting high fidelity prototypes that landed him long-term work.

Likes

0

Views

0

Tags

Web Designer

UX Designer

UI Designer

Canva

Figma

Responsive Web Design for Local Gym
Responsive Web Design for Local Gym
Sleek, Minimal UI for Social Music Website
Sleek, Minimal UI for Social Music Website