Gymglish
Final project in UX/UI bootcamp
Role: UX/ UI Designer
Duration: 2 weeks
Team: Jasmin Schmitz and Tina Aas
Device: Responsive Website
Tools: Figma, Procreate, Google Forms.
Product: Language E-learning / Flashcards
The Topic
I worked with Gymglish for 2 weeks. They wanted to give their users an opportunity to test and memorise vocabulary outside of their daily lessons. They want to give them more flexibility and the choice to study more if they wish, that is why our mission was to add a flashcard function to their website. They should also be available for people that have not signed up for lessons.
Kickoff
To kickoff the project we had a video call with the CMO and the CTO of gymglish. We talked about the frames of the project, what they wanted, what we could deliver and technical restrictions. Seeing the time restrictions we were going to focus on the desktop website and it would later be adapted to mobile and the app.
Research
Gymglish provided us with a study they had done last year. It included a competiteur analysis and a survey.
Feature analysis
We compared Babbel, Rosetta Stone, Drops, memrise and mondly to see who had flashcards, if they used filters in them, evaluation/progress, categories and if they used gamification. We then realised a lot of them used third party platforms to offer this feature to their users.
Market positioning chart
We wanted to have a closer look at the flashcard features of the direct competiteurs. We wanted to situate the competiteurs compared to own cards and third party providers.
User Research
We were provided with a servey Gyglish had sent to thir customers some months ago. From the servey it was clear how thir main clients were. The majority were women over 65 that studied languages on gymglish because of the brain training, and what they wanted was to spend even more time doing it.
User interviews
We conducted 6 user interviews via Google meet and Zoom, the interviews lasted approximately 30 minutes.
Here are some quotes to summe it up:
“I want to come back and revise the words I got wrong.”
“When I learn I put the cards in new categories (by color), so it’s important for me that I can have access to all cards at once.”
“I felt lost and unmotivated because I had no idea if I was even making any progress as there was no way of visualizing my progress.”
“I would like to see the cards by level and categories.”
User Persona
Based on the research and the data we had collected we created a user persona that would represent our main target group.
Problem Statement
Motivated language learners need to find a way to take their e-learning lessons and practice the vocabulary on the same website because they want to be flexible and be able to study for as long as they want in an efficient way.
Hypothesis statement
We believe offering a way to memorize vocabulary for existing clients and non paying users will achieve a more personalized experience. We will know we are right when we achieve an increase of new inscriptions by 5% for Gymglish’s services.
Ideation & Low- FI prototype
We used the crazy 8 method to ideate on what we needed and how it would ruffly look. We then sketched out alternatives to how the screens of the user flow could be designed. When we had decided on the frames we re-sketched it into one user flow and our low fidelity prototype.
Concept testing
We tested our low fi with 5 people, the same people we had talked to for the user interviews.
The main feedback we got was
Make the language an option
The button “change interests” took to much focus
Confused by audio icon on the front of the card
Would like to have the rating smileys appear after the card had been turned
Expected to see stats for each topic
Wanted to be able to see the cards that had been rated “not understood”
Mid-Fi Wireframes
From the feedback from the concept testing we created the mid fidelity wireframes and prototype.
Usability testing
For usability testing it was important for us to test with the age group of our primary persona. We wanted it to be accessible and easy to use. We tested the prototype with five people 65+.
Main feedback:
Were confused by all the checkboxes for the categories
The “change interest button” still to prominent
Wanted the flashcard sets to be accessible via clicking on the cards in the preview
Not sure how to go back
Smileys confused with “satisfaction” rating
UI Design part
Gymglish did not wish to change their UI and provided us with a styleguide, unfortunately it was not updated but we used what we could and took elements from the websitel. For our feature, the flashcards we needed to add some colors for the rating system.
Style Tile
Hi-Fi Prototype
With the usability feedback and the styletile we were ready to create the hi-fi prototype.
Please have a closer look at the prototype for desktop.
Takeaways
I learned a great deal with this project. It was a valuable experience working with a project requested by a company and working closely with the stakeholders. Going forward I know just how important the kickoff meeting is and how crucial to go into all the details, the expectations and limitations. To make sure everybody understands the design thinking method and how I can better communicate that. It is just so invaluable to ask all the questions.
Next steps:
We need to test the changes we made to the mid fi in our hi fi. We will also create a mobile and tablet version to show how the responsiveness would be.