Cookie
Project overview: goal, key challenges, proposed solution and responsibilities:
Part of a UX design project, the goal was to design a tool to help people learn how to read a new language.
Due to conflicts in their home countries or just having the wish to live a better life in a new country, many people choose to leave their homes and need to adapt to a new cultural environment. The idea behind Cookie is to give people the chance to adapt more easily by helping them to learn how to read, pronounce, and hear their new language.
The solution proposed is an online social-based learning tool that allows users to learn how to read new languages. Target users include people of all ages who want to be more independent and overcome their fears by better integrating into society.
As an UX designer, I led the app and its responsive website design from conception to delivery. My responsibilities in this project included conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Understanding the user: user research, personas, problem statements and competitive audit
By talking to potential users I was able to develop empathy maps, aggregate the insights and generate problem statements. Furthermore, I analyzed online communities in order to sharpen interview questions, which were then used in interviews. Many interview participants reported being hesitant in day-to-day situations or not being confident enough in the working environment, which would limit their full potential. The feedback received through research made it very clear that users are willing to leave their comfort zone in order to get more active in their social environment, but at the same time, they need guidance in an engaging way.
The gathered information was then turned into two distinct persona profiles. One of them that I chose to work with is Vincent, a young full-time employee working in a new country who needs an exciting new possibility to read and learn the new language because he wants to be able to express himself better when talking to colleagues at work.
Following the definition of the personas, I began a competitive audit by analyzing direct and indirect competitors. This step helped me out by providing the first direction on the gaps and opportunities I wanted to address.
The design process: ideation, paper and digital prototypes, usability studies and insights
A quick ideation exercise helped me generate ideas for addressing the identified gaps in the competitive audit. My focus was specifically on improving the user experience by creating an engaging appearance.
After creating paper wireframes, I set about creating the digital wireframes for the native app. I created a low-fidelity prototype that connected to a defined user flow and showed what navigating through the learning process could look like.
The low-fidelity prototype was used for the first usability study, which revealed additional aspects that needed refinement.
For the unmoderated usability study, five participants were interviewed remotely and the following findings were identified:
- Share information: Users stated that they wished for the possibility to connect with others and learn from each other.
- Additional features: Users want additional features in the translations, like pronunciations or word stress.
- Stronger cues: Users wanted stronger cues about what the features could offer.
Refining the design: creating mockups, high-fidelity prototypes and accessibility
Based on the insights from the usability studies, I was able to apply the design changes like providing a clear and distinguishable section from the home screen to browse topics of interest. Furthermore, the sections were clearly separated by adding colors, images, and descriptive information. Finally, a call-to-action button was added to give users the possibility to connect to others.
For the accessible design, strong visual contrast were applied to the call-to-action buttons. This allowed me to create a clearer differentiation between the modes of the app. By applying a similar layout of the buttons and chapters, I was able to increase the consistency, which made the app easier to navigate.
Responsive design: information architecture and responsive design
My goal was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose is hierarchical and sequential, which makes navigation easy. With the native app designs completed, I started working on designing the responsive website. I used a similar structure to ensure a cohesive and consistent experience across devices.
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Takeaways:
The app provides users with the trust they desire while also making this emotionally charged topic fun and engaging.
I learned that even a small design change can have a huge impact on the user experience. When considering the real user needs, these changes can create acceptance in this field, which encourages users to try out new products.