Redesign T-shirt Website Case Study
The project 'ShirtsbyMike' is an e-commerce website that sells t-shirts online. The company aims to redesign and make it function better for their customers.
The challenge was to redesign the website and make it more functional for their customers. They wanted to increase sales as much as 20% and also create a featured t-shirt of the month to raise money for charity.
The outcome of the redesign was that customers felt that it was a trustable, fun and quirky t-shirt website where they can buy bold statement t-shirts with confidence.
Introduction
The website Shirtsbymike.com is an e-commerce website that sells different styles on t-shirts and tank tops online, in various colours and sizes. The branding for the website is a friendly looking frog 'Mike'. His face is shown on the t-shirts and tank tops. The website tone is bold, fun and friendly.
Stakeholder Interview
Roberto Jiang, Marketing Director of Shirts By Mike.
Hypothesis
Treehouse students want t-shirts that are fun and make them feel connected to the community.
Problems
Our website is dated. Feel free to refresh the branding, if needed. The content looks stale; we want to keep it fresh with various campaigns. We are unable to highlight a featured t-shirt.
Competitors
designbyhumans.com — t-shirts
threadless.com — t-shirts
teepublic.com — t-shirts
Goals
What should this project accomplish for the business?
We’d like to launch a featured t-shirt of the month. The goal is to increase t-shirt sales by providing a limited edition t-shirt.
How will you, personally, define success for this project?
These are the success metrics:
• Increase sales by 20%
• Increase unique page visits by 10%
Strategy
In what direction is the business heading?
We’re aiming to continue providing quality t-shirts to the Treehouse audience.
Target Audience
• Mostly ages 16–35
• Primarily based in the United States
• Treehouse students
• Lifelong learners
• Values community
• Playful
Deliverables & Outcome
Website Goals
The goal of the website is to increase sales on Mikes t-shirts and tank tops and make money for charities. Another big part of the website is to sell a featured t-shirt per month. The website should be easy to use and attract the target audience with bold, bright eye-catching colours.
Target User Example:
Basic info
19 year old Taylor from California, studying graphic design at Treehouse college.
Goals & Needs
Taylor likes her friends, fun and laughs. She needs to stand out from the crowd on a budget, as she is a student. She loves going shopping but much prefers to look online for something different.
Behaviors
Taylor is very lively, fun and friendly. She knows the majority of the college year. She is very playful, fun, bold, colourful, values her community and wants people to know her. Like every student she is always on her laptop looking for new unique ideas on how she can help people in her student union.
Frustrations
She always needs to wear new funky t-shirts, to show off the quirkiness and stand out from people, however she doesn’t have much money and the only way to find unique t-shirt in her budget is online.
Design Principles
Colour: The colours on the site are very bold and playful. However they are not complementary colours. They do uplift your mood when you enter the site because of all the bold colours. Because they are high contrast colours, they can compete, so they need to be used when something needs to stand out.
When scrolling down the site to the products section, they are set on a white background within a box which is easy for the eye to follow, as the t-shirts are bold, bright colours which helps the products stand out more.
The orange fonts on the grey background near the products is a bit hard to see. I would recommend putting the products on a plain white background.
Branding: The frog mascot on the front page stands out and catches the users eye. This gives the site a feeling of friendliness. The frog also signifies a time for rebirth or renewal. Which is a good point as the site should always have something new and fresh for people to look at eg/ the featured t-shirt every month.
Shapes: The shapes used on the site are mainly rectangles or rectangles with rounded edges. They outline a specific point and the eye is easily drawn to what is in that box. They help the site flow better and is easy to view each t-shirt or option. If they were on a colourful background I think this would be hard to view. Another shape used on the site is the line, this helps divide things up. There is also balance on the amount of products per row. No product element stands out than the other which is consistent.
Groupings: The elements on the website are grouped. eg:
Main web banner this has all the elements within the top ¼ of the homepage. The website has different t-shirt style sections ( t-shirts, tanks) - This is value to the customer on how they view the products. Once clicked on a product, it takes you to the sizing/price/instructions. It pulls through the ‘you may also like’ as a group too, which could lead go more sales. The social icons are grouped together, so the customer can quickly view on social media what other customers have bought or view experiences.
Balance and Organisation:
The main sections of the website are:
• The web banner at the top of the page.
• Product categories on the home page.
• T-shirts & Tank Tops - equal rows this give balance on how the products are set out and all images are the same size.
• Titles on the webpage, these can be hard to read in the font and colour.
• Organised sizing and price, once clicked on the product.
• Everything is easy to view on the home page and it's not too over facing with too many products. However the products could have their own categories down the left hand side of the page, for organisation.
Strengths:
1. The usability of this site is very easy for students, as it has very basic information. All information needed is on the homepage, until you click onto the product you want to view/buy. This then leads you to another page, where it tells you the price, size, how to wash your item and if you want to add it to the cart.
2. The buttons are easy to view and stand out when you want to make an action eg ‘ buy the t-shirt’ and also the sizes are easy to view as they are in a larger font. However it doesn’t give you the measurements of the sizes.
3.The footer at the bottom matches the top web header colour. The social icons in this bar helps the customer to view other social media platforms/contact information.
Weaknesses:
1. Style of typography used and the colour of typography. I would make it more bold and interesting to tie in with the bright colourfulness of the website.
2. No categories or menu at the top of the page - to navigate from the header. This is quite hard to navigate when you first look at the webpage. No contact details either.
3. No prices on the main homepage for the t-shirts. First thing I would want to see as a student is the price. I’d look at the design then the price. You don’t see this until you click onto the t-shirt. If there was an option I would search categories ‘ price low - high’
Competitive Analysis
Strengths: Nice illustrative style going on. Categories down the left hand side are helpful. Once clicking on the item I want to view it is very informative which is super helpful.
Weaknesses: The menu at the top feels like it should be at the right. Not sure there’s a lot going on when I first look at the webpage. Not sure where to direct myself. It’s all competing. No prices on t-shirts until you click on the item. Nothing says it’s a t-shirt website when first landing on the web page.
Concepts to include in redesign: Move the main menu to the right hand side of the web page. Make the ‘Add to Cart’ button stand out a bit more. There’s nothing that says it’s a t-shirt website when I clicked on it, so maybe introduce the website in the web banner.
Strengths: The menu at the top has some good options to chose from. The web banner with the photography makes you interact more as you see people wearing the t-shirts. Easy to navigate around and the buttons are bold and in your face. The white background on the web page makes it easier to view everything. Texture in the top section works well
Weaknesses: Main menu & logo on the left, feels like it should be to the right. I feel like the join us should be at the bottom of the page, not competing with the login button ( top right). I feel there are too many fonts going on.
Concepts to include in redesign: Move the main menu to the right hand side of the web page, so it will be easier to view. Think about what fonts are used where and what needs to stand out the most. Maybe keep all the buttons in this section consistent, as it’s quite hard to follow.
Strengths: Good informative top main menu. Fonts work well, they are easy to view.
Weaknesses: Needs more colour, or something to entice the customer into the web page. Nothing stands out and says where I should click. Product images are too big.
Too much to look at on the homepage. Feel like it should be on different web pages. Not all on the home page. Maybe the video further down the homepage needs to be more at the top as an introduction video.Too much information underneath the t-shirt, this should be on a new web page with the t-shirt selected.
Concepts to include in redesign: Maybe introduce more colour into the main web banner as this is what attracts most attention to the customer. Add more colour to the buttons, so it gives the customer some direction.This categories section should maybe be in a menu bar down the side of the page. Reduce the amount of information underneath each product and put it onto a new web page. Everything is competing on the home page, I feel it needs something to stand out.
User Persona
Empathy Map
Empathy Mapping based on User Persona
Journey Map
Journey Map based on User Persona
Wireframes
Please note, wireframes are designed based on my personal assumptions as it’s an assignment.
Assumptions
• I think users are interested in navigating around the site easily so that they are able to find the t-shirt they are looking for in their size, colour and price.
• I think users would like a mobile version of this website as they are students and want to view it everywhere.
• I think users are unhappy with the fact there is not navigation at the top of the menu and also the price isn’t on the home screen at first glance. They are probably not happy with the frog too because he just looks scary when entering the website. They need something a bit more welcoming and friendly to entice the user.
• I think most users visit the site using laptops or mobile phones because they are students.
• I think most users are acquired through social channels because of the younger target audience. Unless they search for ‘ fun t-shirts website’ in Google.
Iteration Explanation
First home page:
I’ve experimented with the homepage on this design by introducing a navigation bar that is also a burger menu. That when clicked on the menu drops down.
I’ve introduced an about the company section after the featured t-shirt section in the join us section, this would give an explanation about why then should join the newsletter. I’ve decided to put the featured t-shirt section at the top of the web page, as this is what I think the user would like to see first, rather than the ‘about us’. I’ve also introduced on this web page an instagram feed so that the users can see what other people are posting when they have purchased a t-shirt. In the footer I have decided to put some important information, and also social icons, so people can see live feeds on what this company and what the customers are up to and what they have purchased.
First catalogue page:
Again with this page the navigation bar is the burger menu on the top left of the page. I think this looks neater and isn’t too over facing for when a user lands on the webpage. From when the user clicks on the available shirts, they will be taken another web page which gives them ‘unisex’ t-shirts, which will be a mixed of everything. They will have a filter on the left hand side where they can select a number of options that they want to view. Example, size, gender, style, colour. There is also a few tags underneath the main heading ‘ trending | newest | best seller.
Underneath each product is a name, description and price. Underneath that the instagram feed images follow through. I see this on every page. Again with the footer I see this being consistent on every page.
First product page:
The navigation bar is exactly the same on every page. Once the user has clicked on a product they would like to view, on the left hand side is the big featured image with smaller thumbnail views of the t-shirt. Once clicked on these can be enlarged and zoomed into. The t-shirt information is presented on the right hand side of this page. The information states a small paragraph about the design, the size, colour and price.
It will be easy for the user to order the shirt once they have selected the options, then they can choose add to cart.
First contact page:
The navigation bar will be the exact same with the burger menu in the top left corner, and the drop down menu will show once selected.
I’ve decided to design this contact form with the first part being a question, then the user will give their contact details and also can send a message, one done they can press the ‘send message’ button. If they don’t want to fill in the contact form they can use an alternative which is the email & phone number is presented below the contact form.
Second home page:
With the second home page design I have put the navigation bar at the top in a strip with the logo overlapping on the left hand side. I have also put in the very top section a search bar, cart & login icons.
When scrolling down the page, you see a discount banner advertising the latest offers. Then a slider with featured t-shirts.
Scrolling down further there is another slider of big images of t-shirts named ‘ t-shirts, new in & gifts’ these will slide across the page. Then underneath this section is the intro to the ‘about’.
The featured t-shirts will be displayed in the sliding banner at the top of the web page. T-shirt photos will be the 3 sliding links underneath the first sliding banner. With the footer I have put important information for the user, ‘free delivery, order by & 60 day return’ I think the user needs to know this incase they don’t like the item when they recieve. Below this I have put social media icons, and then below this I have put 3 columns with important information like ‘t-shirt community, help and contact’
Second catalogue page:
With the catalog page, the navigation will be the same on every page, with the logo top left, search bar in the middle and the cart/login icons and the navigation options below. Once the user clicks the navigation for example ‘ t-shirts’ they will be viewed in columns, at the top is a meta tag ‘ homepage>catalog’ so the user can track which pages they have been to, to get to where they are. Also I have added in a t-shirt filter in 3 columns, ‘ gender, size & sort by’ this will make it easy for the user to view and they won’t be too over-faced with the amount of t-shirt choice. Again the footer will be the same on every web page, with the 3 icons ‘ delivery, order by & return’ then the social icons and then the 3 columns of important and helpful information.
Second product page:
Once the user selects a t-shirt they will be then taken to the product page. Where they will view a large photo of the t-shirt selected on the left hand side of the page. At the side of the image is a left and right arrow, this is so the user can slide through different photo angles of the t-shirt. Underneath the main image is 2 small thumbnails of different angles of the t-shirt. To the right of the t-shirt is the title of the t-shirt in 1 sentence, price, and how many stars other people have given the t-shirt. Underneath that is the size & a add to cart button, then below that is a description of the t-shirt. Below the product page I have decided to put in a few customer reviews so that the user can see how happy people are with their purchase. Below that section I have also added in ‘ you might also like’ this is so the user can see what else is in their category range and might entice them to buy another t-shirt. Again the footer will be the same throughout the website.
Second contact page:
For this contact page I have put the title quite big and left aligned on the web page, below this I have given a friendly introduction so that the user feels comfortable contacting. Below that I have split the page into 3 columns for ‘ chat live / telephone & email. Another alternative for the user is to fill out the contact form on the left hand side. If they user is precocious on where the company is based I have also given their address to give the user a sense of security. Below this is the usual footer that will be on every web page.
Sketches ( Low Fidelity Wireframes)
Initial Lo-Fi Wireframes of the Site
Sketches ( High Fidelity Wireframes)
Iteration Explanation
• When designing my 4 x wireframe pages I decided to use sketch, as this is what I felt comfortable with and I like the fact that you can personalise your toolbar at the top of the page. I researched how to best use sketch and so I created my wireframe in this programme.
• On the home page I changed the layout a bit from my original sketch. I think i’ve made it better in the wireframe version. In the sketched out version I have the featured pages in a slider so the user had to click on the slider in order to view the featured pages. When thinking about this, it will be too confusing for the user. So I have amended this and put the 3 separate featured boxes next to each other rather than on a slider. This will be easier for the user to view straight away.
• After sketching, I realized that I had no social feed on the pages, so I changed the bottom of the pages by adding in an instagram feed from a previous design because I feel that users would want to see the product in a live feed and people wearing the t-shirts.
• With the contact page I realised I hadn’t added in a phone number box, so I amended the contact form.
Redesign Summary
Research
I viewed the old website and did some research on the target audience. I decided that they would like quite fun, quirky unique styles. So I based the website colours and mood board on this. The typography I decided to use for the headers was bold and striking, whereas the body copy is a bit more elegant and not as bold.
Ideas/Sketches
I did sketches by hand to figure out how I could display each page on the website. By doing this it gave me an idea of where I can put the menus, images, text etc. I got inspiration from a few other websites, as I can then see what works best.
Wireframes
From creating sketches then to creating wireframes in Sketch, my designs changed slightly, but it gave me a better picture on how it would look.
Final mock up
When creating the polished mock ups, the mood board really helped, being able to see the style of the site I was going to design with the bright colours. I wanted to keep it fun and friendly, and not too overpowering with colour. Using the lifestyle photos really lifted the site and gave it some personality. I also researched a few fonts online to see which ones match best together.
Colours
Typography
Titles/headings, this font is quite chunky and works great in uppercase. It is a family of different weights. It also looks great when it’s used in a button.
This is used for body copy mainly, and titles of products. It is used in bold & regular across the site.
Brand Personality
The brand personality I chose for the redesign of the ShirtsbyMike website, was fun, quirky and colourful (see mood board) .
I wanted the sliders at the top of the home page, to have a play on words with the word ‘tee’. I tried to be clever with the wording throughout the site. It is more fun and friendly than serious and professional I feel that it should engage with the target audience more and make them stay on the site a little long as they will feel more connected with the tone of voice and can relate.
It will help shirts by Mike attract the correct target audience with the bright colours, quirkiness and fun yet friendly tone of voice. I decided on inserting the instagram feed so that it would attract younger people and start off a trend, this would be good for the charity side of the website.
It will make the users want to come back to the website, and give them an experience they won’t forget, as it will be an easy to use website, with some personality.
The style of imagery I have used throughout the site eg. sliders/ product images are more real life style. This will make the user picture the products better and can attract them to buy them more so when they see it on a cool, fun person.
I’ve also created a feature shirt for the site, this can be vied in the slider on the homepage & on the catalogue/product pages. It is one that ‘Mike’ who created the site really likes. This could be a good selling point for the website, as the user will always acknowledge the no.1 choice for t-shirt.
Created a Moodboard based on Research
Text Content
The type of text I will use on this website, is quite casual, friendly and fun. I want the user to engage with the website and be on the same wavelength. As the website is quite bright and colourful, if it was serious it wouldn’t match the style of branding I have decided to use, which is colourful and quirky. Maybe I can use slang etc because of the target audience.
An example of the type of text i’ve used is ‘ come to our tee party’ a play on the word ‘t’ shirt. This is used for the featured t-shirt slider on the homepage.
Or another example is what I have called the t-shirts which is quite quirky
Eg. ‘ Ocean Blue Shirt’ and the description is quite playful ‘ dive into this..’
When the user needs to contact someone on the site, they can click on the contact page & the text i’ve used on this web page is
‘If in doubt, give us a shout’ this is quite fun and upbeat.
Mockup Designs
Device Mockup Designs
Homepage Before
Homepage After
Catalogue Page Before
Catalogue Page After
Product Page Before
Product Page Before
The site had no contact page
Optimising for Mobile
Mobile Mockups (Responsive Design)
When creating the mobile friendly version of the website, I always referred to the desktop view. With the site being on a mobile I restricted it to 1 or 2 columns. I just condensed it down into 1 long page. With the images quite big and the user will be able to scroll down, which should be easy for them to navigate.
One thing I did differently to the desktop site is the header at the top of the page. I created a burger menu. The desktop site also has a search bar at the top of the page. I had to condense this down to just an icon as this will look too busy and I don’t think this would be easy for the user.
Some bits I didn’t add on such as the footer information, which I don’t think this is essential.
Mobile Device Mock up
Homepage
Catalogue Page
Product Page
Contact Page
Mobile Device Video Mockup
Lessons Learned
When learning this project, I found that research is key before you start polishing a site to perfection, you need to know things like colour, typography, style of text etc. which is why I enjoyed putting the mood board together.
It’s good to look at inspiration from other sites too. Such as colours/typography, what does and what doesn’t work.
At the beginning I think wireframing and sketching is a good opportunity to play around with your ideas then when you come to designing the site it makes it easier for you to see what layouts work and what don’t.
I feel I have changed a few bits when designing the website. From what i’ve hand sketched to designing a wireframe, up until now, I can always change something and make it better.
Something I would do differently next time, is create more mood boards, get some text together before I start the site. And maybe have a look at some more typographic styles. Also look at the latest trends on what does & what does not work on websites. If this site was to be built realistically I would create more pages which would make it easier for the user to navigate. I would create a map on which pages will link to where and also I would create an online chat.