LEARNING LAB

UI/UX / Content Strategy / Branding

This project was for Bixal's long-time client, USAID. As part of their family of learning and resource websites (also known as "links sites"), Learning Lab is an interactive community where members can access tools and resources centered around Collaborating, Learning, and Adopting (CLA), throughout the USAID Program Cycle.

THE CHALLENGE

We were tasked with migrating the website from Drupal 7 to Drupal 9 while asynchronously developing a new content strategy and updating UI components centered around accessibility. We were also asked to add a couple of new features to the site to increase engagement and facilitate their new content practices.

THE GOAL

My goal was to define branding guidelines, update UI components, compile them into a cohesive library, redesign the pages to accommodate the new content strategy, and add new features that will make accessing the resources easier for the user.

THE PROCESS

  • Discovery + Stocktaking

  • Rapid Prototyping + Wireframing

  • Delivery

  • UAT

Discovery + Stocktaking

I began the design process by analyzing the heuristic evaluation that had been done prior to my arrival on the project, it was clear that users were having a hard time accessing resources on the site which included limited search options. There was also no mechanism to effectively organize or tag resources.

Some of the other challenges included a confusing navigation flow that pushed less-than-important features to the forefront and a way to filter search results as well as resource items. With this in mind, a complete design audit of the current site was done that highlighted all the broken features and proposed changes.

I then did a competitive analysis and some discovery on similar sites that had better implementations of the features we were looking for and started compiling all the different ideas in collaboration with our delivery team to make sure that we could support the proposed feature set.

Yt1b0qrCMwmy4d0W.png
0ZUhYinZGDKkbf5j.png
edozyN6tBUOXddta.png
HxwwnKmKzHTqX2wA.png
hgEFjJcqK6Bm7tvE.png
yqGAp6ougWwOB1Th.png
f1h8XM9nndeepp7P.png
XSShdZQIxmJrev1t.png

Rapid Prototyping + Wireframes

After some rough sketching, I used Figma to develop some low-fi wireframes to lay out the resource pages as a starting point. While those were being tested internally, I began using the U.S. Web Design System (USWDS) to rapidly prototype new components since we were against the clock during the design phase.

I then used those components to lay out the pages as we went along. This method allowed the UX designer and Content Strategist to asynchronously mockup rough layouts on their own as the content strategy was approved by the client.

UI DesigN

Throughout the project, my goal for visual identity was to "not make this feel and look like yet another government website". This proved to be a challenge since the primary colors were red, white, and blue. Although it was mandated to reuse the previous brand colors, I was able to rethink how the color percentages were used sitewide and incorporate a fresher approach using whitespace and neutrals to achieve an approachable, confident look.

I also advocated for the use of photography in key places throughout the site keeping in mind that the client was very apprehensive about using it due to upper management approvals.

Brand Guidelines + Component Bank

Reflection

This was one of the more challenging contracts that I've been on since we were juggling fluctuating budgets with the client, changing team structure, and major scope creep throughout the project. However, it afforded me the opportunity to explore new ways of developing the design system and mockups as other team members were simultaneously completing their tasks.

I also had to think strategically about expectations and how we could honor them with such a short timeline, limited budget, and creative freedom. Overall im proud of the features were able to implement despite the challenges.

Moving forward, I would want to have the opportunity to be present when the testing was conducted so that I can have first-hand knowledge of how users interacted with the site.

TOOLS USED

  • Miro

  • Figma

  • Photoshop

My Role

  • UI Designer

  • Brand Design Consultant

Team Credit

  • 1 UX Researcher

  • 2 Developers

  • 1 Project Manager

  • 1 Data Analyst

  • 1 UAT Tester

Previous

BRONZE H St - Branding Shoot
Next

One Dine - One World Observatory