Beela: A Responsive Website Redesign
Client
Beela
Role
Lead Content Designer
Team
UX Researchers, UX Designers, Content Designers, Product Strategists, and Developers
Timeline
March-June 2022
View PrototypeBackground
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.
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.
WRITING + DESIGN WIREFRAMES
In collaboration with the design team, I wrote content for all of the website pages. I kept the style guide in mind. My goal was for the writing to be simple and easy to understand. See below for the wireframes for the home and about pages.
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.
Through research, we learned that most people starting tech careers were not familiar with Slack. While "Join Slack" would be concise for button copy, it could confuse users who aren't familiar with Slack. I included "Community" in the button copy to provide more context.
.png)
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.
.png)
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 PrototypeNEXT STEPS / WHAT I LEARNED
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.
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.
Bees are really cute. And that's a wrap!
.png)
