Dean Heasman Tassomai Case Study Header.

tassomai

tassomai

Timeline

4 weeks, Winter 2019

Role

Senior Product Designer

an intelligent multiple choice learning app for students 

Tassomai is an intelligent online learning program helping students at all levels achieve outstanding results. Tassomai builds knowledge, boosts confidence and reduces exam stress via daily multiple-choice questions.

The challenge

Every day is a school day

Tassomai has always allowed students to see how many correct questions they have to answer each day. Our goal was to create an experience which would allow students to see their goals (homework) for a given day and week, for a given subject and across multiple subjects and for them to know when this was due.

My Role

I was senior product designer at Tassomai between Feburary 2019 and February 2020. I Ied the UX, UI, visual design and branding during this time. In regards to this particular feature, I delivered all research and design assets.

Kick off

Understanding the problem

To get a full understanding of the current problem, I went through Hotjar to look at comments that users had made relating to this user problem. There were very evidently a lot of issues causing frustration.

"It doesn't let me choose between different subjects of which to take a quiz"

"It’s not easy for me to track my progress over homeworks"

"When is my homework is due?"

The story behind the story

We also had storyboarding to draw upon for context. I put this storyboard together by going into schools and carrying out interviews and workshops with students to find out about what their typical day looks like. As you can see from a student's day, it's very busy and it's no wonder knowing when their Tassomai homework is due for each subject is tricky.

We had confidence that this feature should be worked on not only from students but also teachers and the rest of the team when I arranged a feature prioritization workshop. Each person was given $300 Tasso-dollars 🙈 . There were eight features to choose from. We were allowed to spend our tasso-dollars on any feature we felt was most "important". Daily & weekly goals across multiple subjects received the most mular.

Know that we are designing the right thing

Working backwards from imperfection

I also carried out an analysis of the current quiz selection screen to further understand the problem.

1

XP & Level Bar

There was a lot of information on one screen which compromised the screen real estate going forward if more content was going to be introduced. This issue was compounded by the fact that we didn’t want any vertical scrolling, it was a web app also (includes the status bar) and that, because it is an app for students, 10% of users were using a iPhone 5SE (1136 x 640 pixel resolution).

2

Daily Goal Wheel

There was a lot of information on one screen which compromised the screen real estate going forward if more content was going to be introduced. This issue was compounded by the fact that we didn’t want any vertical scrolling, it was a web app also (includes the status bar) and that, because it is an app for students, 10% of users were using a iPhone 5SE (1136 x 640 pixel resolution).

3

One subject design

There was a lot of information on one screen which compromised the screen real estate going forward if more content was going to be introduced. This issue was compounded by the fact that we didn’t want any vertical scrolling, it was a web app also (includes the status bar) and that, because it is an app for students, 10% of users were using a iPhone 5SE (1136 x 640 pixel resolution).

Framing the solution

Putting pen to paper

Before getting into any designs I outlined some top level user stories to ensure that the solution considered users needs entirely.

• As a user I want to be able to see when my homework is due

• As a user I want to be able to see my correct question completion across individual subjects and across all subjects for today and this week

• As a user I want to be able to see my states for current and past homeworks

To get an abstract view of this feature I sketched out a story board of the student's potential journey.

Developing a solution

The monochrome bit

Outlining some features that would be needed:

• The ability to see statistic for homeworks (question accuracy, time spent, daily goals completed)

• The ability to switch between information for today and for the week

• The ability to select different subjects

• The ability to see when homework is due

V1

This first design explored having the subject and quiz selection on a card. Switching between subjects could be achieved by swiping left and right. As you can see, switching between day and week was placed at the top literally and in terms of hierarchy due to it’s global nature.

The issue with this design is that some users might not know that they can swipe left and right to access other subjects. The second issue is that getting to subjects could mean swiping left and right a few times. With more and more subjects being added in the future, this was not a scalable design. Finally, in this design, there was no indication of progress for a given subject.

V2

In this second lo-fi design, the date picker allowed for greater granular control - the user can see any date or date range. Once more, the bars for each subject indicate the progress the user is making in each subject.

One of the issues with this design is that firstly the screen is starting to look a little cluttered. Furthermore, what metric should the progress bar represent? Plus, more detail of metrics would be needed so where would this info go? Would it not be better to have a separate screen for metrics? Finally, although the date picker allows for any date/date range, after liaising with the engineering lead and head of product, such a feature would be out of scope cause too many extreme edge cases in the future.

V3

Following the issues raised with the lo-fi exploration of design two, I changed the progress bar to a daily goal status - not started, in progress and complete. This would be simple enough to implement from an engineering perspective and provide a summary of how the user is doing. If the user would like greater detail, they could tap a status to get more detail. Also, the date range was simplified - day or week. Some of the issues with this design are that using a modal to display data wasn't scalable. Once more, having the statuses to show progress for each subject wouldn't be aesthetically pleasing and would take up quite a lot of screen vertical real-estate.

V4

This design is the same as the lo-fi exploration in system three, but the daily goal progress for each subject was consolidated into one wheel which would save space and look more aesthetically pleasing.

At this point, I decided to explore one more lo-fi, one that would provide more explicit about homework state. Consequently, on the task/homework tab, I introduced a countdown string for homework. It would go from grey to red when there was one day until the homework is due.

Once more, I added a dot calendar that would give students more context of where they are in regards to each of there homework. The dot calendar included a blue ring (daily goal completed), yellow ring (today) and a red ring (task/homework due day). After talking through the design with the head of product and two other UX designers, we agreed that this is the design that should be taken forward for into a clickable prototype for user testing.

User testing

Wow, our first design was completely off

All prototyopes for user testing were in person and quicktime player was used to screen record the users actions. One other designer was present to record observations. You can see a one of the recorded user testing sessions here.

Findings from V1

• Users were not clear what day it is
• Users were not clear what day the homework is due
• Some users were not clear what homework is due for today
• Users were not sure if accuracy is the target or what they have achieved
• Some users were not clear what their daily goal is
• Some users were not clear what their homework is for next week
• Users thought that the colour of the wheel corresponds to the quiz they should take
• Most users believed that the red circle of the day means the due date as opposed to the daily Goal that wasn’t completed

The first prototype had a lot of issues. The dot calender was a particular problem. After liasing with the head of product, it was decided that in terms of effort-impact that this would be out of scope for this piece of work. It was highlighted at this point that more metrics would also be needed in the weekly goal tab for V2 e.g questions completed, time spent, questions attempted and accuracy.

Priorities for V2

• Remove dot calender
• To explore a binary way of representing whether or not a daily goal has
been completed on the weekly targets view
• To explore how weekly target visualisations can be presented in a way
that is differentiated from the daily goal
• To ensure that the colour of the quiz card is not the same colour of the
daily goal wheel or, make both cards the same colour as the daily goal
wheel

Findings from V2

• Users were confused that when they clicked on the
subject and then pressed week, it would show all
homework for all subjects
• Some users thought that the blue play icon in the
bottom bar looked like a call to action as opposed
to the tab they are currently on

Priorities for V3

• When a subject has been selected and then week is
tapped show only the homework for that subject
• Change the play icon on a selected tab to a
secondary colour (darker shade of grey)

Findings from V3

• Some users didn’t notice the accuracy target
• Some users were still unclear what “next” meant on
the xp bar. Was it the number until next level or to
reach the target?
• Some users were still not sure if accuracy is the
target or what they have achieved

Priorities for V4

• Break the accuracy info into parts to be more
explicit; accuracy target, your accuracy and % above
target
• Be more explicit about XP and have the string # of
XP until next level
• When viewing the week tasks, have accuracy as a
number as opposed to a bar. This will allow more
room break the accuracy into parts as in the subject
select screen

Figure 13: User testing findings on our research wall from V1 through to V4

Copyright © 2020 Dean Heasman