top of page
Beela logo yellow hexagon with line drawn bee in the center

Beela

Swedish nonprofit Beela has been guiding women and nonbinary immigrants into the tech market for the last couple of years.

As they have grown so have their client needs. Tech Fleet was hired to build a new website for Beela to include additional offerings as well as implement a rebrand.

CLICK ABOVE TO PLAY PROTOTYPE WALKTHROUGH

ROLE:

  • UX Designer

METHOD:

  • Agile

TEAM:

  • UX Design

  • UX Research

  • UX Writing

  • Product Strategy

  • Development

TOOLS USED:

  • Figma & FigJam

  • Coda

  • Miro

  • Trello

  • Usability Hub

Anchor 1

Reviewing Previous Research & Design

Tech Fleet had completed two previous phases of work with Beela. The first was research-focused, while the second continued research and began service design. 

We took the initiative to create a Project & Research Repository, the latter of which I would develop as a stakeholder handoff.

Creating a living Project Archive

  • Consolidating information across:

    • Multiple Google Drive folders

    • Countless Miro boards

    • Recorded meetings

  • Consistent and intuitive labeling

  • Reducing the need to dig/click through files

ALIGNING WITH CLIENT & USERS 

Our scope was to create a new website per user needs, Beela branding updates, and integration of their content sharing platform, Hive (additional Tech Fleet project team working simultaneously).

One essential aspect of the new website is that it needs to be easily updated by Beela volunteers of all coding levels. This constraint would need to be kept in mind throughout the project while considering elements the client would need to update and the frequency. 

Screenshot detail of the team's CX Map today

Product Strategy and Client collaboration: CX Map of "as it is today" helped bring clarity to the project

BUILDING A DESIGN SYSTEM

Beelas in-house Graphic Designer provided the Design team with a Style Guide and newly revised branding specifications. 

The Design team gave recommendations on how best to incorporate the brand changes. We also created a Design System to ensure consistency across the website and social platforms.

I was personally responsible for:

  • Typography 

  • Illustrations

  • Images

  • Responsive Headers & Footers  

  • UI Elements/Components

As well as contributing to:

  • Icons

  • Buttons 

Beela
Design System

PROVIDING MORE VALUE FOR USERS

Screenshot of the original Beela Website
Screenshot of the original Beela Website

Original Beela Website

Following a Heuristic Evaluation of the current site, quite a few usability issues became clear:

  • Broken links

  • Missing pages

  • Weak or missing CTAs

Slack had previously been identified as an outlet for Beela to grow and interact with their community, but the website was missing any mention of it.

Research discovered in Mentor Interviews that many had little interaction with the website and they lacked onboarding. This was a common theme amongst user groups. Design would focus on addressing these issues and adding additional value to the new website with better communication and community onboarding. 

Identifying Risks

While doing initial sketches of my assigned pages, it became clear to me that a vital aspect of this design was not built out enough to sustain user engagement. 

The risk here was too great to continue based on our current CX map. All the teams came together to discuss solutions and pivot. Both the CX map and site map were adjusted for future iterations. 

Screenshot of notes in Figma file

Pollination Mentoring Program page iterations

Cross Functional Collaboration

After the project's pivot, cross-functional collaboration became essential to stay aligned. 


I worked with:

  • UX Writing to ensure content was appropriately implemented in the designs

  • Research to assist in analysis and get feedback on designs

  • Strategy to write task flows and success criteria to assist Development

  • Development to document and understand what they needed for handoff, as well as any constraints to be aware of


 

Beela's Stay Connected website page on a Laptop screen

Getting Creative with Limitations

With Beela being a 100% volunteer 
operation spread across Sweden, they have not had very many occasions to take quality photos as a community. Nor a lot of time to create that type of content. 

 

The previous website utilized open-source images. Beela is a vibrant group of people from around the world and I wanted to be able to show that spirit better. 

So, I created customized images that would:

  • Compliment Beela branding

  • Provide more personality and unique imagery than standard open-source images

  • Feature a more diverse group that better represents Beela users

Digital collage with a deep yellow background with a black and white photo of a diverse trio of people
Digital collage with a black and white photo of two diverse women chatting
Digital collage featuring Beela founders Juliana and Denise

Customized Images

USABILITY TEST UPDATES

In the spirit of time, Design collaborated with Research in working sessions to update the prototype following the first set of usability tests. Rapid prototyping enabled us to validate the changes in the following round of tests. 

The majority of user comments were about design preferences, but some of the usability updates were:

 

  • Adjusting specific areas of content for readability

  • Establishing consistency and button hierarchy 

A woman looking down on a phone browsing the Beela website

Responsive Designs

Mockups of the redesigned Beela website on mobile, tablet, and laptop screens

It was important to me to design the screens at different breakpoints so that the user experience was undiminished and the site performed as designed on every device. 

Desktop, tablet, and mobile screens were designed to provide Development with design intentions if Bootstrap did not respond appropriately.

Preparing for Future Work

Project Handoff

To alleviate future teams from the lengthy process of sifting through months of work and improve the efficiency of internal project onboarding, I created a template to track research methods and design assets over the project history. This enables future teams to access insights at a glance and refer to appropriate materials.

Screenshot of Coda Project Repository

Developer Handoff

After consulting with the Development team, I created a numbered system and documented each page or component with:

  • Specific component behaviors and interactions

  • Outside links plus how they should open

  • Visual assets and placement

  • Content and placement

Screenshot of Figma documentation for Development
Taking a fika with a cup of coffee and an ipad browsing the Pollination mentoring program on Beela's website

FINAL THOUGHTS

One thing that became very clear to me over the course of this project was how important the user experience of UX is. Our internal stakeholders benefit from human-centered design as much as our external ones and users.
 

  • Clear, candid, and time-appropriate communication helps for successful collaboration.​​

  • Handoffs need to be organized, usable, and provide actionable next steps. ​

  • Documentation encourages organization and eases cross-functional teamwork. Even if minimal, it should be included with each task.

Desk with a monitor showing the About page for the Beela website
bottom of page