Overview:
Considering the fact that online shopping can be a challenging experience for some people, we have developed a user-friendly and visually appealing webpage specifically for purchasing sports items. This webpage aims to simplify the process of online shopping for sports enthusiasts and provide them with a seamless experience.
This project's scope involved the creation of a digital product for an actual client. To achieve this, we performed a comprehensive set of activities that included conducting user research, performing interviews, and building user personas to gain a deep understanding of user behavior. Subsequently, we created a site map, and user flows, low-fidelity and high-fidelity interfaces, branding elements, and prototype interactions using Figma. Finally, we conducted usability tests to evaluate the product's effectiveness.
Time Frame: 1 week
Role: Product designer, Product Strategy, User Research, Interaction, Visual design, Prototyping & Testing, Information Architecture
Team: Alessandro Almeida, Aline Ezzeddine, and Daniela Teixeira,
Mentor: Bruno Pavani
Client:
PoliEsportes is a family-owned retail business specializing in sporting goods and equipment. They offer a physical store where customers can browse products, touch them before purchasing, and receive assistance from a customer service representative.
While PoliEsportes uses social media for sales and customer service, they find it inefficient without a dedicated vendor or attendant. The person managing the phones and social media must make time to respond, risking lost sales and customers if response time is delayed.
Empathize:
We started our design thinking process by brainstorming and gathering information about our client and his business. Our goal was to understand the user’s main pain points while shopping online and work towards aligning the solution with the business purposes of our stakeholders.
During our discovery process, we started with brainstorming and writing down all the information we had about our client and his business. Then we wrote on our Figma board all the possible needs our users want fulfilled.
After digging deep into our minds, we came up with some assumptions and pain points that would be interesting to start with.
To give us a better view of the case, we went browsing online to collect more information about e-commerce and how competitors operate.
For example, we found in online research that:
According to rockcontent "64% of Brazilians prefer to shop online, with 53% accounting for customer reviews and a 48% increase in online sales from 2020 to 2021. The main reasons for shopping online were convenience, prices, and reviews."
In order to gain a better understanding of our users, we conducted interviews and surveys to identify their needs and pain points when shopping online.
Research:
To improve our product, we sought to understand the perspectives of both the business and clients.
Following observation and interviews, we identified four core needs of our clients:
Faster and more affordable delivery.
Varied payment methods.
Access to specialized vendors for clarifications.
Greater product variety.
We also identified four pain points:
High delivery fees.
Long wait times.
Difficulty evaluating products.
Lack of trust in online payment platforms.
Our clients’ central pain point was imprecise product descriptions and inadequate delivery terms for sporting goods. After validating these needs and concerns, we aim to address them by providing the necessary information during purchases and improving delivery conditions.
Definition:
Using all the information we collected, we completed our CSD matrix to organize our thoughts and focus on our users’ main pain points. To empathize with our users, we have created a primary user representing them: “Pedro,” a car salesman with one child. He is an avid sports fan who likes to watch and play football games with his son. He wants to shop online for items he can’t find in his area. But the delivery fee is often too high, and the delivery time needs to be more precise. He prefers to search for stores close to home to analyze the products and clarify doubts with the vendor.
Persona:
“Pedro would like to shop online without leaving his house, but he feels that shopping for sporting goods needs to provide precise and clear descriptions of the products." Furthermore, the terms of delivery do not satisfy his needs.”
Ideation:
In the ideation phase, we brainstormed possible solutions and narrowed our options through design thinking techniques like Crazy 8’s and the Moscow technique. We created a sitemap and user flow to understand the core needs of the website and simulate the shopping journey from start to finish. Our final solution was a user-centered platform that addressed Pedro’s concerns and provided the best online shopping experience.
We proposed a solution that targets our users’ major pain points. We studied and analyzed the issues in-depth to provide the best solution. We offer a more informative product detail platform to meet client's needs and the option to contact specialized vendors directly. Improved delivery conditions depend on a third party, as driver rates, traffic, and delivery routes impact delivery prices and speeds.
Prototyping:
To develop the optimal solution, we held brainstorming sessions that generated numerous features, but based on our research, we identified the key areas to concentrate on. Additionally, we created a site map and user flow to visualize the user’s engagement with the platform and potential routes toward completing a purchase.
Our platform’s design employs a clean aesthetic highlighting each product, using clean lines, straightforward typography, and neutral colors. The product cards offer a good image of the product and enough details to satisfy our client's need for information. The footer includes payment methods, helpful information about the business, and contact information. The CTA buttons are colored a bright blue that pops out during the purchasing process. After adding an item to the cart, the user signs in, choose a delivery address and payment method and validates the payment to complete the purchase. We’ve solved our first problem, the need for information, and now focus on providing better delivery conditions. Delivery times vary depending on location, but all orders within the metropolitan region can be delivered within five working days. Clients who want faster delivery can pay an extra fee to receive their purchase within one working day or pick up their purchase at the store.
Wireframe:
Hight-Fidelity:
Usability Test:
Exciting news! We just completed the first step in bringing our Webshop to life and testing our prototype. We simulated a customer's journey when purchasing items, and the results were enlightening. Our usability test involved five potential users, and we quickly discovered a few hiccups in the flow. But we didn’t let that dampen our spirits. We rolled up our sleeves and made some adjustments to improve the accessibility, including tweaking font and button sizes.
And to top it off, we added helpful feedback to guide the user throughout the purchasing process and let them know their next move.
The grand finale presented our findings to our stakeholder, who was thoroughly impressed. The ball is now in their court as they weigh the potion of implementing our design.
Next steps:
we could improve even more! Given the time and resources, we could:
Make a user-friendly mobile app (mobile-first, of course!)
Concept testing to ensure we’re on the right track.
A wish list for customers to save their favorite items.
A top-notch customer support team.
A chatbot automation system to make your life easier.
More user tests to refine and perfect the product.
A responsive design that adapts to any screen size.
Final thoughts:
To create a successful and user-friendly e-commerce platform, it is essential to prioritize the needs and pain points of the users, such as the need for detailed product information and better delivery conditions. Through effective prototyping, testing, and incorporating stakeholder feedback, adjustments can be made to improve the overall user experience. Additionally, working with real stakeholders and understanding the business’s limitations and abilities can provide valuable insights and creative solutions to overcome obstacles. Finally, a cohesive and productive team workflow and regular evaluation and reflection can lead to successful project outcomes.