Infiniti Touch
Creating a competitive e-commerce webpage for a maternity bra startup, providing a competitive web presence.
Creating a competitive e-commerce website as unique as the product itself.
In today's competitive e-commerce landscape, innovation is key to standing out. Our startup sought to revolutionize the maternity wear market by introducing a groundbreaking customizable bra designed to grow seamlessly with a woman's changing body throughout pregnancy. By combining the comfort of traditional bras with the adaptability of customizable options, the client aimed to create a superior product that catered to the unique needs of expectant mothers.
My team was tasked to create an e-commerce landing and catalog page showcasing the unique design of this product while providing a competitive web presence. To ensure a successful launch, we employed a comprehensive research strategy, including user interviews, A/B testing, and usability testing, to optimize our web presence and deliver a seamless customer experience.
The Challenge
-
The client was seeking a desktop and mobile competitive online presence with a consistent theme- modern yet recognizable as soft and feminine. It should include a home page, product listing and description pages, and Fit Quiz. About Me and Blog pages were also desired but optional.
-
The website needed to be as comfortable as the bra our clients were offering, and able to be adjusted as their product line grew.
-
It should allow for customers to feel as though they were part of a larger community of moms offering education and support.
Solution
A responsive, user-friendly e-commerce platform that:
-
Reflects the brand's feminine and modern aesthetic.
-
Provides a seamless shopping experience across desktop and mobile devices.
-
Features a customizable Fit Quiz to help customers find the perfect bra.
-
Offers a comprehensive product catalog with detailed descriptions and high-quality images.
-
Includes a blog and "About Me" section to foster a sense of community and provide valuable information.
-
Is scalable to accommodate future product expansions.
-
Prioritizes ease of use and navigation to create a comfortable and enjoyable shopping experience.
Tools
-
Figma,
-
Zeplin
-
Miro
-
Wrike
-
Slack
Team
-
2 Researchers
-
3 Designers
-
Project Owner
-
2 Stakeholders: the clients
Timeline
-
Design: 6 weeks
The Process
Understanding the User (Persona Mapping Workshop)
Brand Tone
There seems to be two distinct trends: soft and feminine or strong and empowering.
What other options could be explored?
Insights
CTA/ Navigation
CTA must be clear, distinct and dissimilar to other features, especially when adding merchandise to the cart.
It was discovered that a few of the competitors we looked at lacked that distinct CTA "Add to Cart" button and the team determined that it could lead to confusion by the user.
Imagery
Users want to be seen and represented. Therefore, diversity in images needs to be a focus for our brand.
Some of the competitors we looked at did well in providing diverse imagery. Others seemed to not take this into consideration in their designs and, as such, their images lacked diversity.
Features
A funnel for collecting addresses for marketing emails should be included.
An engaging fit quiz is desired.
All the competitors provided marketing funnels on their pages. However, only a few provided fit quizes. We felt it was important for users to know how to order a product that fit properly.
A/B Testing - Typography and Color Pallete
Why?
The clients provided the team with fonts and a color palette that they were drawn to, but also granted the team freedom to explore other possibilities. With this in mind, each team member created three diverse style tiles, and then one was selected from each to test with users.
How?
The clients provided the names of several loyal followers who had demonstrated interest in their new product. The team also provided names of other individuals that they knew who fit the persona (either pregnant currently or had been pregnant in the past). From that user pool, five users were identified to be interested in participating in the research. Interviews were held on Zoom and transcripts were recorded using Otter.io.
-
Two of the users were currently pregnant (28 and 38 weeks along)
-
Three were postpartum with babies between 3 months and 16 months of age
-
Four of the users were first-time mothers
Mockups
The clients also provided the team with preliminary wireframes. We carefully reviewed and annotated these wireframes, identifying the most effective elements and areas that required refinement.
Ultimately, our design incorporated common trends found in today's market. In accordance with Jakob's Law, we aimed to create an intuitive interface by leveraging users' familiarity and expectations. A hero image at the top of the screen, a swipeable or timed card showcasing product value, and a social media section for engagement were all incorporated. Additionally, we added modern elements like frosted glass overlays and a combination of a script font for display text and a sans serif font for body copy. As part of the team's division of labor, I was responsible for designing the About Us page.
It feels very relevant and modern, like what I would see on other web sites or apps or something.
Jasmine
User Tester
Usability Testing
Why?
Considering this is a new project, I wanted to ensure it solved the problems we discovered during discovery. The best way to do so was to run some usability tests on the Figma prototype.
Once we had designed the high-fidelity screens, one of our team members took upon the challenge of creating the prototype. The prototype also included a few micro-interactions to keep the users engaged with the site.
How?
In our testing, we wanted to know if the UI elements maintained their desirability once incorporated into site, and we asked questions on how users felt about the color palette, typography choices, and imagery. We also wanted users to voice any confusion they were feeling over the design of the website.
Future Recommendations
Some of the immediate needs we recommended was to:
-
Replace the stock photography with the actual Infiniti Touch product images.
-
We also suggested utilizing swipe cards in the fit quiz section.
-
Explore utilizing a floating cart option.
-
Enable users to access their past orders on their profile, add a chat feature for customer service, and a tutorial video explaining the bra's features.
Thank You!
We were very proud of the outcome of this project, and the clients expressed their excitement as well of the finished product.
Portfolio
About Me
Publications
Blog
CONTACT ME
Tel. 402-658-3194
SOCIAL
X (Twitter)
STAY CONNECTED
Get the latest news & updates
© 2024 by Tammie Meloy.
Created on Wix Studio.
Why?
How?
The team held a persona mapping workshop to engage with our stakeholders immediately after the first meeting. The clients spent some time (with our direction) stepping into the shoes of their potential client- the pregnant or nursing mom. This wasn't difficult for them as they had been pregnant and nursing.
Using Miro, two of our teammates collected and sorted their input while I ran the session. This workshop proved very useful to us as a team trying to understand the potential user as I was the only one on our team who had ever been pregnant before. They notated not only tangible user concerns like sizing, cost, and support but also intangibles such as body image, overwhelm, and lack of education. It was an extremely insightful session.
Using Miro, two of our teammates collected and sorted their input while I ran the session. This workshop proved very useful to us as a team trying to understand the potential user as I was the only one on our team who had ever been pregnant before. They notated not only tangible user concerns like sizing, cost, and support but also intangibles such as body image, overwhelm, and lack of education. It was an extremely insightful session.
I liked the images. I think the chosen pictures reflect the inclusive nature of the brand.
Neslihan
User Tester
Understanding the Market (Competitive Analysis)
Due to a supply of competitors in the marketplace, the team felt that it might be worthwhile to do a competitive analysis. This would help us get a feel for existing trends. We wanted to observe what was being done well and what we could improve.
The companies we analyzed were A Pea in a Pod, Motherhood Maternity, Kindred Bravely, Hot Milk and Soma. Each team member was assigned a popular competitor in the field of maternity wear and looked for brand tones, call-to-actions/navigation, imagery, and features.
Here's what we learned:
Using Miro, two of our teammates collected and sorted their input while I ran the session. This workshop proved very useful to us as a team trying to understand the potential user as I was the only one on our team who had ever been pregnant before. They notated not only tangible user concerns like sizing, cost, and support but also intangibles such as body image, overwhelm, and lack of education. It was an extremely insightful session.
Diversity
Users expected diversity and representation in imagery.
The team needs to provide focus on providing more diverse imagery to engage their audience.
Community
Users are used to participating in community platforms such as Facebook, Instagram, and Twitter. As such users were attracted to a sense of community within the website.
The website should provide a means of engaging the user and allowing them to feel connected with the company and other users.
Typography
The initial fonts suggested by the clients were serif style fonts. Serif fonts are seen as old-fashioned and undesirable by the users.
Use serif fonts sparingly or choose a more clean, modern typeface.
Voice
Simplify and emphasize the main content on each page.
Create a consistent tone of voice throughout the website.
It is seen as very comforting. And sounds kind of strange, like friendly. Like they're trying to help you every step of the way to find their perfect fit.
Kristen
User Tester
Typography
Users still felt a feminine vibe while the body copy remained clean and modern.
The team must continue to leverage the Design System. Areas that diverged from the Design System were acknowledged and pointed out by users.
Feedback
Imagery
Users appreciated how the chosen images reflected the inclusive nature of the brand.
Colors
Users notated how the page colors felt comforting and fitting.
The team should consider alternate designs for the logo color, drop shadow, etc.
Elements
Users were able to recognize primary and secondary buttons and their use. The buttons matched the look of the page.
I want to let you know that I really enjoyed looking again at the documents you shared with us! You did a great job, really listened to what we wanted and exceeded our expectations!
Elodie
Client
We also wanted to test for usability, so the team selected some tasks for the user testers to complete. Some of these tasks included having users navigate to certain areas of the site including the shopping page, fit quiz, and the About Me and Blog pages. purchasing product, and using the fit quiz. We also asked them to explain the unique benefits of the Infiniti Touch system and how it worked. I helped to finalize the script for testing.
Navigation
Users could navigate the site successfully 90% of the time.
Finding the "About Me" and "Blog" pages proved to be the biggest challenge.
Using a tree sort may determine the proper hierarchy for the menu component.
Outcomes
"Add to Cart"
Users could add to their cart 95% of the time.
The page could benefit from a shortcut to the shopping cart, possibly a floating or "following" shopping cart icon.
Understanding the Product
Users could explain the qualities of the Infiniti Touch bra system 45% of the time.
Adding a "How-To" video showing how the bra works, the changeable parts, etc. would help new customers understand the product and increase sales.
Product Handoff
Our time with our clients was coming to an end, and it was time to prepare our deliverables. This included creating a design guide that was as beautiful as their website. We also compiled all the design elements into a Zeplin file for easy handoff to developers.
Final design iterations included one last quality check to make sure that pages were being held constant to the design guide. I also updated the About Me page to move the company story above the founders' stories as requested by the users. Lastly, I cleaned up the product listing page by designing the product options to a format that is more familiar to the users.