Creating YouHue’s Landing page
YouHue is an early-stage startup from Dubai that seeks to make emotional wellness an everyday practice in schools. They’ve built an iOS classroom mood-tracking app that helps kids identify and express their emotions.
My role

I joined the YouHue team in May 2017 when it launched V1.0 of its app. As a freelance UX researcher and designer, I’ve been working on helping the team research and define its audience, collect product feedback, and explore ways we can improve our brand and product to support the needs of educators.

Some context
As an early-stage startup, the primary goal is determining market fit. While the founders hustle to push the app into the hands of teachers and students, there has been a lack of resources dedicated to building a strong brand identity and online presence.

Examples of old marketing materials:
The old website and marketing materials were:

I was delighted to spearhead a website redesign, as this was an opportunity to help elevate the YouHue brand, better convey the value of YouHue to its audience, and help gain new business by optimizing the site for lead generation.

Design challege
Tell a story that resonates

I set out to design a landing page for YouHue, that effectively:

  • showcases the functionality of the app.
  • educates users about the value of the app and how it can benefit them.
  • gains the trust and interest of educators to compel them to sign up for the pilot program.

Discover & strategize
Understand the audience

Before designing YouHue's landing page, I needed to better understand the target audience and why a product, like YouHue, could be of any help to them.


Through outreach on teacher Facebook groups, I collected survey responses from 74 educators around the world. I set out to learn about their behaviors, e.g. do teachers already track student well-being? If so, how? Why would collecting this data be of value to them?

Do you track student wellbeing?
How do you track it?

What would this insight empower you to do?
“Understand their needs, feelings and wants. It's so hard to understand them, I would love more insight into their worlds! This would help me engage them in a way that they learn faster and better”

“If I know how they look, act and react on a normal day well then when something is wrong I will know faster and fix it/support them.”

“Many of my students come to school with stress about shelter, food, basic necessities. I want to know if mom/dad is drinking or using again, so I understand the cause of their outbursts rather than react without compassion.”


Some of the key takeaways from survey results were that:

  • Majority of educators agree that understanding students’ emotional needs are necessary for helping students learn.
  • Most educators track student wellbeing manually (e.g. written notes) and not on a consistent basis.
  • Most educators believe 1:1 conversation is most valuable for checking-in with students, but having enough time to meet with each student can be a challenge.
  • Teachers have trouble knowing how to act on the data they collect.
  • Teachers don’t know how best to report this data to parents and faculty.
  • Teachers are skeptical about bringing new technology into classrooms due to on-boarding issues, time-suck, and getting approval from parents and administration.

Interviews & personas

To go deeper with some of the questions and gauge teacher interest in using a student mood-tracking app, I selected 4 survey respondents and conducted phone interviews over the next few days.

I crafted personas based on the people I interviewed to remind me throughout the design process about who I was designing the landing page for and why.

Discover & strategize
Market research

The goal of my research was to familiarize myself with the mood-logging app landscape and learn how it’s being used in education.

Diving deeper into my research, I narrowed my focus to five products that most closely align with YouHue’s brand identity and product offerings: Woebot, Wysa, ClassDojo, Zones of Regulation, and Mood Meter app. My goal was to understand how these companies present and communicate about themselves to their respective audiences.

Create the story
Communication strategy

Armed with new insights, I collaborated with key stakeholders to hone our brand communication strategy. This meant a complete brand audit to refine aspects of our brand (i.e. our company mission, brand personality, key values etc.) to resonate more effectively with our target audience.

I took inspiration from WoeBot and ClassDojo, two competitors that most closely align to YouHue in terms of product and brand personality.

Next, I used storyboards to outline the narrative for each section of the landing page and prioritized the order of information based on relevance to the target audience. I then created a copy doc where I outlined the content for each section.

Create the skeleton
Test copy with wireframes

With each section and its content properly outlined, I was prepared to build low-fidelity wireframes.

I used the wireframes to create a prototype of the landing page for the first round of testing, and recruited 3 participants from my survey for testing. My goal was to identify areas of improvement in the overall flow of information and content before diving too deep into designing.

Questions I set out to answer:

I followed guidelines while testing.

Feature sections

One of the primary goals behind the redesign was conveying the value of the app to educators in a compelling way without overloading them with information. I set out to accomplish this by simplifying the copy and utilizing visuals to aid in storytelling.

The feedback from testers was overall positive, in that they felt it was easy to understand what YouHue is and how it works. However, there was enough confusion over the 'Key-topic Analysis' feature that I knew I either had to add a ‘learn more’ CTA to give educators a way to find out more information, or provide an example with visuals to support the copy.


The feedback from the first round of testing gave me several ideas for how to improve the landing page. I set out to:

  • Refine the ‘What YouHue can do for educators’ section, specifically the part about the keyword analysis, to be more clear.
  • Add 'Learn More' CTAs to give educators a way to find out more information if interested.
  • Make ‘Get in Touch’ its own section where users can send an email directly on the site.
  • Add or update a section to include “How YouHue is used in the classroom" since this is a very common question.
Create the look
Visual design

With every new project, I like to create moodboards to draw inspiration for my visual designs. I used Land-book to peruse beautifully-designed landing pages and pinpoint elements I liked, asking myself: what makes these designs successful? How do they use visuals to communicate a message?

I specifically looked for landing pages that showcased data-driven products to see how complex graphs and tables were illustrated in simple, approachable ways.

Key takeaways
  1. Use subtle gradient backgrounds to draw attention to important information
  2. Use consistent iconography to illustrate key features
  3. Demystify data by using simple illustrations
  4. Show real people using the product to convey trust and legitimacy
  5. Add box shadows for a nice contrast to flat design elements

Style guide

I wanted the visuals to complement YouHue’s refined brand strategy while utilizing the product brand guidelines created by the designers of the app. I accomplished this by making subtle yet visible adjustments to the color palette, logo, and typography.

Revised color palette

I modified the color palette (slightly!) to reflect the newly identified brand characteristics: energetic, trustworthy, playful, smart and caring.

The most apparent change was adjusting the YouHue brand color from a dark violet to a bold, energizing blue-violet. I also added subtle purple gradient backgrounds to attract attention and communicate a soft vibrancy.

original layout vs. modified

Logo modification
I took the existing logo and adjusted it slightly to make room for a tagline “Reflect. Learn. Grow.” I used the Fibonacci Square to establish proportionality between the graphic mark, the name “YouHue” and the tagline. I then altered the colors to correspond with the new color pallette.
The font Omnes was used as primary typeface for the old marketing materials and website copy. Omnes, while it conveys the brand characteristics of care and friendliness, can be difficult to read as body text. I paired Omnes with Proxima Nova to aid in legibility and readability while also conveying a mature yet friendly message.

Create the product
Hi-fi Mockups
Next, after several iterations later, I create the final prototype for YouHue's landing page.

Key learnings & next steps

The process of researching, conceptualizing and creating YouHue's landing page required distilling the most important elements of the brand and product into an engaging web experience. Through this project, I contributed to the strategic development and visual refinement of our branding, which has successfully attracted new business.

Next steps

In order to continue improving my front-end development skills, I am currently in the process of developing this prototype from scratch.