back to work
  1. overview
  2. problem
  3. process
  4. solution
  5. outcome
  6. reflection
workaboutresume

Case study · Beewell Indonesia

Turning a newsletter signup into direct school inquiries

  • UX Audit
  • Web Design
  • Information Architecture
  • Prototyping

Status: Prototype · inquiry form shipped

Role
UI/UX Intern, sole designer
Team
IT Team 4 developers 1 designer
Timeline
Jul - Oct 2026
Tools
Figma, HTML/CSS/JS, Vercel
The redesigned Beewell homepage: Promoting school well-being, with Book a consultation and partner school logos.
The redesigned homepage: a clear call to action above the fold, with partner schools right underneath as proof. Live prototype: beewell-website.vercel.app

At a glance

A clear way in for schools

As the sole design intern, I redesigned Beewell’s 4-page site around two audiences, school leaders and parents. Replacing a newsletter-only signup with a direct inquiry form raised monthly school inquiries by 60%, from 5 to 8.

+60%

monthly school inquiries, from 5 to 8

4

pages redesigned, plus 3 new pages

1

all-hands presentation to the whole company

Context

Beewell Indonesia is a school wellbeing consultancy. Its website explained what it did, but gave visitors almost no way to act on it.

As the sole designer during my internship, I audited the existing homepage and redesigned the 4-page website.

Problem

Three things held back sign-ups

Visitors could learn what Beewell did, but the site gave them nowhere obvious to go next.

The original homepage, annotated: 1, the logo wasn't clickable, so there was no easy way back home. 2, the hero had no call to action. 3, the only way to capture interest was a newsletter signup.123
  1. 1The logo wasn't clickable, so there was no easy way back home.
  2. 2The hero had no call to action.
  3. 3The only way to capture interest was a newsletter signup.
Before: the homepage explained what Beewell does, but never invited a school to take the next step.

Process

Designing for schools, parents, and what could be built

I started by auditing the live site to find where visitors had no next step.

I then defined the two audiences the site serves. School leaders and counsellors are the decision makers: they need to see what a programme involves and how to start one. Parents follow along: they want practical help and to know what is happening at their school. Every decision below was checked against which of the two it serves.

I built the redesign as a working HTML, CSS and JavaScript prototype hosted on Vercel, so the team could click through real pages instead of static mockups.

For the visual direction, I looked at Bee Well’s social media, where the marketing team already had a consistent system: only the logo colors (teal, yellow and coral) on white. The old site’s purple appeared nowhere else, so I dropped it to make the website match what schools and parents already recognize from Instagram.

Solution

A clear way in, one piece at a time

7a

A menu bar and hero that point somewhere

The old hero said what Bee Well does but offered no next step, and the logo didn’t link home. I added a “Book a consultation” button to the menu bar and a primary call to action in the hero, so a school can act from any page without scrolling. A secondary “See our framework” link stays for visitors who aren’t ready to talk yet. The button speaks to school leaders, the audience that can actually book Bee Well.

The new menu bar with Book a consultation, and the hero with two calls to action.
A new menu bar and a hero with a clear call to action, so visitors see what to do before they scroll.

7b

Splitting one signup into two ways to start

The only way to show interest was a newsletter signup, which treated a school ready to commit the same as a curious parent. I split it by audience: school leaders book a consultation, while parents and teachers get the newsletter. This is the change that later became the direct inquiry form.

Two ways to start: for schools, book a wellbeing consultation; for everyone, get the monthly newsletter.
Different visitors get their own path in, instead of one generic newsletter signup.

7c

The homepage reads like an argument

I ordered the page like an argument: who Bee Well is, the gap schools face, the framework, how a year works, upcoming events, then the two ways to start. Each section answers the next question a school leader is likely to ask.

The full redesigned homepage, shown in three side-by-side strips from top to bottom.
The full homepage, shown in three parts: it moves from who Bee Well is, to the gap schools face, to how a year works, and ends on two clear ways to start.

7d

Proof lives on its own pages

Events, partners and community were buried or missing on the old site. Giving each its own page keeps the homepage short, and real partner logos and past events do more to convince a school than claims on the homepage. The Community page is the one built mainly for parents, with plain-language guides.

Three new pages side by side: Events, Our Partners and Our Community.
Three new pages show schools what Beewell runs, who it works with, and the community around it.

7e

An About Us page with a story and a process

Before booking a call, a school leader needs to know what working with Bee Well involves. The About page answers that with a four-stage year (Assess, Map, Build, Review), so the commitment is clear up front.

What a year with Bee Well looks like: four stages, Assess, Map, Build and Review.
Origin story, a four-stage engagement process (Assess, Map, Build, Review), team, school list, and certifications.

7f

An Events page that stays current

Events change often, so the page had to be easy to keep current. Bee Well already managed its content in WordPress, so I designed the event cards around the details the team already enters for each event, instead of adding a new tool or workflow.

The Events page: BeeCon 2026 and Bee Fest 2025 cards, with when, where and who details.
The new Events page: upcoming events first, past events below, and a way for a school to ask to host one.

Before / after

Same company, a clear way in

The original purple homepage next to the redesigned teal homepage.
Same content and services. The redesign drops the off-brand purple for the logo colors used across Bee Well’s social media, adds a call to action, and gives visitors paths in beyond a newsletter signup.

Outcome

From a newsletter to direct inquiries

I presented the redesign to the company at an all-hands meeting. The newsletter-only signup was then replaced with a direct inquiry form for schools.

+60%

monthly school inquiries after the inquiry form launched, from 5 to 8.

Reflection

A clear audience turns taste into decisions

Defining a clear audience early made every later decision easier. Once I knew whether a page was for school leaders or for parents, choices that had felt like taste had a clear answer.

I also learned to set aside what I personally found nice in favour of what fit the brand. Matching Bee Well’s social media meant dropping colors I liked, but it made the site feel like the same organisation people already knew.

Next case study

Helping 11,000+ grad students find their next step

UBC Graduate and Postdoctoral Studies · grad.ubc.ca

Read the case study →