Language learning with the hippo method
Hippo aims to provide an innovative platform to help their busy users learn languages whilst they work out, fusing proven language learning methods with guided work out routines & exercises. The titular, globe-trotting motivational & ever friendly hippo is on hand to guide users through their journey.
Role: UI / Product Designer
Duration: 3 months, March 24 - May 24
Apps: Figma, Illustrator, Photoshop
The problem
Many people desire to learn a new language, but increasingly find themselves time-poor whilst managing their career & social life while staying fit & healthy. Hippo have the solution, but how could they take the first steps to achieving their vision?
The objective
To develop a limited functional prototype, allowing Hippo to directly demonstrate their ideas to investors, test their unique approach to learning with real users, whilst creating the foundation of the first version of the app.
1: Research
I discussed the user flow in detail with the client to ensure I understood the experience they wished to provide for their users, ensuring it was aligned with their business goals.
The app is aimed primarily at time poor users, who enjoy personal development, culture & travel.
We would attract new users by offering a one week free trial giving users access to 1 language & a week’s worth of sessions.
Features such as rewards, motivators, progression & fitness tracking would keep the user engaged & retain their custom of the service.
Although the client had their target market strongly defined, I compiled a few user personas to ensure our plans were fully aligned.
Hippo would be designed to appeal primarily to Gen Z / Millennial customers with busy professional & social lives who love to learn & travel.
We identified that many people want to learn a new language but simply don’t have the time, so combining this need with fitness tackles the issue head on.
Social media has fueled the desire to travel abroad more than ever before with younger, more socially aware users open to learning languages.
Playful references for learning & fitness
I performed extensive competitor research & collected references from other learning & fitness apps. It was clear that our intuition to inject the platform with vibrancy & energy was the right choice.
2: Conceptualize
Fitness & progress tracking
The hippo app had to deliver personal trainer-approved fitness features & work outs with proven language learning methods & meaningful ways to track progress.
Targets & rewards
The app would need to motivate users to progress by setting targets, providing encouragement, motivation & gamifying their progress with unlockable rewards.
A novel approach to revision
Hippo had to provide the user with ways to revise & consolidate their learning by fusing activity & fitness with study.
Open to everyone
Hippo would need to cater to users of all fitness levels & ages, providing settings & preferences to accommodate this.
-
![]()
Sketches & scamps
I began by creating a white board with the user experience represented by sticky notes. After the structure was agreed, I moved to translate this structure to concetual sketches.
-
![]()
Wire frames
With the client satisfied by the general structure & layouts proposed by my sketches, I moved to create a basic functional wireframe version of the app to test before moving forward.
-
![Layouts & colour iterations]()
Layout & colour iterations
Next I began the design process, experimenting with different approaches to key layouts, fonts & use of colour. The combination of indigo & light purple proved very popular.
-
![App UI design refine layouts]()
Refined sizing, layout & colour
With a vibrant energetic colour palette & more developed design, I focused on colour discipline & optimizing sizing of elements to reduce visual noise, while enhancing visual hierarchy.
-
![]()
Final designs
After experimenting with different colour, layout & UI illustration styles I settled on the final design which proved immensely popular with my client & their stakeholders.
3: Final designs
Colour palette
After experimenting with different main brand colours, I settled on indigo as it provides plenty of character & vibrancy whilst feeling sophisticated. I paired this with bold accent colours & light muted shades of blue & purple to provide a vibrant but breezy feel.
Font choices
For hippo it was important to choose fonts that struck the right balance between providing a friendly, welcoming tone with clarity & maturity. I settled on Nunito & Open Sans which I felt delivered this requirement perfectly.
Design system
I created a design system & library of components, featuring interactive states for elements such as buttons, check boxes & info modules. I used an 8-pixel grid to determine spacing scales & sizing of elements. (8,16, 24, 32 etc)
4: Outcomes
I completed the limited prototype in under 3 months, absolutely delighting stakeholders & in their own words, “far exceeded their expectations” & the brief.
The prototype has been used to attract & acquire additional talent to bring the project to fruition including fitness & language experts.
The prototype has successfully enabled the company to secure seed funding allowing them to move the project onto the next phase of their plans.
Reflections
I was very pleased with this project as I was able to interpret the unique vision of the company & transform it into a working, fully functional prototype in a short period of time, whilst maintaining very high standards of quality.
My work has delighted the company, not only securing considerable enthusiasm, but the investment required for them to continue developing the Hippo learning platform.
