SB Uniform & Co.
(UI/UX Responsive Website Case Study)
SB Uniform & Co.
Uniting Passion, Powering Performance - Your Gateway to Premium Jerseys Online.
Overview: Crafting a responsive online platform was the key strategy, aimed at forging stronger connections with potential customers. Anticipating heightened brand visibility and an expanded clientele, this initiative sought to propel business growth while enhancing the
overall customer journey. The result: a robust foundation for sustained success in the future.
Role: UX Researcher, UX/UI Designer, conception to final prototype.
Duration: The project took 80 hours to complete.
Background: SB Uniform & Co is a local business that specializes in designing and creating high-quality jerseys for sports teams and clubs. Founded in 2022, SB Uniform & Co has built a reputation for providing exceptional craftsmanship and customer service.
The Process:
Discover
Competitor Analysis: Our research involved an in-depth examination of competitors in the sports jersey market. This analysis revealed key features and strategies employed by others in the field. By evaluating their brand identity, messaging, and user experience, we pinpointed opportunities for our website to stand out and deliver unique value to customers. We also discovered some major pain points:
-Outdated design
-Ineffective content organization.
Interviews: We conducted one-on-one interviews with a diverse group, including coaches, parents, players, teams, clubs, and schools. These conversations revealed crucial insights into the sports jersey online shopping experience, informing our design decisions for a responsive website tailored to customer preferences and needs. Here are few general questions that I included in all the interactions:
1- Can you introduce yourself and share your interest in sports jerseys?
2- How frequently do you buy sports jerseys, and what occasions prompt these purchases?
3- What features matter most to you when buying sports jerseys online?
4- What factors influence your decision on where to purchase sports jerseys?
5- Can you describe your ideal online shopping experience for sports jerseys?
Key insights: After competitor analysis and interview, these key insights served as the cornerstone for informed design decisions, ensuring our website resonates with our customers and enhances their shopping experience.
Define
Understanding the Problem: SB Uniform & Co, a local business, faces limited online visibility, hindering growth. The current website, not optimized for a diverse audience, hampers effective brand communication, leading to missed sales opportunities. Our goal: optimize their website for wider reach, improved brand communication, and increased sales opportunities.
Vision and Solution: In response to the challenge, our solution involves enhancing SB Uniform & Co's online presence through a responsive website, leveraging their established brand and UI for consistency. We prioritize effective communication channels to understand client requirements, ensuring a website design that not only meets their needs but also aligns seamlessly with their brand, fostering customer attraction and business growth. Our approach underscores strong design thinking, evident in both the website design and the comprehensive user research process presentation.
User Persona: I crafted a user persona to remind me of the needs and pain points of my target audience and ensure a user-focused approachthroughout the project.
Sitemap: Then I worked on sitemap. A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them.
Ideate
Wireframes and Prototyping
Lo-Fi Wireframes:
Lo-Fi Wireframes(Mobile Version):
Hi-Fi Wireframes(Desktop Version):
Hi-Fi Wireframes(Mobile Version):
Design system language: I established a design system language to maintain consistency in future updates.
Prototype: Experience firsthand—try our app prototype for a glimpse into seamless functionality and user-centric design.
Test
During the project, we conducted usability testing to assess the app's user interface and overall user experience. Here's how we executed the testing:
1-Method: We created interactive prototypes of the app to simulate its functionality. These prototypes allowed users to perform tasks, such as viewing the portfolio, submitting an order request, and making a purchase, within a simulated environment.
2-Participants: We assembled a diverse group of participants, encompassing coaches, players, and parents, in order to conduct a comprehensive evaluation of the responsive web design.
3-Testing Session: Each testing session was conducted remotely, with participants accessing the prototypes from their own devices. We observed participants as they interacted with the app and performed specific tasks.
4-Tasks: Participants were given three specific tasks: viewing the portfolio, submitting an order request form, and making a purchase. These tasks were designed to assess the web designs functionality and user-friendliness in key areas of the user journey.
5-Feedback: We encouraged participants to provide feedback during and after the testing sessions. This feedback included comments on usability issues, design preferences, and overall satisfaction with the responsive web design.
6-Analysis: We analyzed the data and feedback collected during the testing sessions to identify usability issues, areas for improvement, and aspects of the responsive web design that performed well. This analysis informed iterative design changes to enhance the user experience.
Iteration
Our iterative approach involved optimizing the size of the portfolio item to ensure it could be viewed without the need for scrolling or being cut off. This adjustment aimed to provide a seamless and visually appealing user experience, allowing users to effortlessly explore the portfolio without any hindrance.
Before
After
Conclusion
Through this project, I've learned the vital role of user-centric design, adaptability, and collaborative efforts. These insights will shape my future focus on refining interfaces, ensuring brand consistency, and broadening web design capabilities. Reflecting on the project, I recognize the importance of meticulous planning, clear communication, and collaborative client engagement.
Key takeaways include adept project management and the value of adapting to constraints, guiding my approach to ensure successful outcomes.
I take pride in delivering a responsive web design that not only met client needs but also aligned with their brand identity, highlighting the impact of effective collaboration and design thinking in digital solutions.
