Data-Driven UX Redesign for E-Commerce Platform

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.

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

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.

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.

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.

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.

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!