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.

Some screens of the mid fi

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.

Thank you so much for the read and for visiting my portfolio, please don’t hesitate to contact me if you have any questions or you want to have a chat about my work

Next
Next

Pace - Wellness tracking app