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.

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.

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.

• Not optimized for lead generation

Lacked clear CTAs to sign up for the pilot program

• Exhibited Information overload

Amount of information (while quality research) felt overwhelming and difficult to skim

• Lacked visuals to support content

Not easy to quickly understand what is YouHue and how it works

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.

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?

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.

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.

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.

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:

• Can users understand what YouHue is, who it’s for, and what it does?
• Does the copy resonate? Is it clear and concise?
• Does the overall flow of information make sense?
• Are the CTAs readily apparent?

I followed guidelines while testing.

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.

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.

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.

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.

Next, after several iterations later, I create the final prototype for YouHue's landing page.

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.

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