Tikepa
UX/UI Design | Case Study
Best viewed on: 🖥️ Desktop
E-commerce website design I did in collaboration with my classmates during the UX/UI Design course at SAE Institute. In this project, user experience (UX) considerations are prioritized, such as intuitive navigation, clear product categorization, and seamless checkout process. The UI design phase focuses on selecting appropriate color schemes, typography, and visual elements to evoke a sense of style and authenticity.
E-commerce website Tike.pa
The goal of the UX research and UI design process was to create an engaging and user-friendly online shopping experience. The research phase begins with gathering insights into user preferences, behavior, and expectations through surveys. This data helped us identify pain points and opportunities for improvement.
The UI design process started with wireframing and prototyping, focusing on intuitive navigation, visual hierarchy, and seamless interactions. Attention is given to factors like responsive design, accessible typography, and high-quality product imagery.
The goal is to create an aesthetically appealing and functional interface that enhances the overall shopping journey, leading to increased conversions and customer satisfaction.
Defining client’s needs
Client vs User
Survey
Meeting the User
User Research
Conclusion
Thanks to this survey we found out that our potential buyers are mostly young women, age 25-35 who prefer brands such as Nike or Adidas and choose sneakers based on design and functionality. Our potential users wear sneakers daily, they buy them once or twice a year and their overall experience with online shopping is something in the middle, marked with 3 stars. They are also marked, as ”very important”, free shipping. Price is important to them too, and they look for discount prices.
Knowing this, we decided to offer various affordable sneakers and to have a special section – Outlet. Offering free shipping was a good thing to include. Because our buyers are mostly millennials, we decided to make a modern-looking website.
Defining a User
Persona
Meet Ina, a vibrant young woman who effortlessly combines style and comfort in her daily life.
Her unique sense of fashion is characterized by a mix of contemporary streetwear and a touch of urban chic. Ina understands the importance of quality footwear, but as a budget-conscious individual, she seeks out affordable options that don’t compromise on style or durability. Whether she’s exploring city streets or meeting up with friends, Ina always dons a pair of sneakers that effortlessly complement her outfit.
Empathy
map
Customer
journey
Card sorting
Must Have Vs
Nice to have
In this part of User experience design I started defining what are the necessities for the website to launch. Keeping in mind that the deadline is usually very short, I included only basic functionalities and content.
Purple cards represent all the functionalities the website will have, while greens are the content part of the site. In the future, this website will include Blog and Newsletter in order to rank higher in Google search, but also to build the user base.
Wireframing
Wireframing plays a crucial role in designing a captivating and user-friendly sneaker website. As an expert in this field, I’ve recognized the significance of creating a seamless user experience that showcases the latest sneaker releases and entices visitors to explore the website further.
Through wireframing, we are meticulously planning the layout, navigation, and key features of the website, ensuring a clean and intuitive interface. By visualizing the website’s structure and functionality through wireframes, we can optimize the user flow, streamline the shopping process, and create a visually appealing platform that captures the essence of the sneaker culture.
UI - Visual Design
The visual design process for Tike.pa e-commerce website involves creating a visually appealing and cohesive aesthetic that engages the target audience.
Attention is given to selecting high-quality product imagery that showcases the sneakers in an attractive and captivating manner. The visual design process also included creating a consistent visual hierarchy, ensuring that important elements like calls-to-action, product details, and navigation are easily distinguishable.