BrainZell's Website

BACKGROUND

BrainZell is a biotech startup which grows mini brains from human stem cells for research purposes. These organoids are subsequently infected with diseases, allowing BrainZell to test and identify potential new treatments. This process replaces animal testing, promoting a more sustainable method for medicine discovery.

THE BEGINNING

BrainZell, being a startup, had a very basic website with extremely limited information. I joined BrainZell with the goal of making them a new website which informs potential customers and partners about their work.

THE PROCESS

1. Discovery
   • Understand BrainZell's goals
   • Research of industry
   • Competitor Analysis
2. Strategy & Planning
3. Wireframes
4. Content Creation
5. Implementation

DISCOVERY

To understand the scope of this project, I focused this phase on understanding BrainZell's expectations of me and the goals of the upcoming website. I interviewed the team, and did research on the industry and the startup's target audience. The conclusion I made was that this website will focus on building awareness of BrainZell and providing a contact point.

I also did a thorough competitor analysis. We wanted to figure out what information competitors provided, what way they provided them it, and the strengths & weaknesses of their websites. This helped me later on when deciding which pages to include and the sections within those pages.

STRATEGY & PLANNING

I knew about the competitors' content, and now it was time to figure out our content.

WORKSHOP

I facilitated a workshop in order to figure out which pages to have, what sections to have on each page, and the visual style direction. We were three people in total.

WIREFRAMES

I initiated this phase with the creation of low-fidelity wireframes, which provided a basic structure and layout for the website. Upon gathering and incorporating feedback, I then progressed to crafting high-fidelity prototypes. I played around with colours and ended up with a blue gradient style, based on BrainZell's colours.

CONTENT CREATION / VISUALS

In the workshop I facilitated earlier, we decided on going with a 3D style to stand out. I used Blender create 3D images, one brain and a plate with mini brains. The so called "well plate" is what BrainZell grows the actual organoids inside of.

This was my first time making something 3D. The brains I used a free asset for, but I made a lot of changes to it, and the plate I made from scratch.

A CHANGE OF PLANS...

As I was wrapping up things, I was told in a meeting that the wireframes need to be reworked. Although BrainZell enjoyed my work, they wanted to change the direction of the website and include images of real people and devices rather than 3D-modelled ones.

And so, we worked together to find pictures we thought would suit, and also ended up finding a video we thought would fit the header instead of an image in order to keep the website "alive". The root of medicine is to keep people alive and healthy after all, so a static website didn't cut it.

I re-strategised and made changes to the design according to feedback. The new version has a simpler background and colour palette, the images are no longer abstract, and details are refined.

TIME FOR LOW-CODE

BrainZell used a no-code platform called one.com to host their website. It was my first time using this particular platform to develop a website, but most platforms are quite similar and I adapt quickly. Development took approximately 2 weeks and I coded several blocks in order to get them to look and work like my Figma design.

Challenges

Throughout the project, a couple of challenges emerged that required creative problem-solving. One hurdle was the realization that the low-code platform (One.com) lacked a blog function, which was important for the team. I ended up integrated a WordPress, which I then had to spend time coding to get it as similar to the rest of the website as possible. Another issue was, as mentioned, reworking the style of the website when I had almost finished the protoype. But we pulled through!

ON A CLOSING NOTE

Once I was done coding, the project was complete - I had successfully translated the BrainZell concept into a fully functional website from scratch.

This project has been a rewarding journey, from concept to a polished, user-friendly website that effectively spreads knowledge about Brainzell. Throughout the process, I worked diligently to ensure that every element of the site aligned with BrainZell's mission and provided an engaging, intuitive experience.

Working with the team was lovely, we pulled through all challenging aspects - like adapting the style mid-project and simplifying complex science.