Imagine the ability to create a totally custom t-shirt. You choose the material and style of the t-shirt, and then the image or graphic you want on the front and/or back. This is the ultimate form of expression. There are no limits to what you can communicate. Some people might show their fanaticism for a particular sports team, others a musician. Or you might have a social message or cause on your shirt. Whatever you may decide, you can print any image on your t-shirt.
Design a user friendly website for iLike clothing store that allows users to choose clothes and easily customize them and place a order.
iLike is an online clothing store that sells clothing at affordable prices. The typical user is between 18-30 years old and most are college students or early career professionals. iLike website is designed to make shopping fun, fast, and easy for all types of users. The site allows users to shop for clothing from different designs, styles, and gives users suggestions for putting outfit pieces together.
Design a clothing web application from the formation of the idea to the end of the design process.
➔ UX Researcher
➔ User Flow
➔ UX/UI Designer
➔Conducting interviews for foundational research
➔Creating paper and digital wireframes
➔Making low-fidelity prototypes
➔Conducting usability studies
➔Taking into consideration of accessibility
➔Making mockups and high-fidelity prototypes
April 2021 to May 2021.
Understanding the user
User research: summary
My research goal is to better understand the problems from the users' perspectives when doing online shopping and customizing clothes and placing order.
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. The primary user group identified through research was university students and busy shoppers of all genders and backgrounds who want to have a fast, fun experience purchasing clothing from iLike website.
User research: pain points
Poor UX Design
Buttons are hard to push because there are lot of them or they’re too small
Hard to complete payment process
It gets frustrated when I have to insert same address for billing and shipment
Price are not shown on home page
If i wish to buy a product, then I have to add that product in cart to check it’s price
Sam is a university student who needs customised t-shirts because customised quotes on clothes gives him confidence in studies.
User journey map
Mapping Sam’s user journey revealed how helpful it would be for users to have a good interface for online shopping experience.
Taking the time to draft iterations of each screens ensured that the elements that made it to digital wireframes would be well-suited to address user’s pain point. The first wireframe on the left shows a totally different page than the others, the idea was to present a “menu alike” page
As the initial design phase continued, I made sure to base screen designs on feedbacks and findings from the user research, This is the focal point of the website, The user can see the Search tab with Suggestions and descriptions. When user clicks on suggestion, new window with related searches are opened, The core functionalities of the low-fidelity prototype connected the search user flow of browsing the products and selecting one product, so the prototype could be used in a usability study with users.
Mockups & High-fidelity prototypes
Readability is considered using a strong contrast ratio (4:1) of the colors for the relevant elements (like view cart button).
Both the desktop and mobile version of the experience seems to allow the user to navigate it easily. This has happened also to user which a lack of digital skills.
Used icons to help make navigation easier.
The website make users feel like iLike really thinks about how to meet their needs.
One quote from peer feedback
"The website made me more attractive towards customisation of clothes and it's so easy and fun to customise my own dresses! I would definitely use this app as a go-to for a custom clothes shopping"
What I learned:
I had fun designing iLike website as a fashion enthusiast but i also learned how to design responsive website and how mobile and desktop version might be quite different, both in the structure and in the user experience offered.
Thank you for your time reviewing my work on the iLike website design! If you’d like to see more or get in touch, my contact information is provided below.
You can also buy me a coffee here: www.buymeacoffee.com/Nizamuddn