Shop online with ease
Enhancing online shopping journey with a strong focus on user experience and convenience.
Platform
Timeline
My role
Researcher & designer
Apr 2023 - Aug 2023
Responsive web
The product
‘Crocotoon.’ - A website dedicated to selling creatively designed printed T-shirts online, tailored for a budding startup. The company collaborates with local artists to offer a delightful selection of animal-inspired designs that are both fun and inspiring.
The project's objective is to gain insights into users' requirements throughout their online shopping journey. Through the utilization of user-friendly and intuitive user interfaces (UIs) with minimal obstacles, users can enjoy an enhanced experience, from their initial browsing to a smooth checkout process.
fun, inspiring but also user-friendly
🐶 🐱 🦆 🦦
fun, inspiring but also user-friendly 🐶 🐱 🦆 🦦
Design goals
Developing an e-commerce website for a T-shirt business catering to active and trendy customers. The website is designed to:
Aiding users in browsing and purchasing T-shirts online through a reliable and trustworthy design layout.
Supporting users through the checkout process with a straightforward and efficient layout.
Assisting users in reviewing product details and available variants before making a purchase.
Design process
Understanding users
Ideation
Paper wireframes and responsive layout
Lofi: testing and iteration
Mockup: testing and iteration
Going forward
Understanding users
Research goals
Gain a broad understanding of the e-commerce landscape in 2023 (including trends, attractions, and motivations).
Gather user perspectives and feedback on the products available on the website.
Explore user experiences and insights related to online shopping (including behaviors, frustrations, and emotions).
Assess the impact and roles of social media in the realm of online shopping in 2023.
User research
Research questions
Have you engaged in online shopping recently, and for what purpose?
Which online platforms or websites are your go-to choices for shopping, and what's your typical spending range for each shopping session?
Do you purchase T-shirts online, and if so, are they plain or printed T-shirts?
When you encounter difficulties while making an online purchase, do you seek solutions to resolve the issue, or do you tend to abandon the purchase altogether?
Where is your usual location for online shopping? Is it primarily at home, or do you shop online while on the go?
Participants profile:
Who? Students and young adults with steady employment.
Where? Primarily located in university areas or trendy suburban areas.
Age Group? Individuals ranging from 23 years old to 33 years old.
Gender? Inclusive of both male and female participants.
Insights summary:
User research has shed light on essential requirements for e-commerce websites, as gleaned from users' feedback in face-to-face interviews. These include:
A reliable and trustworthy website layout.
Availability of promotional codes and affordable shipping options.
Product pages that are detailed and informative.
An efficient and user-friendly checkout system on the website.
Users’ pain points
Following initial round of interviews with real-time users, there are several common pain points on e-commerce sites that have emerged as key areas of focus:
Financial pain point
Users commonly prefer free or cost-effective shipping methods and are inclined to use coupon or discount codes when making online purchases.
To address this, it's advisable to offer a range of shipping choices and implement discount code features to cater to users' shopping motivations.
Process pain point
Users tend to abandon the checkout process if it is confusing or they are required to fill out forms more than once.
To solve this, it's important to have a clear checkout process and provide a convenient "save information" function.
Product pain point
Users are likely to abandon the checkout process if they experience a lack of confirmation and support, or if they encounter an unreliable web layout.
To tackle this issue, it is good to establish a user-friendly and consistent web layout for the product, which can enhance the user experience and reduce abandonment rates.
Support pain point
Insufficient product descriptions and details can deter users from making purchases.
To overcome this challenge, offering comprehensive product information, including clear descriptions, dimensions, user reviews, ratings, as well as high-quality product images and videos, can significantly assist users in making more informed purchase decisions.
Persona 1: Mary Tran
A young adult who relies on online shopping to accommodate a busy schedule
Mary Tan
32
Bachelor of chiropractic
Living by herself
Product manager
Secured shopping experience, good varieties and low cost shipping
Name
Age
Education
Family
Occupation
Goals
—
—
—
—
—
—
Unsecured shopping experience, high cost shipping fees
Frustration
—
Narative:
Mary, a part-time product manager and full-time student, leads a busy life with minimal time for personal activities. Given her tight schedule, she often turns to online shopping for her various needs and interests. Her priority is a secure and seamless checkout process, ensuring a smooth user experience during her online shopping sessions.
Persona 2: Robbie Tan
An online shopping spree lover who loves special deals
Robbie Tran
24
Bachelor of nursing
Living with his girlfriend
Part-time club worker
Quick and easy process, good deal and low cost shipping, well-match product
Name
Age
Education
Family
Occupation
Goals
—
—
—
—
—
—
Checkout problem with filling forms, sometime having problems with Afterpay method
Frustration
—
Narative:
Robbie, a part-time hospitality worker and full-time student, dedicates a substantial portion of his time to commuting between work and study. To fit his busy lifestyle, he seeks a swift and uncomplicated online shopping experience directly from his mobile phone. Additionally, Robbie is on the lookout for great deals and affordable shipping options to enhance his shopping ventures.
User journey map
Primary user story - Mary Tran
“As a full-time student with a part-time job, I want to shop online instead of going to physical stores to save time.”
Secondary user story - Robbie Tan
“As a full-time student with a part-time job, I want to shop online with discount codes to save more time and money.”
Problem and vision statements
Problem statement:
Users often encounter some hardships during their online shopping experience which prevent them from completing a purchase for their desired items on e-commerce websites.
Vision statement:
The development and design of the 'Crocotoon’ website will prioritize simplicity and user-friendly principles. The responsive web platform will feature an efficient and straightforward checkout process, ensuring a smooth experience for users.
Primary persona:
A busy student juggling academic commitments and a part-time job frequently turns to online shopping for convenience. With limited time for in-person store visits, she values reliable and trustworthy shopping experiences. Additionally, she seeks affordable shipping options to optimize her limited budget.
Secondary persona:
A busy student who also needs to balance study and life responsibilities seeks a straightforward online shopping experience. This persona has a keen eye for special deals, such as discount codes, to enhance his overall shopping spree.
Ideation
Competitive audit report
Competitive audit goal
Gain insights into the strengths and weaknesses of currently operating websites
Identify the distinctive features of competitors
Understand the methods employed by existing websites for product sales, and provide effective user assistance on these platforms.
Key competitors
Our key competitors are Threadhead, TeePuplic, and Uniqlo who focus on printed T-shirt e-commerce with trendy illustrations or artist-exclusive works. Uniplo is the strongest competitor among them with affordable prices and high-quality products.
Type and quality of competitors’ products
Threadhead offers a range of popular characters at the moment and they have high-quality product images for a better browsing experience.
TeePublic offers unique illustrations of artists from around the world. They have their business name listed in BBB (Better Business Bureau) which increases their credibility.
Uniqlo offers unbeatable price ranges for their products and world-known popular printed characters from anime to museum themes
How do competitors position themselves in the market?
Threadhead offers a middle-price range and high-quality T-shirts with both materials and prints to gain users’ satisfaction.
TeePublic offers T-shirts with lower price ranges targeting younger users.
Uniqlo has the strongest products on the market so far: the lowest price, high quality, and trendy themes.
How do competitors talk about themselves?
Threadhead markets themselves as ‘Satisfy and happy AF ‘ for all users.
TeePublic markets themselves with good quality products and support for Indi artists.
Uniqlo markets themselves as suitable for everyone and keeps customers centered on their business model.
Competitors’ strengths
Clean website layout and nice hero image to capture users’ attention
Good checkout process
Good product page with size and measurement infos
Threadhead
Keep the search bar big and centered
Keep it clear for users to see artist collections and categories
Listed in BBB (Better Business Bureau)
TeePublic
Simple website layout with separated man and woman sections
Listed customers’ reviews on the product page
Card design for each category and collection for better focus
Uniqlo
Competitors’ weaknesses
Font and colour choices are not working well enough together for contrast
Having other products displayed together with T-shirts (main product) could distract users
Threadhead
The image choices can be not eye-catching enough yet
Homepage is overwhelmed with too many colour choices
TeePublic
Need to have an account with them to checkout
Texts on top of images can be hard to read
Uniqlo
Opportunities
Better layout and combination of font and colour for better user experience
Threadhead
Better photo editing and colour choices for better user experience
TeePublic
Checkout as guest option to prevent abandon cart
Uniqlo
How can the findings benefit ‘Crocotoon’ design and layout?
Incorporating a hero image is crucial.
Carefully curate font and color choices to enhance the UI.
Avoid overwhelming users with an excessive use of illustrations and color combinations.
Prioritize clean and modern design for an improved user experience.
Ensure the checkout process features clear steps and allows for guest checkout.
‘How Might We’ questions
I explored a bunch of ideas to evaluate user experience of the website. It could be both positive and negative to tackle problems in different ways.
How might we create better engagement for users from the homepage?
How might we create a better and more secure shopping experience?
How might we create a logical checkout process for both users with and without an account?
How might we use colours and fonts to distract users from products?
How might we overwhelm users with too many product images on one page?
Crazy 8 activity for homepage layout
8 minutes for 8 ideas for homepage layout by answering the HMW (How might we) questions list.
Wireframes & responsive layout
Information architecture for Crocotoon
Considerations for the overall structure for the website:
Simple layout from the home screen
Simple layout for product page
Simple checkout process
Sitemap for T-shirt E-commerce website
Hierarchy and entire labelled pages for the website
Paper wireframes and responsive layout
Following the establishment of the information architecture for the Crocotoon page, I proceeded to draft paper wireframes for key pages, including the homepage, product page, and collection page. Presented below is a responsive layout example for the homepage in three versions: desktop, tablet, and mobile (arranged from left to right).
Digital wireframes and responsive layout
Homepage
Focus on the big hero image at the top of the page, followed by the main collection tiles featuring images, titles, and descriptions. Users can easily see the core benefits and have the option to subscribe to the newsletter.
Collection page
At the top of the page, there's a collection cover accompanied by a brief description to provide users with an overview of the products they are browsing. Users can seamlessly select sizes and colors for items and add them to the cart without needing to navigate to a separate product page.
Product page
Breadcrumb links and product name stay on the top left corner for better navigation of users across pages. The product page is thoughtfully designed with large images, detailed descriptions, and user reviews, enabling users to gain a comprehensive understanding of the item before making a purchase.
Lofi: testing & iteration
Usability study for low fidelity
Research goals
The e-commerce website caters to an online T-shirt business, and our goal is to assess the users' ability to effectively browse the product selection, make product selections, complete the checkout process, and successfully make payments using the Lo-fi prototype. Additionally, we aim to identify any challenges or difficulties that users may encounter throughout this process.
Research questions
Can users successfully select and purchase products from various starting points on the website?
Can users smoothly complete the core tasks of the e-commerce site, including product selection, choosing size, color, specifying quantity, and successfully checking out without encountering difficulties?
Do users encounter any issues during the checkout process, such as problems with button selection, page navigation, or form completion?
Does the website effectively present all essential information for an e-commerce platform, including collections, products, pricing, and shipping details?
Key performance indicators
Conversion rates (how many users are able to finish the checkout process)
Time on tasks (how long it takes users to finish a task or navigate through the page)
User Error rate (how often users make mistakes across the page)
Participants
2 males, 2 females, 1 non-binary person who is between 23YO to 35YO, university students, or office workers.
Participants would shop online on average once a month for clothing, accessories, or homewares.
Limitation: the test can’t be carried out for disability users yet.
Findings
Links to products should be embedded in the product image.
The hero image and button are not clear enough yet.
There is a pattern in users’ behavior of selecting sizes in circles and colours in squares.
Participants had trouble understanding dummy text and empty frames for images during the test.
Lofi iteration
Lofi iteration would help define a better design scope for the mockup development phase. It is time and cost efficient for iteration of the website from an early stage. Below is an example of improved lofi version of the homepage after the usability test
Bigger hero image, collection description and button are place next to each other.
Full description of products and collections and button meaning are added
Added bestsellers section
Mockup: testing & iteration
Design system
Fonts and colours choices are based on what the users want from the user research results. UI components should create a relaxed and reliable sense for the users. Yet it still needs to be modern and a bit playful to match with the core ideas of the start-up’s brand and identity.
Mockup testing findings
Users prefer to see shipping fees at the beginning of the checkout process so they can know their total fees.
The hero image is not clear with the collection name or its purpose.
The home screen needs to indicate more promotions and available promo codes.
Mockup iteration and final design
After several rounds of usability studies, there are some noticeable fixes to apply to the mockups of the Crocotoon website. Such as
checkout steps orders
homepage hero design and its purpose
implication of the upper header bar and promotions for users
Home page
Improved hero with clear indication for users
Added promotions to increase interactions from users
Clear Image tiles and description for each item
Core benefits of products to get users’ attention
Product page
Breadcrumb links and clear product title
Big product images and buttons for better user experience
Clear descriptions like material and size chart of the product
Suggested similar products for more browsing
Collection page
Clear collection title and description
Each item separated in row form
Sizes and colours are included for selection
Shopping bag
Clear title, image, and unit price of each item
Indicate subtotal and amount of items
Checkout
Clear checkout process with steps for user ease
Shipping at first step for total payable amount
Going forward
Impacts
After the last round of testing and iteration, I conducted a quick test of the final design on a group of people and there were improvements in the usability of the Crocotoon website. The final design helps users go through the checkout process easily. Users can always see descriptions and information about products across the pages. Most users rated the website from 8 to 9 out of 10 and would come back to explore more when the product is out on the market.
What I learned
The project helps me understand the trends and habits of online users towards e-commerce sites. I understand more about the importance of usability study before and during the design process. Without the studies, the project’s direction would be vague and pointless. The process would be meaningless without them because the product could not serve the users’ needs.
Next steps
Incorporate animations throughout the page to enhance user engagement and interaction.
Create handoff document for developers.