Case Study | YALI Network Site Redesign

The Young African Leaders Initiative, or YALI, was launched in 2013 by the U.S. Department of State as an opportunity for Mandela Washington Fellowship applicants to form a virtual community. Since launch, the site has handled an influx of Network members, surpassing 200,000 members within the first two years. As demand for content increased, new feature requests became difficult to implement on the site’s basic architecture, and made it nearly impossible to seamlessly share resources, like the online courses, to other initiatives and embassy sites outside of YALI. Developers of the site decided it was time to approach the Network team about upgrading the site, opening a window of opportunity for giving the site a visual facelift and trying out new ways of creating and displaying content with reusable modules.

In the spring of 2017, my office approached the YALI Network team about redesigning their aging site that has hundreds of thousands of members who regularly visit and participate in local campaigns, take online courses, and use professional development materials to connect with other leaders in their community. The site’s backend was restrictive and made adding new features and doing regular maintenance difficult while the frontend had a complex navigation and dated interface design.

Old YALI homepage design
Old YALI homepage design was dated and overwhelming. Navigation was confusing, burying valuable content and professional development resources.

Because this upgrade was suggested for technical reasons, rather than requested by stakeholders, and because stakeholders were both inside and outside of our bureau, we had to be strategic in the way we approached the recommended changes. External stakeholders weren’t concerned about the proposed technical or visual changes, but rather how the new navigation made their product lines less prominent.

I collected data on how users were navigating the site, testing it against the stakeholders’ product goals, and found that using flexible modules to display timely cross promotion of the products would be more effective than only housing them in the navigation. In this case, end users didn’t know that the YALI Network was managed by three, physically separated entities (the YALI Network, the Mandela Washington Fellowship, and Regional Leadership Centers); they expected a single brand experience where resources are seamlessly accessible. We discussed the new idea with stakeholders which resulted in additional creative ideas, and made the redesign effort something everyone could be excited about.

New YALI homepage design
New site design with organized navigation based on user needs, and a homepage with content blocks that promote all product lines and can be used on multiple pages without extra development work.

One of the most popular YALI Network tools are the series of short online video courses on various entrepreneurship and policy related topics. Hundreds of thousands of individuals have earned certificates for completing these courses an passing an online quiz. In addition to these courses, the Network provides podcasts and blog entries on professional development that were buried deeply on the old site, requiring a direct link rather than being discoverable. By organizing all of these resources under the Learning section of the site, members are now able to filter and sort content and resources by type, subject, or campaign series, and discover new material they hadn’t had access to before.

Old YALI Online Courses page
The old Online Courses page was originally developed as just a list of links. Courses were not visually appealing or intuitive like most e-learning. The FAQs page was long and buried behind a button navigating users to another page.
YALI Online Courses
The new Online Courses page features available courses with FAQs and instructional information all on the same page.

When it came to the visual design changes, I brought in a denser color palette with higher contrast and energetic colors that reflected the pulse of the Initiative. Previously, the palette consisted of white, gray, and a bright blue that wasn’t 508 compliant for low-vision users and screenreaders. I introduced a navy and medium blue that would work well for headers and link text, as well as a golden yellow and a bright red to use as accents along with the classic bright blue from the initiative’s logo. For typography, the U.S. Web System was referenced for simplicity and readability as well as to keep the initiative related to the USG family. Large imagery of current Network members and former Fellows were incorporated throughout the site to create the sense of community and increase the value of the initiative.

In order to have an effective online network community, the online experience should be enjoyable and easy to navigate. By utilizing flexible modules to display content and reducing implementation redundancies the site is easier to manage for internal stakeholders. By organizing the site in a way that makes sense to end users’ expectations, rather than stakeholders’ political needs, Network members continue to increase, feeling empowered and valued by the growing initiative.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close