Beela: A Responsive Website Redesign

Client
Beela
Role
UX Generalist, Lead Content Designer
Team
UX Researchers, UX Designers, Content Designers, Product Strategists, and Developers
Timeline
March-June 2022
View Prototype

Background

Beela is a nonprofit that helps women and non-binary Swedish immigrants break into tech. Tech Fleet, an apprenticeship agency, already completed 2 phases with Beela.

Challenge

On the current website, it is difficult to find and view information. In addition, the website is not responsive.

Solution

A simple and straightforward responsive website, where users can learn more about Beela and apply for their programmes.

DEFINING THE PROJECT SCOPE
2 project teams, 1 client
In previous phases, Tech Fleet teams conducted research about Beela users. In order to address the problem of community engagement, they created a Slack community for Beela.

In phase 3 of the project, we had 2 separate teams for Beela's website and Hive, a learning platform. Teams included UX researchers, UX designers, product strategists, developers, and content designers (me!). I was primarily on the website team, though I also contributed work to Hive.

From the start, we knew we needed to work closely with each other, so the work would be aligned. From gathering information from previous phases and talking with the client, we collaborated with the Hive team to create a customer journey map.


Prioritization
‍We collborated with the Hive team for a MoSCoW prioritization matrix—should do, must do, could do, won't do—to define the project scope.

Must Do


Constraints
DEFINING BEELA'S VOICE
content audit
We started with a content audit to analyze what is currently on the website. The writing team collaborated with the research team on their heuristic analysis.

We noticed inconsistencies with British vs. American English (i.e. programmes vs. programs), as well as names that were confusing without context (i.e. Beela's Talk on its own doesn't make it clear that it's a podcast.)
Archetypes
We explored brand archetypes for Beela. Our team looked at Beela's current content and talked with stakeholders to determine Beela's unique archetype combo. We determined that Beela's brand is a mix of caregiver / explorer.

Beela is motivated to help women and non-binary immigrants to Sweden land tech jobs in a safe, supportive environment. That provides the foundation for people to explore potential tech career paths and take some risky jumps to make it happen.
content style guide
With the brand archetype and content audit in mind, I got to work creating a content style guide. I chose British English, as that is what's used in Sweden. Also, since many people viewing the site are immigrants and idioms can often be lost in translation, I advised not using them. Check out the content style guide here.
MENTOR RESEARCH
RESEARCH GOALS
One of Beela's main offerings is the Pollination Mentoring Programme. In previous Beela phases, teams researched mentees. Our team noticed this knowledge gap, and decided to focus research on the mentor experience.
Discover how tech professionals started mentoring and learn about their experiences.
Understand what matters to mentors. What important things have they shared with mentees?
Learn about mentors' preferences, motivations, pain points, and goals for the mentorship experience.
user interview SYNTHESIS
The research team conducted 5 interviews with Beela mentors remotely. We started by putting insights from each interview on a different color sticky. Then, we affinity mapped the insights and grouped similar ones together. Below is an example of grouped insights.
research results
Mentors feel strongly aligned with Beela's mission and find mentoring to be rewarding.
Mentors want to be part of the larger Beela community, not just 1-to-1 mentorship.
Mentors want more guidance in the onboarding process and the programme itself.
meet mira
Based on their research, we created a persona to help guide the design process.
SITE MAP / THE PIVOT
SITE MAP
In order to provide structure for the designs, I created a site map. I included elements the client asked for as well as what we had defined in our project scope.

We decided to include "home" as a navigation bar item for accessibility. We didn't have the time or resources to test if the logo-as-home convention was accepted by everyone. Future phases could look into that.
CARD SORT RESULTS
We conducted a card sort in order to test the site map. We chose to do an open card sort in order to see how people would group the content on the pages.

We conducted a total of 3 card sorts to further refine the sitemap. In that process, we further clarified the names of the sections and removed the content on the pages for simplicity.
THE PIVOT
When I created the first version of the site map, I included call to actions (CTAs) for Hive, a learning platform. Several weeks in, it was clear that we did not have enough content within Hive to keep users engaged. If we had CTAs for Hive on the website, we predicted there would be high drop off rates once users joined Hive.

Therefore, as a collective team, we decided to not talk about Hive on the website. Instead, we would include CTAs to Slack in order to help Beela build their community there. The Hive team would continue to work on the platform, with future phases finishing their work.
IDEATION
WRITING + DESIGN WIREFRAMES
In collaboration with the design team, I wrote content for the pages. I kept the style guide in mind. My goal was for the writing to be simple and easy to understand. See below for examples from the home and about pages.

From a design perspective, we were lucky to have an updated logo and bee icons from Beela's graphic designer.
TEST
USABILITY TESTING
Research started usability testing on the unfinished prototype to help validate the information architecture while card sorting was going on. Design and writing made rapid prototypes to reflect updates from both to test again.
TAGLINE
The first hero tagline, "It's possible to get into tech!" was informative. However, testers liked the second tagline because it aligned with Beela's branding and was approachable, welcoming, and encouraging.
new career
The last phase of Beela conducted research to determine the 3 steps to transition to a new tech career. Through the testing and design process, I made a few changes. I added "start" to the heading to make the statement more accessible. Also, testers wanted to know what transitioning into tech meant. That's why I added, "Bzz: tech isn't just coding!" Multiple testers said they thought that communicated the information well in a fun, accessible way.
About section
Testers thought that 34 people going through the Pollination Mentoring Programme wasn't enough to pull out on the About page. It didn't add anything new to the page. Based on that feedback, I decided to change the section to talk about where the name Beela came from. One of the clients loved that section and remarked, "Yes, that's perfect."
VIDEO WALKTHROUGH
View Prototype
HANDOFF / NEXT STEPS
Handoff to the development team. We made detailed annotations to the Figma file for the development team, including desktop, mobile, and tablet screens of each page. The development team was not able to code the entire website during the phase. Beela and Tech Fleet are planning to have an entire separate phase for development work in the near future. See below for an example of the documentation within the Figma file.
The use of bee language should be examined. In its content, Beela plays with the word "bee." This includes bee, beelieve, and beecome. In future phases, this language should be examined and codified within the content style guide. Possible recommendations are using 1 bee word per page, keeping everything consistent, and/or italicizing the bee part, so users know that it is intentional.
WHAT I LEARNED
Handoff documentation is really important. When we started, we spent a lot of time reviewing what had been done in previous phases. In order to alleviate this for future phases, we maintained detailed documentation in Coda as well as the Figma files.

Things get lost when teams work in silos. While we had a dedicated Slack channel for daily stand-ups, it was not used on a consistent basis by our team. There were miscommunications with the development team, and we thought that they were further along on the project than they were. It's important to have regular communication with all teams to ensure that everyone's on the same page.

It's important to do scope work before a project begins. At the start of the project, we thought the Hive concept was more thought-out and validated by research. However, we found that that wasn't the case. In hindsight, it didn't make sense to approach redesigning the website and Hive at the same time. Tech Fleet has added Project Coordinators to the team to communicate with clients before work begins. Hopefully, this addresses that issue for future projects.
‍
Bees are really cute. And that's a wrap!