Background
The Steele Family Foundation partnered with Insight to bring its philanthropic vision to life. Their WISE Scholarship Program was founded on a mission to create a World Impact through Scholarships and Education, and with the help of corporate partnerships, students in the program can receive up to four years of scholarship funding to pursue their post-secondary education.
The scholarship program follows an “Earn to Learn” approach, allowing students the opportunity to earn a calculated scholarship award through a three-pillar point system made up of Grades, Extracurricular Activities, and Non-Formal Education. While students are engaged in the four-year program, they are paired with a guidance counselor (also known as an SSA), who monitors their progress and provides personalized guidance to help students succeed.
When the Steele family reached out to Insight, they wanted to enlist the help of experts to create an enhanced experience for all users of the WISE Portal.
The WISE portal needed to account for multiple user groups:
Students - high school participants located around the world (specifically targeting Ghana initially).
SSAs - guidance counselors at the student’s high school.
Donors - financial contributors for scholarship funding.
Alliances - partnered organizations that collaborate with the WISE Scholarship Program.
Though Students and SSAs would be the primary users of the Minimum Viable Product (MVP), there were other user groups to consider when building the portal. Donors would need visibility into their financial contribution history and Alliances would want to see their brand visually represented.
Project Details
Timeline: 3 months | My Role: UX Lead
Our product team included a project manager, front-end and back-end developers, a business analyst, a QA tester, and myself, as the lead UX designer. We worked closely with the client, collaborating with a representative from the Steele Family Foundation who acted as the Product Owner. The project goals for the six sprint agile engagement were:
• Create a backlog with defined features for MVP.
• Design an engaging interface that provides an intuitive experience for all users.
• Build an MVP for the scholarship portal.
• Integrate the third-party platforms needed for MVP experience.
• Design an engaging interface that provides an intuitive experience for all users.
• Build an MVP for the scholarship portal.
• Integrate the third-party platforms needed for MVP experience.
As the lead designer, I was responsible for making sure the interface was intuitive, as well as aesthetically pleasing. It needed to be visually engaging to catch the eye of high school users, while still being easy to use and understand on a global scale. The scholarship portal also needed to be readily customizable to swap out logos and colors to reflect the brands of partnered Alliances.
My contributions included:
Foundational Design. Creating a pattern library of reusable design components in Figma. Crafting a system color palette to support rebranding for Alliance partnerships. Translating data into graphic visualizations to broaden global users’ understanding. Designing mockups to preview design ideas prior to development. Tailoring the interface and experience to support global users and multiple user groups.
High-Fidelity Prototypes. Building clickable prototypes to demonstrate user flows and interactions.
User Personas. Developing user personas to align the team on the ‘who’ and ‘why’ behind the portal.
Design Quality Assurance (QA). Reviewing the interface and functionality in a test environment to assure quality.
Foundational Design
Using Figma, I created and organized 190 components and designed over 40 mockups to illustrate the user journey for Student and SSA users.
It was important to arrange brand elements, such as color and logos, with flexibility in mind. The branding would change often to reflect the brands of individual Alliances and the interface still needed to be accessible.
Although the scholarship portal would support multiple languages, it was essential to use visual graphics whenever possible to reinforce understanding and ensure all users understood how scholarship points would be calculated.
High-Fidelity Prototypes
In Figma, I linked mockups together to demonstrate user flows, interactions, and how third-party integrations would be embedded into the portal. I presented these high-fidelity prototypes to the client during our first project demo, which helped us refine the vision before development.
User Personas
For the MVP, I created user personas for our two main user groups: Yaayaa Boadi (Student) and Omane Asamoah (SSA). Giving users an identity helped to tell the story behind who our users were and what they needed from the scholarship portal. These user personas helped keep the team aligned with product goals and make guided decisions on future design and features.
Design QA
After designs were developed, I reviewed them in our testing environment to ensure the developed scholarship portal matched designs in Figma and provided a seamless user experience.
Project Challenges & Lessons
• Defining Scope for MVP. There were lots of big feature ideas for the scholarship portal and at times it was challenging to narrow down the focus to just MVP. To pin down “evolving” requirements and establish a clear roadmap, the team worked together to refine our user stories to be more specific and increased the client’s visibility into the product backlog.
• Designing for Global Users. The scholarship portal would have users from a wide range of countries and demographics. Designing a global application with no access to real users came with risks and challenges. After launching MVP, gathering feedback from users would be a top priority but during this phase of the project, our user personas helped to guide design decisions.
• Collaborating as a Fully Distributed Team. Finally, collaborating with a fully distributed team in different time zones required us to be proactive and strategic while working together. Our team relied heavily on tools such as Figma and Azure DevOps to communicate and document product changes.
