This project was based on a speculative creative brief in DesignLab’s UX Academy curriculum. I completed the project over a 2-week duration. I carried out the role of a Product Researcher and Designer. Stakeholders are mentors and industry professionals.
Saltwater is a global brick and mortar clothing store for men, women, and children. For many years, the company resisted launching an ecommerce store to avoid diluting the excellent in-person shopping experience they were known for.
Avoiding the ecommerce boom negatively impacted the business. Saltwater was falling behind the competition and struggled to sell leftover inventory. Loyal customers grew tired of asking when Saltwater was going to launch an online store and began shopping elsewhere. As the clothing chain struggled to expand market share, they began to see an opportunity to increase sales and rebrand in a digital era.
What Does Success Look Like?
Saltwater’s goals were to:
1. Launch a responsive and user-friendly ecommerce store to increase sales and deliver on loyal customers’ requests
2. Design a modern and fresh rebrand, neutral enough to appeal to various shoppers
Conducting Research
Catching up to the Competition
Saltwater was behind the ecommerce curve and saw the value in conducting a well defined and comprehensive research plan. The plan consisted of the following methods, completed in sequential order as each method helped build the foundation for the next:
• Conduct a competitor analysis to solidify industry standards and identify strengths and weaknesses
• Interview and survey online clothing shoppers to better understand: who, what, where, when, why, and how?
• Develop a primary persona to identify needs and wants and action on them in design
• Create an empathy map to better design for users’ goals
• Storyboard to see how Saltwater’s new site can impact a user’s day-to-day life
What was Discovered?
The competitor research revealed several patterns users are familiar with to incorporate in the desktop version of the home, product results, and product detail pages of the design:
Home Page:
• Top banner displaying sale information
• Masthead (throughout site)
• Suggestive, featured item, & global search capabilities (right quadrant)
• Shopping bag icon (right quadrant)
• Profile/sign in icon (right quadrant)
• Home navigation displayed as a logo (center or left quadrant)
• Dynamic Department Site Map
Product Results Pages:
• Breadcrumb navigation on product result pages
• Grid pattern display
• 360 degree photos on hover
• Product name
• Price
• Colors
• Average 5-star rating score
• Heart icon used to add a favorite to a shopping list
Product Detail Pages:
• 5–8 photos showing different angles of the product
• GIF’s showing movement of the fabric
• Size charts
• Reviews & 5-star scale rating
• True to size scale
• Authentic reviews mechanism with a badge or icon to prove it
• Filters (generally on the left side of the page)
Pitfalls to avoid:
• Use of carousels on the home page as the hero image
• Including product images that are not clickable
• Inaccurate inventory (technical consideration as well as a design consideration; if the mistake happens how do we handle it from a UI perspective?)
• Overly busy pages (more focused on being creative or different) but hard to use
•Inconsistent experiences when switching from desktop to mobile
• SSL certificates not up-to-date creating security concerns
Who is the user?
People who shop online for clothes are conditioned to industry standards and complete tasks quite quickly. The interviews and surveys revealed the primary persona to be female age 35 who loves to shop online and browses daily. She is a working woman with an active social life and enjoys the convenience of shopping online.
She has the spending money to shop online 1 time per month and also receives Stitch Fix. She loves Maurice’s because there is a store nearby where she can return clothing that doesn’t fit. She uses Amazon but is not a Prime member — instead she adds to her cart until she reaches the free shipping amount, then orders. She shops online from brands she knows and trusts. She appreciates an easy check out but wants to ensure her credit card information is secure. The way items look and fit are very important so an easy return or exchange policy and accurate sizing information is a must.
Based on the research outcomes, I was able to determine a roll-out plan and define the minimum viable product (MVP) as well as future enhancements. Ultimately, if Saltwater’s ecommerce store UX was designed within industry standards, avoiding common patterns and pitfalls, the site would be a successful investment.
Defining Research Based Goals
To wrap up the research phase, I needed to make findings actionable. Based on the project goals, I developed a Feature Roadmap. The plan included features with a detailed description and research supporting why I was implementing them. I bucketed each feature into 1 of 4 phases to create an achievable timeline:
1. Must have
2. Nice to have
3. Surprising and delightful
4. Can come later
In order to select a starting point for the site, I set out to identify the most important user flow for Saltwater’s customers and the business. Research showed purchasing a product as a member (or a nonmember) of Saltwater’s loyalty program, was the top user flow. The primary business goal was to increase sales, so I decided to base the first prototype of the site on adding an item to the bag for checkout. The next prototype would be the check out experience.
I created a user flow diagram to aid my decision making during the design phase. The diagram considers a frequent shopper who enters the site from their browser history (log-in information is already cached on the site) versus a non member who comes across a pay-per-click ad to enter the site. Both users purchase the same item but on two very different paths. Simultaneously, a card sorting exercise was carried out to determine how the site map, categories, and tags should be organized. A sample of Saltwater’s product names were given to their target market to categorize and based on trends found, the site map was fully flushed out.
Gaining Stakeholders’ Buy In
Before beginning the Design Phase, I collected my research and presented the plan to stakeholders. The research findings presentation helped to set the stage for my future design decisions and explain the why to stakeholders.
Design Phase
Test Early and Often
After incorporating stakeholders’ feedback to the roll out plan and finalizing an agreed upon version, it was time to start the design process. I started by sketching several prototype options for quick and easy ideation. After collaborating with a team of design professionals, I narrowed down my sketches and created a low fidelity prototype to begin usability testing.
Creating the low fidelity prototype proved to be extremely valuable. While the spacing on the mobile and tablet versions was in line with industry standards, the web version was way off (due to efforts to make images large and easy to see and lack of design experience for the web). Based on these results, I was able to quickly make improvements without wasting time on high fidelity design changes.
The Rebrand
Before creating a high fidelity design, Saltwater’s rebrand needed to be flushed out. Based on the adjectives: modern, neutral, and fresh I began sketching logo ideas:
The logo rebrand was a rather subjective process. I created and presented several options in group critiques, but opinions varied. I revisited the art board on numerous occasions, then presented again and again to attempt to get a majority consensus. I turned to Pinterest to create a mood board to better convey my vision alongside of the logo options. Still there was no clear favorite and likes and dislikes were all over the board.
In the end, I went with my gut and narrowed it down to 2 variations to present to stakeholders in a UI style tile. The style tile helped stakeholders to visualize what the logo might look like on the live site and ensure a cohesive brand. Adding colors, typography, and photography helped narrow down which logo fit Saltwater’s goals.
Body typography decisions were made based on readability, so users could quickly see price, ratings, and purchase items. Headline typography allowed for a trendy, playful look and feel to enhance Saltwater’s family friendly, fashion forward brand. The “squiggle” design element representing water portrayed Saltwater’s focus on placing their brick and mortar stores by the sea. The sea foam green color helped bring the brand to life and is universally known as the color of ocean water. The squiggle is used throughout the site to reinforce the brand and pull everything together (the squiggle turned out to be a “fan favorite” in high-fi user testing).
Finally, I gained majority buy-in on Saltwater’s brand identity. The key to doing this was finding balance in creating a solid visual (the style tile) without investing too much time and resources.
Designing the UI for an MVP
Based on the low fidelity prototypes created for desktop, tablet, and mobile versions of the site, I created the first iteration of the high fidelity prototype and started usability testing.
“I love the featured product images. If something catches my eye I’m going to click right away and add it to my bag.” — Test Participant
I developed a testing plan with 3 defined goals to base user's tasks from:
1. Gather user’s first impression of the homepage from a branding perspective.
2. Users ability to find what the product they are looking for by using the “Featured Products” search feature
3. Users ability to select color, size, and add an item to their cart
In a neutral manner, I observed testers as they moved through their tasks. I looked for areas of strengths and weaknesses: When did users hesitate or have an issue? Why did the user move through certain tasks more quickly than others?
I based decisions on a tiered approach:
Tier 1: high-impact problems preventing 30% of users from completing a task.
Solution: redesign and retest prototype before launch
Tier 2: 11 - 29% of users experience an issue completing a task but eventually complete it.
Solution: redesign and retest but don’t postpone launch
Tier 3: low-impact problems 10% or fewer participants
Solution: document the issue and if it grows revisit later
An affinity diagram, based on helped me identify areas of strengths and weaknesses gathered from the interviews.
10 of 10 users who participated in testing:
1. Described their first impression of the site in line with the brand adjectives
2. Achieved the search task with no issues
3. Commented search was straightforward
4. Commented use of images in “featured items” is helpful
5. Felt adding an item to a bag was easy and straightforward
Areas identified for improvement included:
1. CTA’s weren’t receiving the proper hierarchy treatment
2. Mast header hierarchy needed improvement
3. The “add to bag” button (in green) looked like a “dead button”
4. Users would like to see a definitive “continue shopping” button from the “view bag” module
Future Plans
Preparing Team Members
In order to build out the remaining features and pages defined in the road map, I created a UI kit to hand off the project to a design team. The details included in the UI kit allow the project to easily get picked up by a new design team without sacrificing consistency.
Developer Hand-off
Figma has made it easy for product designers to prepare files for developer hand-off with automatic redlining. With that being said, the designer still needs to ensure layers are organized and named accordingly. It is also helpful to set up a style naming convention with developers early on in the process. I provided developers with a read-only Figma file that included a prototype of key features, and styles for colors, typography, drop shadows, and grids. Developers can view redline measurements, CSS suggestions and a list of style details, labeled accordingly ensuring a seamless hand-off. In addition to the receiving the file, a quick call was scheduled to review the file to ensure completeness.
Valuable Lessons Learned
Saltwater’s ecommerce site launch will continue to be an evolution as user behaviors progress, business goals change, and technology evolves. The rebrand should last a long time. The hope is it will become iconic for Saltwater, although it may require slight alterations as modern trends change.
As a previous product owner and digital marketer transitioning to a UX/UI Designer, I learned many valuable lessons throughout the duration of this project:
1. Focus on making the product usable first — Use your time wisely for many design elements are evaluated subjectively and do not carry the same weight.
2. The information gained from testers is like gold — Recruit testers early and as many as possible (who fit your personas). Set the expectation up front that you may reach out to participants again throughout the research phase.
3. Be neutral when you are conducting interviews and usability tests — Do not just hear what you want to hear. Listen to what your users are saying without preconceived notions or desired outcomes.
