Process Overview
Project Overview
.png)
Responsive Website Design
-
UX/UI Designer
-
WordPress Developer
-
Solo Project
-
Freelance Work for Client
1 month
-
Photoshop
-
Illustrator
-
Figma
-
WordPress
-
WooCommerce
About World of Savage
World of Savage (WS) is a small business that had been established just very recently. During the covid-19 quarantine, the owners - a young African-American family with full-time day jobs in construction and health care- decided to open an online apparel shop to the local community they are part of. WS would like to sell T-shirts and clothing items with edgy and cool designs and capture a younger audience and younger families with toddlers like the clients themselves. Since they don't own a physical store, they are looking for a responsive e-commerce website to sell their products online and, directly to consumers.
Objectives
-
Design a responsive e-commerce website that is simple, elegant, and pleasing to use that allows customers to browse through all products and easily filter by Product Categories.
-
Create a logo for the company that matches the owners' business vision while being visually attractive and looks cool on the products
-
Interviews
-
Market Research
-
Comparative Analysis
-
Create Persona
-
Site Map
-
User Flow
-
Branding
-
Wireframing
-
Hi-fi Mockups
-
WordPress Website
-
WooCommerce Store
1.0 Empathize
Since the client was a small business with very limited resources, they wanted to keep the process as budget-friendly as possible and they wanted to manage the billable hours for the design of their website in a way that there was not any willingness to spend resources on conducting primary UX research. That meant finding any research participants or recruiting potential users for the primary research or usability testing was not really part of the plan. But at the same time, there was this hope that the WS owners were very specific from the beginning that their target audience is people like themselves. So I began the process by having consulting sessions with them and not only I had a chance to discuss their branding strategies but also we could have an in-depth discussion as if they were the intended users and I was interviewing them.
​​
1.1 Interviews
The research goals were to:
-
Understand why people should choose to buy custom T-shirts at a small online shop like worldofsavage.com when they can probably get many more options at etsy.com .
-
Uncover the issues users face when purchasing from a small business.​
​
Summary of key findings:
-
People who are considered more socially responsible and care about social issues are more likely to support small businesses especially if they know that they are helping a family from an underrepresented population.
-
If a business’ website UIs are friendly and inviting as opposed to high tech and modern cold, people will get motivated to spend more time there exploring products.
-
The most desirable aspects or features of the e-commerce site should be: easy process for navigation and browsing the product categories, and an easy clear add-to-cart and check-out process.
-
Creating sense of trust and reliability play an important role when shopping at a smaller and less famous online shop who may not have as big of a customer service as a big retailer. Buyers want to make sure that they can be in direct contact with the seller if they face any issue with their experience so it is really important to include some direct means of communication with a support team at somewhere visible and accessible on the website like the footer besides the info on the contact page.
1.2 Market Research
I also wanted to conduct some secondary research to learn more about the custom t-shirt printing industry. This is what* I found:
(*source Grand View Research Report: Custom T-shirt Printing Market Size, Share & Trends Analysis Report By Printing Technique (Screen Printing, Digital Printing, Plot Printing), By Design, By Region, And Segment Forecasts, 2021 – 2028)
-
The global custom t-shirt printing market size was valued at USD 3.64 billion in 2020. It is expected to expand at a compound annual growth rate (CAGR) of 9.7% from 2021 to 2028.
-
There is an increase in the use of custom printed t-shirts to create social awareness, raise a voice, and support a cause. The increasing disposable income of consumers is enabling them to spend on customized clothes. As a result, people prefer wearing customized t-shirts with specific logos or slogans printed on them.
-
In the wake of the recent COVID-19 outbreak, while various outlets and large brand stores experienced a decline in customer footfalls and clothing demand, it has been observed that there was an increase in the demand for custom t-shirts from the e-commerce industry.
-
The graphic design shirts segment held the largest market share of more than 56% in 2020. The high share is attributable to the rising demand for custom t-shirts with pre-printed graphics. Graphic design t-shirts involve the printing of an existing design that does not require any further modifications. Such pre-printed graphic design t-shirts are preferred by customers who want the product immediately at a lesser price. The artwork segment is expected to emerge as the fastest-growing segment, registering a CAGR of 10.3% from 2021 to 2028. The growing preference of customers towards using t-shirts or other apparel to support a cause or deliver a message is expected to contribute to the high growth of this segment. The artwork segment involves custom artwork created by an individual to be printed on the t-shirt. Consumers who wish to print their designs or have a clear picture of the desired print are the potential customers of artwork designed for t-shirts.
​
1.3 Competetive Analysis
I researched some similar local e-commerce stores in Cleveland, Ohio as well as larger e-commerce platforms like Etsy to learn more about their strengths, weaknesses, and features. Although the direct competitions of e-commerce stores can be anywhere on the globe, the rationale behind choosing the local stores in Cleveland was the fact that usually small businesses tend to establish a relationship with the local community first and use similar channels of advertisement for their marketing porposes such as local social media forums, online newsletters and etc.
2.O Define
The second stage began with consolidating my research findings to define a user persona that would represent WS’ target audience of users, and followed with next stage Develop (3.0).
​​
3.O Develop
The third stage followed with the plans for the Information Architecture and flows of the website.
​​
3.1 Sitemap
3.2 User Flow
4.0 Design
The design stage involves the logo design for the business and the wireframing efforts.
​​
4.1 Branding
When I started working for my client, they already had a logo designed for them but they were not satisfied with how the logo looked and they felt it looked outdated and cliché. The client wanted to exude inclusiveness, nature and state of being natural, and connection to the community and people. The previous designer incorporated “Tree of Life” symbolism in the old logo. The real problem with that logo was that the visual design had very little to do with the type of products the store intended to sell which would have a more of an edgy cool vibe. I worked right away on some fresh ideas for how the updated World of Savage brand will use the visual designs in alignment with the values and vibe of the business.
​​
 Old Logo Incorporating Tree of Life Symbol, Looking Old-fashioned. |  Initial Hand Sketches for the logo |  Preliminary logo options presented to the client. The client's feedback was encouraging and they mentioned that they "immediately loved the concept." |
|---|---|---|
 Final Logo |
4.2 Wireframing
I started with a simple conventional wireframe for the front page but then after comparing the result against the earliest research and the needs of the persona, I changed some elements to have more alignment with the earlier findings. For example, the persona will be intrigued to purchase if she feels that there is something unique about the store so in 2nd iteration I added a section for the competitive advantages to show why our store is unique. Here, there is a chance to include some of the keywords that our persona might resonate better with according to her values. Also one of the frustrations of the persona for an e-commerce website is the trust issues, and requiring the user to create an account in order to do a purchase is a repeller factor. So in the second version, I eliminated the user account section. Also, in version 1, the abundance of call-to-action buttons is unnecessary and may suggest that we want to push users to view our products and this may imply the opposite of trustworthiness. Since our persona is more likely to make intuitive decisions, it would be much better to expose her to the products in a more subtle way rather than to push her to click on CTAs. So in the 2nd version, right after the competitive advantages section, I decided to include more rows of new products.
​​
4.3 High-fidelity mockups
I created polished high fidelity UI designs for both desktop and mobile versions of the home page, about us page, and shop page. So the client could get a feel of an actual website before I started working on the WordPress site.
5.0 Delivered Product and Challenges
.png)
Result
​
The final website has been designed by WordPress and Woo Commerce and can be viewed here. For testing the e-commerce store, a test product added to the shop section and I asked the clients and their friends to try to purchase that product and report any issues they face. In the future, if budgeting allows, conducting more usability testing and even A/B testing is recommended to ensure maximum sales.
​
The final design solutions respond well to the persona we defined, so theoretically speaking the website usability should be measurably usable.
​
Development Challenges
​
-
In the middle of WP development phase, the client ran into some issues with the hosting company. I recommended a list of hosting services based on my previous experiences. So, we had to migrate to the new hosting service which slowed the process because I had to learn how to do it properly without losing the progress we had had so far.
-
Although WooCommerce for WordPress plugin provides many useful features, the UI and visual design elements of some of the functions are not fully customizable and modifications require coding skills.
​​
6.0 Reflections and next steps
What did I learn?
-
I was able to apply UX design thinking and marketing methods across the site to create a website that is useful to the users and will also provide the client with a marketing tool.
-
As a freelancer, I learned how constant communication with the client plays an important role, especially when the project is in its infancy and even the client may not have a clear vision of what they want.
-
As a UX designer, I observed from the interaction of sample users (the clients) with the website elements and learned how simplicity and intuitiveness are important in an online store, especially for our target users based on the persona who consider time as a valuable resource and also are cautious of scams. They needed as little distraction as possible while they were using the website to be able to focus on the Info they were getting.
​
What are the next steps for the client?
-
A/B testing
-
Targeted Facebook and Instagram advertising. Also creating an online community through Facebook, Instagram, TikTok, etc. can boost the website traffic.
-
More content for the blog section (especially the social issues that are valuable to the socially responsible users)
-
Keeping in touch with interested users via e-newsletters to inform them about new products and promotions but not too frequently because according to the persona, receiving too many promotional emails is a true source of frustration. ​
Thanks for scrolling all the way!
All UX Projects
Virtual Tour App
Web Application