Colourful customisable running tights
1. Design a responsive e-commerce website that is easy to use and allows customers to browse through products and filter by print, style, etc.
2. Extend coherent branding that aligns with the shop’s current clientele and customer experience.
UX/UI Design
Research
Figma
JotForm
Lucidchart
GlooMaps
Pen & Paper
Run Amok Tights
3 Mar 2020 - 5 Apr 2020
(4 weeks / 80+ hours)
Kieran Black
Run Amok Tights is an Australian online activewear shop targeting those who are looking for colourful running tights. The items are customisable; customers can choose size, length, waist height, and whether to attach pockets with prints that are bright, fun, and a little quirky.
Run Amok is very successful and has been growing steadily. Their customers come from the runner network, social media, or word of mouth, and orders are made online, which makes their website the key to the business and branding. However, the business does get enquiries from confused users about the website or what is actually explained on the website. Run Amok is happy with the current logo, but is seeking to have a professional looking, easy to use website created.
Create a responsive website that allows the user to easily shop for the tights and other products.
I believed I was quite familiar with the apparel industry, however not with the activewear industry. I decided to conduct 3 different types of research: market research, competitor analysis, and surveys.
To have a better understanding of the industry and trend, I began this phase conducting market research. By researching online, I gained additional knowledge including the followings.
Most activewear companies focus on 3 main targets:
1. Teens, young women, and serious athletes.
2. 25 to 29-year-old individuals purchase most frequently across all demographics.
3. Sustainable fashion is a major trend in women’s style.
I worked on a competitor analysis to know the current position of the business and how other businesses solve their users' problems. The below is a snippet of the analysis conducted by visiting competitors’ websites and analysing.
I tried to focus on major activewear brands as well as a customisable clothing brand for competitor analysis, as there are not many similar business that offers customisation specifically in the running tights industry. Through this deliverable, I learned it was important to consider what brand message is to be promoted.
I created surveys based on the market research and competitor analysis to gather more insights on motivations and pain points around activewear shopping.
To define the audience a little more, I recruited individuals who have shopped for activewear, which is broad, but included questions such as whether they have purchased workout tights or where they usually shop.
Some key takeaways are as follows:
1. Users shop at least once a year. Most users do not purchase activewear more often than every few months.
2. No male participants have purchased tights before while almost all females have.
3. Precise and honest product details as well as clear return process are appreciated by users.
4. Honesty, simplicity and trustworthiness are the key.
Pain points include unclear display of in-stock item.
From the research conducted, the problem statement below was formed:
1. How might we empower the user to make confident decisions?
2. How might we build trust with the user?
3. How might we have clear communications about items?
Using the research findings and patterns, I created 2 personas to cover different types of users that revealed in the research. The quotes were derived from qualitative questions in the survey.
Creating personas for this project allowed me to learn that it was better to have more personas when working on a broader target market, to which a variety of users belong.
I decided to build a customer journey map so that I could follow the customer journey from the beginning to the end from the user's point of view and empathise deeper with the user. The map was built based on the persona and research.
I learned that, similar to other e-commerce websites presumably, the user becomes more frustrated and less happy towards/around the payment and waiting period. This is something I need to be careful while designing the pages.
Because of the nature of the business, selling customisable products, I needed to create user flows rather than task flows to include pages, user interactions and decisions. Below shows the successful/happy paths of Chloe and Malinda.
I was able to consider what possible path the user can take by creating the flows.
I created a sitemap to visually organise the structure of the new website. By reviewing what is included in the current website, I was able to see how the website can possibly be improved in terms of information architecture.
Before building mid-fi wireframes, I sketched some ideas out for the new homepage to brainstorm how the elements can be placed within the homepage. Because the unique and colourful prints are the main selling point of the business, I wanted to include the print gallery or carousels to display the fun fabrics.
Reviews of the shop were also important, considering a lot of the customers are coming from the runners’ network and word-of-mouth.
Another important section to note here is that some of the customers may not be familiar with how to order an item on the website, as it is made to order and customisable. I needed to include "How it works/How to order" to educate the customers and navigate them in the right direction.
Using the sketches, I built mid-fi wireframes for the key pages during browsing to start placing key elements within the pages. These were the pages where the website becomes the main touchpoint, which was revealed in the customer journey map.
I decided to use a large hero image at the top for the homepage to avoid giving the user a cluttered impression while displaying different styles to shop below it. With the client's idea, I placed the running and smiley emojis in the text to convey the fun impression.
I was aware that the current website has large and clear display of the fabrics, which I thought should be kept in the new design for both new and existing users. The current item page requires the user to choose from some options, such as size, length or pocket, and I put those into dropdown boxes so it indicates the user needs to take an action and takes up less space.
The mid-fi wireframes were tested to see how easily the user can complete their tasks while navigating through the structures without UI design.
During the test the participants were asked to complete 3 different tasks using a prototype and share any thoughts or feedback they had. I focused especially on collecting thoughts on the product page, as it is the key page of the customisable features. The test was conducted online using Figma prototype and Zoom screensharing.
Some of the main takeaways are as follows:
1. There are no major issues with the structure of the website.
2. Each participant had a different path to complete the tasks.
3. Women’s Range and Product pages can be improved with more precise descriptions and photos when creating visual design.
4. Prints page should be linked somehow to product pages, so the user can easily proceed to purchasing when they have found a favourite print.
I created a mood board on Pinterest to gather inspirations and build up on the visual design side. I focused on colourful and fun images and inspirations to convey the brand message when creating the mood board.
With the mood board created, I learned that the website can use a variety of colours, but needs to have a balanced amount to let the fun prints speak themselves.
While I was aware that the product images were very colourful, I wanted to use the colours that are in the existing logo, as that is part of branding. Each product has a tag with the current logo printed and that is something existing customers associate the brand with.
For typography I picked Proxima Nova so it is simple enough, but fun and easy to read.
I created the UI kit below to include the UI elements used in the website design.
By creating this, I was able to find inconsistency in my design and fix it, which was helpful working towards to final design.
To create something colourful and fun but not make it cluttered, I decided to utilise curves rather than straight lines with the help of my mentor Kieran.
The client also gave me insights on the customers’ colour preference, which allowed me to create the below.
I learned how to balance the amount of total colours used, including the ones in the photos, by filling icons or parts of backgrounds with selected colours. This was not easy and required some iterations.
The final prototype was not tested, as I have tested the mid-fi wireframes and based on the feedback received from the test participants I was confident that there would not be any issues with the design.
Run Amok Tights was the first project that I worked on with a real world client. It was challenging to work with the existing branding and re-designing, but very rewarding.
One of the challenges was to find the balance to make the colourful products stand out, but avoid making it cluttered so the user can easily browse and make a confident decision. If time allowed, I would test the final prototype and make sure there are no potential issues.
Some key takeaways are:
1. Communicate often with the client to keep them updated on the progress.
2. Try not to change everything in the website when working with the existing logo or branding.
3. Analyse where the user has frictions.
The next steps would involve:
1. creating additional pages or features.
2. testing them again to continue improve the design.
