Get in touch

Yappy - A language learning app

Yappy is a game-based language app that re-imagines the process for learning English as a second language. Yappy offers immersive scenarios based on real-life situations in the UK, where users practice conversation through interactive storylines with varying outcomes based on their choices with the help of your mascot, Yappy. 

My role: User researcher, prototype development and testing. 

Understanding the Users

Empathy in Action

Our journey began with understanding the unique needs and desires of Yappy’s users—English language learners and passionate dog owners. Through comprehensive user interviews, surveys, and persona development, we uncovered insights that shaped every design decision.

  • Persona Development: Crafted detailed personas representing diverse user archetypes, ensuring the design addressed varied needs and pain points.
  • User Interviews and Surveys: Conducted in-depth interviews and surveys to gather authentic user insights, forming a strong foundation for our design strategy.

Qualitative Research

Real-Life Scenario: Coffee Shop Simulation

Following numerous structured interviews with our target demographic, I recognized the importance of creating a real-life scenario to emulate our vision for the game and gain a deeper understanding of how interactions with non-native speakers unfold.

To achieve this, we designed the first level of the game around a coffee shop scenario. In this level, participants were tasked with ordering a coffee and engaging in conversation with the café owner.

This game-based methodology allowed us to pinpoint specific language barriers within a typical coffee shop setting and propose effective solutions for players to overcome them.

Insights and Findings

Through this study, we uncovered the significant advantages of employing a game-based approach to language learning:

  • Interactive Learning: The immersive, real-life scenario provided a practical context for users to apply their language skills, making the learning experience both engaging and effective.
  • Barrier Mitigation: The app demonstrated its capacity to effectively mitigate language barriers, helping users navigate and succeed in common social interactions.
  • Enhanced User Experience: By addressing real-world challenges, the app significantly enhanced the overall user experience, making it more relevant and beneficial for our target audience.

These findings validated our approach and highlighted the app’s potential to improve communication skills in everyday situations for non-native speakers.

Ideation and Conceptualisation

Turning Insights into Ideas

With a deep understanding of our users, we brainstormed innovative solutions to enhance their digital experience. This phase was marked by collaborative ideation sessions and iterative sketching.

  • Collaborative Workshops: Engaged stakeholders in workshops to co-create ideas, fostering a sense of ownership and aligning visions.
  • Sketching and Wireframing: Translated ideas into sketches and wireframes, focusing on intuitive navigation and user-friendly interfaces.

Prototype and Testing

Refining Through Iteration

Prototyping was crucial in bringing our concepts to life. We adopted an iterative approach, continuously refining based on user feedback.

  • Interactive Prototypes: Developed high-fidelity prototypes to simulate real-world interactions, providing a tangible experience for users.
  • Usability Testing: Conducted multiple rounds of usability testing, identifying pain points and opportunities for improvement. Each iteration brought us closer to a seamless user experience.

Visual Design and Branding

Creating a Visually Engaging and Cohesive Identity

The visual design phase was about more than aesthetics; it was about creating a cohesive brand identity that resonated with Yappy’s playful spirit and user expectations.

  • Brand Identity: Crafted a distinctive visual identity, including logo, colour palette, and typography, that embodies Yappy’s joyful and friendly persona.
  • UI Design: Designed intuitive and visually appealing interfaces, ensuring consistency across all touchpoints.
 

To ascertain users’ design preferences, we employed a rank ordering method, a quick and effective way to gather quantitative data on preferred design options.

Methodology

Participants were presented with individual cards, each displaying a different design choice. They were asked to arrange these cards from left to right according to their personal preferences. Their responses were recorded anonymously, ensuring unbiased feedback.

Bringing Yappy to Life

Interactive Prototyping with Axure RP

Yappy’s interactive prototype, built in Axure RP, showcases a fully functional user experience, enabling users to:

  • Complete the Sign-Up Process: Seamlessly onboard new users with an intuitive, step-by-step sign-up flow.
  • Engage in an In-Game Tutorial: Guide users through the app’s features with an engaging and informative tutorial.
  • Achieve Awards and Unlocks: Motivate continued interaction through a rewarding achievements system.
  • Purchase Outfits and Accessories: Enhance the user experience with a virtual marketplace for customizations.

 

Personalisation and Assessment:

  • Global Variables: Utilised to tailor the app experience to individual users, enhancing personalisation.
  • Ability Assessment: Simplified assessments at the end of the tutorial to gauge user understanding and proficiency.

 

Accessibility Features: The settings page highlights key accessibility options, ensuring inclusivity and user comfort:

  • Quiet Mode: For a distraction-free experience.
  • Volume Control: Allowing users to adjust sound levels.
  • Dark Mode: Offering a visually comfortable interface for low-light environments.
  • Native Language Setting: Ensuring the app is accessible to a global audience.

While some advanced game features, such as sound integration and speech analysis, were not implemented, this high-fidelity prototype effectively demonstrates the app’s functionality and potential user experience with these features integrated.