.png)
Introducing HUB
HUB is one stop shop for all your fashion and lifestyle needs. HUB aims at providing a hassle free and enjoyable shopping experience to shoppers across the country with the widest range of brands and products on its portal.
ROLE:
UX/UI Designer
YEAR:
2022
TOOLS:
Figma, Canva, Miro, Keynote, Marvel, Google Drawings
Duration :
2 Months
Overview
The word HUB means the central or main part of something. Here HUB signifies one of the largest fashion e-commerce stores that deals with a wide range of fashion and lifestyle products for men, women, and kids. It sells high-quality clothes, branded footwear, bags and backpacks, beauty and personal care products, home and living accessories, and more.
Deliverable
Create High-Fidelity Mockups and a Visual Style Guide for the deschool.ca website.
Design Process
-
Understand the project requirements, business goals, and target audience.
-
Conduct user research, interviews, and surveys to gain insights into user needs, pain points, and behaviors.
-
Analyze competitors and industry trends to identify opportunities and challenges.
-
Create user personas and scenarios to represent the target audience and their goals.
-
Define the project's scope and objectives.
-
Establish the project's timeline and resources.
-
Develop low-fidelity wireframes that outline the layout and basic functionality of the product.
-
Focus on user interactions and the overall user experience without getting into visual design details.
-
Iterate on the wireframes based on internal reviews and feedback.
-
Develop the visual design elements, including colors, typography, icons, and imagery.
-
Create high-fidelity mockups that incorporate the visual design and branding.
-
Ensure consistency and alignment with the established brand guidelines.
-
Work closely with developers to ensure the designs are implemented accurately.
-
Provide detailed design specifications, assets, and documentation for development.
-
Collaborate with the development team during the implementation process.
-
The e-commerce clothing market is highly competitive, with numerous established players and new entrants constantly vying for consumer attention.
-
Providing a seamless and enjoyable user experience is crucial for e-commerce apps.
-
Customers expect easy navigation, quick loading times, high-quality product images, and intuitive design.
-
Displaying clothing items effectively online can be difficult as customers cannot physically try them on or feel the fabric. High-quality images, detailed product descriptions, and even virtual try-on technologies are used to address this challenge.
Goals
-
Establish a strong and recognizable brand identity that sets your clothing brand apart from competitors.
-
Focus on providing top-quality clothing items that meet or exceed customer expectations.
-
Create an intuitive, user-friendly, and visually appealing e-commerce website. The website should showcase your clothing collections effectively, have easy navigation, and provide a seamless shopping experience.
-
Embrace sustainable and eco-friendly practices in your clothing production and supply chain.
-
Develop a comprehensive digital marketing strategy to drive traffic to your website.
User Research
User research for an online shopping app is essential to understand the needs, preferences, and pain points of the target audience.
Target Audience: Consider factors like age, gender, location, shopping habits, and technological proficiency.
User Interviews:Conduct one-on-one interviews with potential users to gather in-depth insights into their shopping habits, preferences, pain points, and expectations from an online shopping app.
Focus Groups: Organize focus groups to facilitate group discussions and capture collective opinions about the app's features and user experience.
User Testing: Observe users as they interact with a prototype or the app itself to identify usability issues, navigation challenges, and areas of improvement.
Competitive Analysis: Study other successful shopping apps and identify best practices, features, and design elements that can be incorporated into your app.
Usability Testing: Conduct usability testing sessions with real users to evaluate the app's ease of use, navigation, and overall user experience. Identify pain points and areas where users might get stuck.
Prototype Testing: If possible, create a prototype of the app to test early iterations with users. Gather feedback and make necessary adjustments before the full development.
-
18-34 age group comprises tech-savvy individuals who are early adopters of new technologies. They are comfortable with online shopping and tend to be more active on mobile apps.
-
35-54 (Adults): This age group represents working professionals and parents who often have higher purchasing power. They appreciate the convenience of online shopping apps to buy a wide range of products.
Mid - Fidelity Screen
Usability Tests Methods
I plan to use moderate and remote non-moderate evaluation methods to conduct user tests for my HUB online shop app prototype. The first choice concerns the initial phase of my prototype, where some specific functions have not yet been worked out. Engaging with participants, during user testing, will help me to develop the app's functions more specifically. To avoid certain problems,
I will take the following steps:
Programming 20-minute test sessions with a 10-minute agenda so that I can ask more questions, while ensuring the meeting does not last too long.
Aim for a diverse group in terms of age, technical expertise, and familiarity with similar products. Typically, 5-10 participants are sufficient to identify major usability issues.
I will ask the participants for their feedback on the overall experience, likes, dislikes, and any suggestions for improvement.
By following these steps, I can gain valuable insights into the usability of my UI/UX design, make data-driven improvements, and create a more user-friendly and engaging interface of my target audience.
Usability Tests Results
Participants. Age. Profession.
1. Lara Hiden 23 MBA Student
2. Karan Patel 25 Engineer Student
3. Hela Shroff 28 Fashion Designer
4. Priya Mehra 19 Professor
5. Neil Bell 28 IIT Professional
Positive Feedback :
The mid-fidelity design of the app is impressive! It strikes the perfect balance between simplicity and functionality, making it easy to navigate The mockups are visually appealing and give a great sense of what the final app will look like.The user flow is logical, and I appreciate how each screen seamlessly connects to the next. It feels intuitive and user-friendly.
Improvements :
Ensure that users can easily find essential sections like Home, Categories, Cart, and Account. Enhance the search feature to provide more relevant results and implement auto-suggestions to help users find products faster.
Double-check that the app's design is fully responsive and optimized for various devices, including smartphones, tablets, and desktops.
Mood Board
Style Guide Logo & Icon
.png)
Typography
Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader.
COLOR PALETTE
A combination of colors used by UI designers when designing an interface.
HEX: #FE3132
HEX: #3F90A9
HEX: #BFD8E0
HEX: #94FFCB
HEX: #FF9494
HEX: #B5B1FB
HEX: #F4FCFF
IMAGERY
By using imagery, designers can paint a detailed and immersive picture for their users, allowing them to experience the story or concept on a deeper level.
FINAL SHOWCASE
.png)
Thank you for your patience
