Do Good Swimwear is a small female run business from Hawaii that specializes in sustainable swimwear. This business was created by surfers, for surfers who care about the environment as the material they source comes from ocean waste ( i.e fish nets, plastic bottles, and old nylons.) I chose to case study this business because they align with my values on slow sustainable fashion.
The goal of this case study is to identify Do Good Swimwear's audience, user pain points, and improve the user journey in an aesthetically pleasing way while also allowing consumers to feel good about how and where they are purchasing from.
While developing a case study I use several research methods to understand the consumer journey. Through user interviews, competitor analysis, experience mapping, and reading other case studies, I identify several user pain points and solutions to create a better user experience from brand recognition to checkout.
Consumer Journey
The consumer journey is a key part to understanding different pain points while going through a website. For the following I utilized a combination of experience mapping and the consumer journey. Data was collected through user interviews and personal observations.
No items found.
No items found.
Consumer Profiles
Using interviews and survey as a reference I was able to define four target consumers Samatha (Life Guard, 16), Kalani (Student, 21), Heather (Marketing Director,26) and James (Sales, 24) to better empathize with my main user groups and prioritize opportunities according to their needs. These consumers are based off Do Good Swimwear's target audience.
No items found.
No items found.
Opportunities
Reviews
During user testing, consumers were confused by the reviews. Reviews would load last and show up in the first section of the product page, giving the consumer a short time to look at the product.
Old Review System placed above product
Product Photos
The photos on Do Good Swimwear's Product page are large and high-resolution, this makes it easy for users to see product details. Unfortunately, during user interviews, I observed that users found it hard to navigate through the website with different-sized images in a grid that display all the colors. It overwhelmed the user in choosing a color. When choosing a color to view from the drop down menu, it confused the user when the layout did not correlate with their choice in color.
Old Do Good Swimwear Product Page when color is selected
Sustainability
Sustainability is a core value for this brand. Users did not recognize this right away when looking through the website. Sustainability was hidden in the "About Us" page and past blog posts. With a redesign of the homepage, we could add a sustainability section as a call to action to learn more about the company. This gives Do Good Swimwear more recognition and credibility when advertising their sustainable efforts.
Do Good Swimwear Homepage Redesign that highlights the company
Ideation & Sketches
Sketches are an important part of the ideation phase, it's what helps me as a designer discern whether an idea is worthy enough to transform sketches to wireframes. Wireframes are skeletons that hold placeholders for future content while giving dimensions. Here you'll see sketches and wireframes for the navigation bar, footer, other pages.
No items found.
No items found.
Component Library
The component library is a document given to web developers to implement features on a website. It contains specs such as inactive states vs hover states for buttons, fonts and font sizes used throughout the website, colors, icons for links, photo dimensions, a navigation bar, and a footer. Here you will find the component library for this project.
MOCKUPS / PROTOTYPE
The final design takes form in the mockup and prototype. The mockup is a static design page while a prototype is a functional design that I make through Adobe XD, and Figma. Below you will find both.
Home Page
Some added components to the homepage are the navigation bar, added before the hero image. The navigation bar features Shop Lookbook About Us Sustainability Favorites Counter By placing shop cards below the hero banner we condense the space to hold more important call to actions, such as the Sustainability article, Blog Post Cards, and Do Good Swimwear's instagram which is more active than their website.
The Footer is also reimagined. By adding columns, I was able to emphasize their main ideas while organizing the "Get Help" section.
No items found.
Shop Page
The shopping page is where the consumer is introduced to product, I wanted to feature Do Good Swimwear models wearing their line to introduce product. On the before, product names appeared on hover, which didn't give any context. I added names, colors, & price under each product to show the variety between each product.
I also added a side navigation filter. On the before, the navigation was above in black. By adding it to the side, in its own column the consumer sees all their options.
Lastly, the grid in the before was uneven and hard to look at. Though it was not mentioned in the UX interviews, it is clear that the user must think or squint to see the product. (Take for example the items with no reviews, the pictures are taken from far away and much smaller hence less clicked and no reviews.) In the updated page there is an even grid with proportional photos.
No items found.
Product Page
The product page was where users were most confused in interviews. The previous version starts with reviews, which would be okay if the consumer knew exactly what they were looking for. It doesn't help that the reviews buffer and give a visual whiplash. To remedy this problem, I added a comprehensive review system to the bottom. In the Reviews, I added sliding measures to give future consumers an idea with how satisfied consumers were with their product. Also mentioning, usual size, size purchased, and true to size.
For the product pictures I was sure to add corresponding photos to the color option chosen. In the previous rendition, product photos were much larger than needed and placed above and below options to purchase, leading consumers to think longer than usual about corresponding color. I limited it to four photos per color because showing consumers more options than needed overwhelms consumers, as studies have shown.
In user experience, call to action buttons are vital. I changed it from an outlined square button to a black pill button. Black for action, and a pill to fit in with Do Good Swimwear's aesthetic. Since sustainability is a core value for Do Good Swimwear and its consumers, I think it is important to add how much waste is saved with their products. Under the favorite bar, we have how many lbs of plastic was saved. I added a recommended section to boost units per transaction (UPT.)
No items found.
In the Future
As this was my first case study, and a case study I accomplished with the help of a mentor, there are some things I would do differently to improve my results.
A mistake I made was not designing first on a 1366×768 (common screen size for a laptop.) I first worked on a 1920 x 1080 screen (the least common desktop.) When designing on such a large screen size, this was a downfall because it affected padding and font size on other screen sizes. Something I would've done differently is to make a template for the component library. This would've saved me time, and I could've built the component library while building the mockups versus completing it last.
Other Work to Check Out
Illuminate
Brand Design
Creating a new narrative through collaboration to capture a new audience for ASICS Tiger.
