Critique a T-shirt Website

Overview

My client has requested I help him improve his e-commerce website, shirtsbymike.com

There's a friendly frog named Mike in the Hero Shot, so how could I resist?

My UX skills were applied in lending a critical eye to the design and layout of the site. My first steps were creating a Persona, Empathy Map, Journey Map and performing Competitive Analysis. To flesh out the Brand Redesign, I used the medium of Sketches, Wireframes and Mockups. Wireframes were designed in Balsamiq, and the Mockup in Adobe XD.

This project delved into further units that covered the study of Typography, Visual Design principles and Storyboards.

Problems

The website is dated; it's in serious need of a face lift and rebranding. With the current design, the ShirtsbyMike team isn't able to highlight a featured t-shirt.

In order to increase t-shirts sales and build a following, I immediately scout out the competition. "What does a t-shirt website look like in 2021?" I ask myself. The answer: users expect a slew of options, crisp images, sizes for all body types and well, it needs to look and feel great. ShirtsbyMike has a heavy 90's vibe, and that's got to go.

To build the groundwork for the redesign I offer suggestion based on my competitive analysis:

Feature high quality images of shirt models for both genders and different body types
Release a brand new shirt design, something that's fresh and follow the same existing "frog" look
Run a sale to draw traffic and create a sense of urgency. And make sure the site really wow's them!
Find a way to give back to the community. Whether's assigning a portion of sales to a charity, or supporting a cause. Buyers appreciate a business that gives back to the community.

Audience

My target audience consists of 16 - 35 year old Treehouse students who are lifelong learners and value community. To represent this group, I created a Persona: 25-year old Elijah. Eli is a Graphic Designer based in Portland, Oregon.

Solution

Prominently featured Shirt of the Month with a high quality photo to solve the stakeholder's need for a featured t-shirt
Added discount offer within Hero Image to attract clientele and drive sales
Wrote Welcome Text in a warm, friendly tone so as to connect with the audience in a way that feels genuine and down-to-earth
Added Shirt Models to serve as links to the different shirt categories and provide visual representation to the products

Learnings + Takeaways

Ideas can look a lot different by the Mockup phase. (Things like Placement, Typography and Layout come across differently in polished form. The micro details really come into play the more realistic the mockup. Questions like, "is everything centered and spaced out consistently? Is there enough white space in this desktop design? Are the buttons in a natural place to be clicked on this mobile design? Honestly, my first few designs made me cringe.
Being brand new to design, I had to get my bearings with software like Balsamiq, Figma and Adobe XD. Although I see value in knowing how to use various design tools, I find that starting and finishing with the same program is a time saver.
Starting with a Mobile design can be helpful in that it forces me to use space wisely. I understand that I must consider all sizes when creating a design: desktop, tablet, mobile, etc.

EMPATHY MAP

JOURNEY MAP

Sketches

Desktop Wireframes + Mockups

Mobile Wireframes + Mockups