95 Percent Group

Objectives

• Analyze company, competitors, current site to gain foundation in problem space
• Map user journeys to understand motivations and needs of audiences
• Create sitemap and test information architecture
• Mockup wireframes for final site

Research

Methods

To kickoff the project, we held a meeting with the client to understand the goals of the redesign and target audience. We planned a discovery phase that consisted of the following:

• Reviewing internal documents and memos to gain foundation in company’s brand messaging, mission and values
• Interviewing company leadership and stakeholders to understand challenges and expectations of site redesign
• Analyzing current site’s IA to understand scope of product and service offerings
• Conducting audits of competitor sites to understand how they organized and promoted their products
• Reviewing Google Analytics data to find trends in how users browsed site and consumed content

Findings and Recommendations

Based on our exploratory research of 95PG, we narrowed the goals of the website design to four main needs:

• Describe the company’s passion and purpose while capturing the power of the company’s integrated product ecosystem
• Optimize pages by decreasing content density and creating clear page hierarchy
• Elevate key content (product and services) while providing opportunities for non-linear navigation
• Encourage conversion opportunities and engagement with the website content

User Journeys

Based on these findings, we mapped out five user journeys that detailed different audience struggles and needs. These profiles were instrumental in grounding our designs in real scenarios and gaining feedback from 95PG on what aspects of these journeys to focus on.

The common needs of these audiences had of the website included:

• Content detailing the latest findings in research-based literacy instruction
• Real life examples that validate 95PG’s approach to literacy intervention
• Integrated solutions that fit the needs of both direct clients (district administrators, curriculum directors) and indirect audiences (teachers, parents)

Drafting the sitemap

Based on our research and feedback from the client, we drafted a sitemap with the intention to:

• Communicate to audiences the scope of the integrated 95PG product ecosystem (including products, professional development, assessments)
• Create intuitive categories that set expectations for where to find specific information
• Build a structure that addresses the needs of multiple audiences

At the highest level, the sitemap contained groups titled Solutions (products and services), Insights (blog content), and Impact (efficacy case studies), with the intent of promoting categories that represented the way audiences already understood the information.

Testing and IA revisions

In order to back up the proposed information architecture for the new site, we conducted a tree test that identified successes and challenges with how real audiences would use the site to search for information. The tasks were as follows:

• Find product information
• Inquire about a speaking engagement
• Find efficacy studies
• Learn about the Science of Reading
• Read success stories
• Look up product tutorials
• Enroll in professional learning
• Access a white paper

While participants were able to complete 6 of the 8 tasks with relative success (above 70%), they struggled with two of the tasks (Look up product tutorials and Access a white paper). Based on the feedback from the test, we concluded that category titles were too vague, and audiences didn’t see a particular distinction between content associated with Insights and content associated with Impact.

To account for these challenges, we made the following changes to the IA:

• Rename Impact category to Efficacy & Success to better align with content
• Restructured Solutions to become two separate categories (Products, Professional Learning) to provide stronger association with offerings that site offers
• Elevate Research content within Insights to distinguish from blog categories

Design

Wireframes

Given the size and scale of the site, we divided the design phase in 2 sprints in order to distribute workload for our team. Group A focused on major page templates that detail the products a majority of users would be interested in (eg. homepage, category landing, product detail), while Group B contained more adaptable page templates for blog content and career pages. For each of these groups, I was responsible for the UX phase where we designed wireframes that set the foundations for the final visual design.

To get a rough idea of what components were necessary for the templates, I created outlines to map the components used in each page type.

These outlines were used as the basis for wireframes, which went through three rounds of feedback and iteration with the client. 

Visual Design

When the final wireframes were approved by the client, the UI team took over and applied the new branding to the designs. I added design annotations that described the function of reusable components so the development team could easily create the final site.

Reflections

This project was an example of the importance of conducting thorough research to inform the strategy of the redesign. In particular, the tree test results gave us valuable insight that steered us in a different direction for the IA. Through iterating the sitemap and wireframes, I was able to address the client’s needs of reconciling years of legacy content with promoting new products and services. 95PG has since launched the completed site with the updated IA and branding.