Slide 16_9 - 1 (7).png
iLike Website
Design

Project overview

             The problem

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.

             The goal

Design a user friendly website for iLike clothing store that allows users to choose clothes and easily customize them and place a order.

              The product

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.

           My role

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

             Responsibilities  

➔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

             Project duration

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

1
 
Hard to complete payment process

It gets frustrated when I have to insert same address for billing and shipment

2
 
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

3
Persona: Sam
Problem statement:

Sam is a university student who needs customised t-shirts because customised quotes on clothes gives him confidence in  studies.

Screenshot 2021-05-23 at 4.01.07 PM.png
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.

Screenshot 2021-05-23 at 12.23.48 PM.png

Prototyping 

Paper wireframes

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

IMG-9138_edited.jpg
IMG_9204_edited.jpg
Digital wireframes

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.

Check here to check all digital wireframes

Wireframe
Wireframe
wireframe
MacBook Pro - 4.jpg
Mockups & High-fidelity prototypes
Web 1920 – 1.jpg
Screenshot 2021-05-23 at 7.50.03 PM.png
Accessibility considerations
Readability is considered using a strong contrast ratio (4:1) of the colors for the relevant elements (like  view cart button).
1
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.
2
Used icons to help make navigation easier.
3
Takeaways
Impact

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.

Let’s connect!

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.

Email: uddin.mnu@gmail.com

You can also buy me a coffee here: www.buymeacoffee.com/Nizamuddn