The owner of ShirtsByMike envisioned a website that would connect more with their intended audience, which is comprised primarily of Treehouse students. Currently, the website looks dated and could use a refresh in their branding, as well as featured campaigns to keep users engaged.

To gather information and understand where the client is coming from, I...

• Examined the original ShirtsByMike website and noted down what I saw and what could be improved.
• Took note of what features their competitors had, what their strengths and weaknesses were.
• Created target user personas, in addition to journey and empathy maps to further understand the users that are using this site.

Competitors

I researched other websites in the T-shirt space and enumerated the similarities, differences, and selling points from each site. I assessed the strengths of each website, and incorporated them into my proposed designs.

• Teepublic
• Threadless
• Design By Humans

I also looked at other websites for further inspiration from modern clothing sites, Everlane and Madewell. Though their target audiences are not exactly the same, there were some similarities such as the target age range of shoppers and design philosophies.

Critique of the current website

• No space to feature the T-shirt of the month: the current main attraction of the main page is the hero image, but doesn’t say anything about the featured product. Redesigning this area to allow us to feature a product, with detail about the campaign and a direct link to the product, will likely boost sales.
• Modern design elements: as noted in the stakeholder interview, the design should be revamped and made more appealing to younger audiences. While the color is a good start, the general design could use some improvements. The fonts could be more playful, and some UI elements like the buttons can be more dynamic and modern.
• Repetition: there is a lot of repetition in the product listings. Most of the products have the same design, just with different colors, which adds clutter to the product listings section and makes it more difficult to browse. Ideally, this could be simplified by allowing the user to select their desired color in the product detail page, which will dynamically recolor the product image.

Target User Example

I came up with a profile of a typical user that would fall under the target audience. I wanted to understand their thought processes, what they would look for in a T-shirt website, and how they would use it.

Basic Info

• Name: Anthony
• Age: 21
• Location: United States
• Occupation: Student / Part-time work or internship

Goals & Needs

Anthony wants to be able to express himself with affordable and fun apparel that makes them feel like part of a learning community. He would prefer to shop at a website that showcases all apparel in a visually pleasing way, one that is organized and easy to navigate.

Behaviors

He tends to be outgoing. While he's typically busy balancing school and work, he's very involved in his local clubs and communities. He is usually low maintenance but expressive when it comes to personal style.

Frustrations

Not a fan of shopping, Anthony would prefer to spend the least amount of time possible shopping for clothes so he can have time for studying or activities.

Assumptions

Based on my research, I made several assumptions of what I believe my users wanted.

• More selection of products — periodically featuring limited/exclusive shirts or sales to keep the customer base interested.
• An updated website with more aesthetically pleasing yet functional features that match the brand.
• A review section for each product so users can have higher confidence in their purchase and be persuaded in one way or another.
• Social media links to keep users connected and another means of contact with ShirtsByMike.
• Ability to the site on the go with a mobile-friendly version of the website.

I explored two different ideas for each page, with each having different elements but accomplishing the same issue.

Much of my inspiration came from Pinterest, Dribbble, the three competitors (Teepublic, Design By Humans, and Threadless), and modern fashion websites (H&M, Everlane, Madewell).

After sketching out the wireframes, I took the best of both worlds of both ideas and then added some new ideas.

• I added an Instagram section to the homepage, which shows visitors that there are real customers buying these products and wearing them.
• For some details, I made them completely different than how it was in the sketch — for the individual product page I rearranged the details area to be more towards the top rather than below the “add to cart”. I also added an area for images for the reviews section as I realized that photos are always very helpful for users that want to see how the product looks in real life.
• Initially, I wanted to also include the footer as part of the side navigation bar, but I found that it made more sense to have a separate footer on the bottom of the page to add some consistency to the pages. It felt like there was not a conclusion to the web pages until I added that in, and this was a common suggestion from user critiques.

Optimizing for Mobile

Some aspects of the original desktop site had to be simplified or hidden entirely in order to create the site mobile-friendly.

I hid some less-important elements to make more screen space to feature more important ones. I had a left facing navigation bar — so I decided to create a hamburger menu for users to press or swipe out to view. With the search bar, I placed it into a search icon that would drop down after being pressed.

I also simplified both the Instagram and product pages by creating an image carousel for the photos in order to save screen space. In the catalog page, I downsized the elements into a double column grid for a better view experience. As a result, I added a “swipe down for more” at the bottom so users can easily go to the next page below to load and see more products.

Similarly with the desktop wireframe pages, I adjusted the footer to match the content more closely. However, I simplified the sections to reduce clutter, and tried to avoid overcrowding the mobile page or making the links too small to click on.

Refreshing the brand

In order to make the website more appealing and refreshing, I came up with a new palette of various complementary colors. I kept an orange color as a nod to the original design, so that the website redesign is not as jarring to prior visitors of the page. I wanted a palette that gives off a vibrant and fun vibe, on top of exuding a casual and warm personality.

The entirety of the text on the site is Brandon Grotesque, a sans serif font, which I chose for its warm and functional look.

I also felt that the logo needed an update to better match with the new style of the website — this would also give me another graphic I can add to a shirt. I wanted to keep some elements of the old logo (like the leaf) as a homage to the original, but featuring Mike the Frog more prominently so that users can easily associate him with the brand.

Desktop

Designing for Mobile

In designing the website for mobile visitors, I wanted to preserve the same theme and experience as the desktop version. The intent was to provide a sense of familiarity and brand stickiness such that the mobile site feels united with the desktop.

Though most of the same components and text were ported over almost exactly, I resized a lot of them to fit within the much more narrow screen dimensions. Text was also enlarged in certain places for easier reading, and components are stacked more vertically instead of horizontally to accommodate users scrolling up and down on their phone. Like the desktop site, I wanted to maintain a consistent header and footer on each page of the website — with the main difference being that we don’t have as much screen space to work with on mobile. I condensed the header by using large icons to symbolize buttons that the user can press (e.g. search bar to search the site), that way there is more screen space to view the main content of the page.

From this project, I learned about what goes into a good website design. It’s not just about the layout, typography, and visuals — what’s really important is the brand and how it is received by the target audience. It’s also not enough for a website to be visually stunning, it must also take into account who the user is and how they would interact with the site. As a result, the tone of voice and content of the website also matter a lot, and connecting that with the design of the site is essential.

I also learned a lot from checking out other apparel websites as references, how they incorporate their brand into the site design, and how they utilize color and typography. This gave me a lot of good ideas and inspiration for my own site design.

Future Improvements

I would add more content to the website that provides more active community engagement. For example, I would include Instagram and Twitter contests that promote the brand and encourage the users to share the website more broadly. In general, having more lively color and illustrations could help tie the pages together and showcase the dynamicness and liveliness of the site.

Additionally, I would include more information about the company itself — there is currently minimal information about the brand, and what “sustainability” really means for the company and how they would achieve it. It would also be insightful to add some narrative about the brand and its origin so that visitors can learn about the site they’re shopping from, which would give them more confidence and trust in ShirtsByMike.