Overview of the Project
From more than a century, the Girl Scouts of NYC has been a leading non-profit organization dedicated to helping all girls build become leaders. The redesign of the current girl scouts website was chosen as the project for this semester of INFO 643 Information Architecture.
Our team redesigned the website using the various insights from the research conducted to create a more intuitive experience for the parents and guardians of girls scouts. We restructured the website to create new information architecture and medium-fidelity prototypes for the home page and two selected task flows.
Excessive Information and Difficult Navigation.
The current website makes it difficult for users to navigate and find the information they need by overwhelming with too much information and ambiguous and labeling.
There are redundant menus and submenus without clear organizational structure or hierarchy. The current users of the website find it very difficult to find what they are looking for.
Efficiently organize information on the website to make navigation for users easier.
Combine and consolidate redundant menus and pages across the website.
Relabel menus and headings at all hierarchies to provide increased clarity.
The redesign process for the project consisted of four major stages:
- Preliminary User Research : After choosing a target user group, our team conducted interviews and surveys to obtain insights and develop user personas .
- Information Architecture Restructure : By conducting card sorts, tree map and competitive analysis exercises, our team organized the content on the website to create a new and more efficient site map.
- Preliminary Wire framing : Our team sketched out ideas, created paper wireframes, made user flows and user story maps to create a preliminary wireframes for the first round of user testing.
- Final Prototype : With the results from the user testing, our team finalized on the prototype design and generated medium-fidelity prototypes as the final result.
1. User Research
Our target user group was the parents and guardians of children currently or formerly enrolled in the girls scouts. Each member of the team interviewed one parent/guardian to understand their preferences and challenges while planning activities for their kids. We collected a lot of information and insights from these interviews which we organized by creating various affinity maps.
From the research insights and data collected, I created a user persona to embody what a standard parent might be like. Most parents have busy schedules but make time to plan and be involved in activities with their children.
2. Restructuring the Information Architecture
Card Sorting and Tree Testing
By conducting card sorting and tree testing exercises our team was able start restructuring the content on the website and create a more organized and efficient site map. In the card sorting test the participants sorted the cards into a median of 8 categories. We discovered that many users grouped similar things under categories with similar labels. The clear insights we obtained was that the events and programs offered by the girls scouts were sorted together and information about the girls scouts and the organization was sorted together.
The tree testing was subsequently conducted to gain more insight. The participants had a high success rate but not on the first click which indicated unclear labelling and confusion with navigation. Both the card sort and tree testing helped consolidate all the pages about the organization under one menu titled ‘ About Us’ and also combine the pages related to events and programs under one page titled ‘Events and Programs’. We also reorganized the pages and content on the website and housed them appropriately under menus titled ‘Get Involved’ for volunteers and troop leaders, ‘Awards&Badges’ for the various awards and badges that members could earn, ‘Cookies’ for information related to selling cookies and ‘Support’ for information about donating and offering support to the organization.
Understanding the Competition
We looked at similar websites to compare 8 key features and ended up with a few key takeaways.
Home Page : Clean and concise navigation with clear menu labels.
Navigation : Clear hierarchy of menus and submenus. Links and Labels : Bold and easy to read text with action buttons.
Images and Icons : Balance between text and images/icons.
Appearance : Minimal balanced design with color that doesn’t interfere with information.
A New Site Map
3. Preliminary Wire framing
Creating User Flows and User Story Maps
We created a a user story map for two separate tasks on the website with high level and low level tasks. This helped us envision how our users would use the website, starting from top level menus to reach the individual pages. It also helped us map out the frames we would be designing for the prototype for testing.
Creating Low Fi Prototypes
After creating user story, our team sketched out ideas for the for the first prototype for desktop and mobile versions on the website. Then we made low fi prototypes on Figma. We ideated designs for both mobile and desktop simultaneously to ensure that the design was responsive across all platforms.
By going over the different aspects of the sketches of the website design, our team created the initial low fi prototypes to start testing out on the users.
We asked the participants to perform two different tasks on both the mobile and desktop interfaces.
- Find and register for the cybersecurity task.
- Find information about selling cookies online and access the training videos about selling cookies.
The users completed the tasks but were confused at a few labels of submenus which they mentioned were ambiguous and also suggested we rearrange the content so that higher priority content could be easily accessible at the top of the webpage.
The keys changes that we implemented after the user testing were :
- Changing the labels of certain submenus, like from Digital Cookie to Online Sales Tool under the Cookie Page.
- We expanded on what STEM means in all the pages containing the word STEM, to make it understandable to all the users of the site.
- We reorganized certain higher priority tasks to the top of the website and made it easily accessible to limit unnecessary scrolling across the webpage.
From all the research and insights gathered, we created the final medium fidelity prototypes on Figma. Our main intention with the website was to make it as easy to navigate as possible and have the information easy to find and readily available to the users.
The images show a few screens from the cybersecurity task. There is proportionate balance between text, icons and images used across the webpages.
The images show a few screens from the cookie business task.
I think our whole intention with the redesign of the website was well realized and executed. From the beginning we maintained that we wanted the website to be easily readable and easy to navigate. Though it was difficult, we went through all the content on the website, noticed redundancies, grouped together similar content and created new top level organization to house everything better. Our main contribution to the project was
1.Reorganizing the content to make it more legible and easy to find.
2. Relabeling top level organization but also various submenus.
3. Cleaning up the structure of the site, to make it less cluttered and easy to navigate.
It was incredibly exciting to be working on entire design project from the start to finish and finishing with a final product in hand. It was my first time building a prototype and I thoroughly enjoyed the learning process. The project helped me realize just how important ample and well conducted research is for the ideation of the design. And how iterating and taking feedback only helps make your product better.
I enjoyed working with our various participants in our tests and my team members to finish the project. For the future, I would want to expand on the site and create high fidelity prototypes by revamping the visual design as well.