Team:
Jiayi Jiang,  Jiacheng Chen, Esther Kim, Tess Porter, Becky Su
Web Redesign

Creating a More Intuitive Girl Scouts Experience for Caregivers

Duration

3 Months

Tools

Figma, Miro, Optimal Workshop, Slack

My Role

Evaluated Research Insights, UI and High Fidelity Design

Girl Scouts NYC is the official site of where Girl Scouts bring their dreams to life and work together to build a better world. This project leverages research insights from interviews, card sort and tree test to revamping the web experiences for the Girl Scouts NYC in a responsive design, through the use of personas, storyboards, wireframes, prototypes, and enhanced information architecture.In this case study, I’ll walk through the design process and demonstrate how decisions are articulated.

OUR PROJECT
Target Audiences

Redesigning the GSGNY Site to meet caregiver needs

GSGNY’s last major site redesign was launched in September 2017 and it’s vital that their next design iteration meets the needs of caregivers. Caregivers — parents, grandparents, older siblings, nannies, and others who care for children — serve as the lead researchers and final decision makers for what extracurricular programs children will participate in. The structure and content of the site must convince these individuals that this program is something worth their child’s time.

Given this, when presented the opportunity to redesign the GSGNY website, our team quickly decided to design for a target audience of caregivers and focus our research on the following question:

How can we design a more intuitive, helpful, and exciting site for caregivers of current and prospective Girl Scouts members?

USER RESEARCH
4 User Interviews
4 Survey respondents
  • The target audience of our team is parents. One of the underlying key insights based on the three interviews is that parents research information from social media networks, such as Facebook and Instagram. Websites and Google searches also provide a platform for information concerning leadership organizations that their children can join. Thus, it is relevant to ensure the redesigning of the website utilizes social media and other pertinent online channels to advertise to parents concerning the offered activities.
  • The findings from the interviews show that most parents would like to know the scheduling of activities. Foundationally, this desire is pegged on the need for proper planning of their time and that of their children. Therefore, the website’s redesign should include schedules for all the activities. The adoption of this approach would provide parents with the opportunity to plan their children’s involvement in activities.
  • The website’s redesign should be based on the provision of programs. The results from the three interviews indicate that parents would like their children to be involved in different programs. The exploration of this paradigm would advance the website’s relevance in meeting the parent's and the children’s needs.
PERSONA
Meet Lily
With the research so far, I identified a persona to improve the user experience of our website by better understanding our target audience.
CARD SORTING
8 Participants,
59 cards to sort
To redesign the existing site map we used Optimal Workshop to create 59 cards to be sorted into categories by users and conducted an online open card-sorting exercise to study users' ideas on how to categorize existing content. We have 8 users who participated and created a total of 87 categories, with a median of 11 categories each. It took a median time of 29:54 to complete the study.
TREE TESTING
8 Participants,
8 tasks
By using the data from card sorting, we developed 8 tasks for the tree testing to test out the understanding of the categories created. We have 8 users who participated and out of all the tasks completed by participants, 34% ended up with a "correct" answer, and 47% of answers were chosen without backtracking.
THE MAKEOVER
Revised Information Architecture

Content Stucture Notable Changes

Based on the results of tree testing, we adjusted the structure and label names of navigation to decrease the failure rate of users' tasks. Followed are the three main changes.

‍

Cookie Selling Tips

1. Renamed Label Name “Cookies” to “Cookie Program”

2. ”Cookie Training Videos” to “Cookie Selling Tips”

‍

Fundraising Events

1. Moved label “Fundraiser Events" under T1 “Support Us” & under T2 “Donate”

2. Nested the 3 donation events under new T3 “Fundraiser Events”

‍

The Girl Scout Network

1. Moved The Girl Scout Network into our “Join Us” category.

‍

‍

BRAINSTORM
Sketches
Based on research, it came to our attention that it was important to introduce the users to what Placemaking is and what Placemaking Week does. So we introduced an on-boarding experience to the flow of the website.
DESIGN
Low-fidelity Wireframes
ITERATION
10 User Testing
We did moderated user tests on our interactive low-fi wireframes. We invited 10 users and took notes while we were testing.

How do we build intuitive pages to support the accomplishment of caregivers’ key tasks?

Analysis of our tests — what users enjoyed, and where they ran into trouble — led to our team’s development of 19 total recommendations, 14 of which our team decided to implement in our final prototype. These involved:
  • Navigation: Adding clarity to our navigation bar’s dropdown menus by adding arrows next to labels that lead to additional navigation options.
  • Consolidation: Combining redundant information located on the “Membership Overview” and “Become a Member,” “Ways to Give” and “Donate Now,” and “Events List” and “Events Calendar” pages; create a new second-level label, “Donor Societies,” to lead to two related pages, “Trefoil Society” and “Juliette Gordon Low Society.”
  • Graphics and Layout: Reducing blank space on all pages, ensuring content boxes are no larger than they need to be for the content offered, and redesigning infographics to have clear visual hierarchy.
  • Homepage: Leveraging the homepage to highlight additional items important to caregivers, such the Girl Scouts mission and vision.

‍

STYLE
Visual Design
FINAL AVATAR
High-fidelity Mockup
Our team created high-fidelity prototypes for desktop and mobile to synthesize our research. This prototype incorporates Girl Scouts’ visual identity, and all pages incorporate findings surfaced throughout our user tests and market research.

An Intuitive, Helpful, and Exciting Final Prototype for Caregivers

Click the link below to experience the Interactive Prototype!

Desktop VersionMobile Version

1. Prioritize Registration Feature

In our user interviews, we learned that caregivers prioritize finding registration information and they want to see images of children having fun. We designed the first slide of our carousel to feature both.

2. Simplify the Path to High-interest Information

Through tree testing, we learned that users have very diverse ways of attempting to find: “The Campaign for Girl HQ”. Therefore, we include it in our home page carousel provides a more direct and simple access point.

3. Highlight Important Information to Increase Engagement

Caregivers register their children for certain programs which the skills their children are interested in pursuing. Including this information on the homepage in a highlighted section makes it easy for both new and existing users to find.

‍

Future
Key Takeaways
In sharing our prototype with peers, it was well received with positive comments on infographics, colorful design, and use of carousels, and opportunities to improve signifiers for interactivity on the main navigation. Key takeaways, including opportunities for further research.
Critiques on High-fi - Team Friendly User

Trust your gut on color combinations

Our prototype uses the combination of black text and #00b451 — “Girl Scouts Green” in the Girl Scouts visual identity and their primary color — to identify navigation labels and page buttons. Girl Scouts Green is accessible as a background with black text at WCAG AAA; its contrast ratio is 7.64:1, far above the minimum ratio of 4.5:1 for normal text as outlined by WCAG v2.1 success criteria 1.4.3: Contrast (Minimum). However, in sharing our final prototype with peers, multiple individuals commented that the combination was hard to read. This echoed concerns our team had, and dismissed, during prototype development because the combination met contrast requirements. Future work on our prototypes should involve experiments to change this color to combination to meet both accessibility requirements and manual user review.

‍

Clear information architecture must come before aesthetic design

The visual design of our new GSGNY site wouldn’t matter if users could not use the navigation structure to find the information they needed. It was vital that we started our design work with testing, through card sorting and tree tests, our information architecture.

‍

Testing is never really done

Outside of receiving informal feedback from our peers, our team hasn’t had the chance to formally test our final prototypes. If we were to continue our work, our next step should be continuing user testing — to measure success in completing tasks and gain qualitative feedback on our aesthetic design — to understand if this final prototype is a viable solution, and to confirm if some of the issues raised by our peers are shared by other users.

‍