The Project
Kids 4 Kids is a nonprofit that sells water bottles featuring artwork created by children. The organization donates 100% of its profits to the Children's Specialized Hospital of New Jersey. As part of a larger rebranding effort, I had the opportunity to redesign the Kids 4 Kids website.
Client
Kids 4 Kids
Roles
Design research
UX/UI design
Wix build
Usability testing
Tools
Adobe XD
Photoshop
Illustrator
Wix
Date
June - July 2020
Understanding the client's goals
In my initial phone call with Lexi and Suzette, the co-founders of Kids 4 Kids, I learned Lexi had created a Wix site in the past, but felt it didn't look professional and had some usability issues.
By the end of our conversation we had established a list of goals for the new site design in order of priority.
Client's goals
-
Increase the total number of water bottles sold
-
Educate site visitors about what Kids 4 Kids is and how it works
-
Provide a pipeline for people to get involved with the organization
-
Promote upcoming in person events (in a post pandemic world)
Working with constraints
We decided to build the site in Wix rather than enlisting a developer. Since Lexi and Suzette already familiar with the platform, this would make it easier for them to update the site and manage inventory. However, the platform inherently presented design constraints.
Design process
Although I officially joined the project as a visual designer, I chose to incorporate UX methods into the the design process based on Lexi and Suzette's concerns about the usability of the site.
Research
-
User interviews
-
Usability testing current site
-
Competitive analysis
Analyze
-
Define user types
-
Develop scenarios
-
Establish design requirements
Design
-
SIte map
-
Content strategy
-
Visual design
-
Mockups
Build & Test
-
Implement in Wix
-
Test preview site
-
Refinement
RESEARCH
Interviewing users: Impactful purchases feel good
I conducted one-on-one interviews with three users, which revealed how people's purchasing decisions are impacted by where their money is going
"If I know my money is going to a good cause, I actually feel really good about buying something - it's basically the only time I don't feel guilty about shopping." - User
User interview insights
-
Knowing a purchase will help others often trumps quality and price as the primary motivation for making the purchase.
-
Users feel good about spending more on a a purchase when they feel their money is going to an important cause.
-
Users spend more time on the site learning about the organization when purchasing a product for a cause.
Competitive analysis: Nonprofit + ecommerce sites
I analyzed the websites of three nonprofits (Love Bottle, Fetch, and Good Spread) who, like Kids 4 Kids, sell products for a cause. I paid special attention to navigation, information hierarchy, layout, imagery, and language.
Competitive analysis takeaways
-
Product comes first: Each site site featured their product on the first banner of the homepage - it's immediately clear what they're selling.
-
Messaging is key: Each site used succinct and powerful language featured prominently on the homepage to bring attention to their cause.
-
Pictures are powerful: Both Fetch and good spread used imagery to connect their product to their mission.
Usability testing: The current site
After completing a thorough review of the existing site, I recruited several users to perform tasks on the site based on hypothetical scenarios.
The first banner on the homepage featured a "donate" button, while the water bottles often went unnoticed at the very bottom of the page. This led to a variety of problems.
Usability testing takeaways
-
Not immediately apparent to users that Kids 4 Kids sells water bottles.
-
Difficult to complete tasks efficiently because users must scroll extensively through content on the homepage to find what they are looking for.
-
Lack of transparency (not stating specifically where the money is donated) led to reluctance to purchase.
ANALYSIS
Defining users based on common scenarios
I used the insights from my research to segment users into three broad behavioral categories based on the most common anticipated scenarios and associated user goals. Given the diversity of potential users, I felt this method would be less limiting than developing highly specific personas.
User categories
-
The one-and-done user: Already has a good understanding of what Kids 4 Kids is. Visits the site specifically to make a purchase or get involved.
-
The seal-the-deal user: Knows a little about Kids 4 Kids. Wants to know a bit more about the organization before taking a specific action.
-
The deep diving user: Knows nothing or almost nothing about Kids 4 Kids before visiting the site. Spends time exploring and learning without a specific goal.
Design requirements: users want clarity and efficiency
The user scenarios helped me define design requirements in accordance with users' goals and the client's priorities.
The research revealed a need for greater focus on the product and greater clarity around how Kids 4 Kids works, in addition to a more efficient navigational structure.
DESIGN REQUIREMENTS
Make buying a breeze
Be obvious and transparent
Don't limit donations
Users need the shop page to be overt and easily accessible from anywhere on the site because they may visit other parts of the site to educate themselves before buying.
Users said it wasn't immediately clear that Kids 4 Kids sells bottles. The site needs to make this obvious from the get go and connect the product to the mission.
Users want to be able to give more than the cost of a bottle without purchasing more bottles than they need.
Invite involvement
Optimize for mobile & desktop
The site needs to make getting involved with Kids 4 Kids feel easy and approachable for anyone who might be interested
Users expect a high quality experience regardless of what kind of device they're using.
DESIGN
Structuring content
The design requirements acted as guidelines for rethinking the information architecture and navigational structure of the site, both of which had caused frustration during the initial usability testing.
Sketching ideas helped me visualize a variety of possible layouts for the content on each page.
The content strategy presented the challenge of combining e-commerce functionality with messaging around the nonprofit mission.
To succinctly explain how the water bottles are produced and where the profits go, I designed a "How it works" infographic for the homepage of the site.
Developing the visual language
The rebranded Kids 4 Kids logo provided a jumping off point for the visual design of the site. I was inspired by the water bottles to explore the interplay between water and paint imagery.
Samantha Warren’s style tile system was a helpful template for communicating the proposed look and feel of the site.
High fidelity mockups
I used Adobe XD to create high fidelity mockups, which I shared with Lexi and Suzette for feedback before translating the final design to Wix. This led to a more efficient feedback loop because making changes to the design in Adobe XD was significantly faster than doing so in Wix.
BUILD & TEST
Testing the preview site
After implementing the design in Wix, I tested the preview site with 14 users. I deliberately selected users who had a variety of desktop and mobile screen sizes and focussed on the following objectives:
Usability testing objectives
-
Ensure the site resizes appropriately for a wide range of desktop and mobile screen sizes.
-
Evaluate the overall usability of the site and efficiency of the navigational structure.
-
Determine whether the content strategy effectively communicates how Kids 4 Kids works and why it sells water bottles.
Testing takeaway #1: 30% of users looked for a text menu link before noticing the yellow "SHOP BOTTLES" button
I hoped that using a colorful button link to the "SHOP BOTTLES" page in lieu of a text menu link would help encourage users to take the desired action of shopping for a bottle. However, when users tried to navigate to the page, 4 out of 14 users looked for the page link in the text menu first before noticing the button.
Solution: Add a "SHOP BOTTLES" text link to the menu in addition to the existing button
Before
After
Note: The "News & Events" link is deliberately hidden because there are currently no upcoming events
Testing takeaway #2: Can a usability "flaw" encourage a positive behavior?
Wix doesn't have the capability to allow users to add a custom additional donation to their purchase. As a work around, I set product variants as different additional donation amounts.
Because variant selection is mandatory users received an error message if they didn't do so. This actually led to some users to donate who may have otherwise overlooked the option. To keep the focus on selling bottles, I decided against the alternative workaround of listing additional donations as separate products.
Solution: Leave the additional donation option, but continue to monitor drop off rate at this point in purchasing process.
Additional donation options
Additional donation field
Error message
FINAL DESIGN
Measuring success
Due to the recency of the redesign, we expect to have more conclusive data in the future (a la Google Analytics) to better understand the extent to which the redesign of the site has helped Lexi and Suzette reach their original goals for Kids 4 Kids.
Meaningful metrics will include
-
Sales conversion rate
-
Shopping cart abandonment rate
-
Value per visit (assuming both bottles purchases and inquiries about getting involved add value)
In the meantime, the second round of usability testing we performed after publishing the live site suggest a marked improvement in usability and visual appeal.
