Unifying Mozilla Fellowships’ web presence to strengthen the visibility of the program
My role: UX/UI Designer
I contributed to this project from start (research, ideation, wireframes) to finish (UI design – based on existing Mozilla Foundation design system, implementation with engineers). I also participated in stakeholder management (met with diverse stakeholders, addressed lots of feedback).
Problems we were trying to solve
The Mozilla Fellowships program didn’t have a unified web presence. Different types of fellowships were hosted in different web properties. This organization made it difficult for applicants to visualize our full range of fellowships or discover new ones, discouraging applications.
The proposed solution
To unify those fellowships web properties into one (this was part of a bigger project from Mozilla Foundation to unify our scattered online presence into one website).
Process
I Discovery Phase
From the kick off meeting we had with stakeholders we learned that the goal of this project was to create a place that contained all the information for:
- Potential applicants
- Current and past Fellows, serving as a connection hub
- People interested in learning more about our Fellowship program: funders, media and others
We did an analysis of all the existing web properties that hosted fellowships content so we could leverage the good things we already had in place and identify the areas that weren’t working and needed to be addressed.
An information architecture benchmark analysis was also done to identify best practices in the area of fellowships. We tried to learn about the structures our main target audience (potential applicants) were already familiar with.
II Planning Phase: UX
In the next step, we identified the personas that better represented our target audiences and developed a user journey for each.
After that we had enough information to start doing the wireframes. We did an interactive prototype so we could go through the experience with the audiences’ mindset and identify opportunities for improvement. At the same time we were doing this project we were also migrating to a new CMS. We worked closely with engineers to make sure it would be possible to implement the components we wanted. On top of this, we had to think not only about this particular fellowship hub but also how the components could be reusable across the site (and the opposite too: how to reuse existing site components in this hub).
After this step, we needed to check in with stakeholders. Since this project had many stakeholders working remotely from different time zones it was very hard to find a time that worked for us all. The solution was to record a video walking them through our plan along with links to prototypes and a document to collect asynchronous feedback. The stakeholders were very pleased with this solution because they thought it was very easy to follow.
“What a great way to do the presentation! Thank you!”
Feedback from one of the project’s stakeholders
III Delivery Phase: UI and engineer implementation
After some tweaks in the UX based on feedback, we moved on to designing the interface. We had a library of components and color scheme already in place (for the rest of the site) so the UI work was mostly creating illustrations/icons, choosing/editing pictures and organizing the elements in a way that made sense in terms of hierarchy and flow.
We worked closely with engineers on not only the public-facing part of the site but also the CMS side: how people input the information and how the different components connect to each other.
Results
We implemented this site around the end of April/May 2018. In November of that same year the fellowships hub had around 18K pageviews.We successfully achieve the goals we had set. We also made it easier for staff to update the page and direct others to it.