The need for an onboarding mobile application

“Make it easier for teachers to start their work”

Hi-Fi Prototype Onboarding Intro
Hi-Fi Prototype Onboarding AR Startpage
Hi-Fi Prototype Onboarding AR

The team

This was a team effort and since we are students, we were all involved in every process.
From the start there were six of us, but the two last months we were three members.

The three of us had different skillsets which complimented nicely.

Camilla Carlsson portfolio profile photo

Camilla Carlsson

Information architecture
Balsamiq
Wireframe

Melker Rydholm

Melker Rydholm

Design
User Testing

Foto på Anette Liljeqvist

Anette Liliequist

Structure
MS Office

Project scope

During our first semester at Changemaker Educations (a world leading game designer school) we were assigned with a task to first do a pre-study to investigate the needs of having an onboarding application within the Educational sector.

The project was divided into three courses: User research, Design Thinking process (Empathize, Define and Ideation) and the Prototyping & Testing. 

1 month
1 month
2 months

Empatize


Interviews / 23
Surveys
Secondary research
Competitive analysis

Define

Personas / 4
Abstract ladder
Affinity mapping
How might we

Ideate


MVP Canvas
Empathy & Effect mapping
Hisspitch
Mastery Path
Crazy Eight
Information architecture
Story board
Customer & User flow

Prototype

 

Paper prototyping
Wireframes
Mockups
Low-fi & High-fi prototypes

Testing

 

User testing / 2-5
Rose/Bud/Thorn
Card sorting
Individual prioritizing

Tools

Paper and pen
MS Office (Word, Excel, Powerpoint)
Basamiq
Figma
Photoshop
Voice recorder

Empatize

Research

In preparation for our interviews we spent two days on secondary research. We read articles and research material from graduates to find out how teachers feel when they start their new work.
We learned a lot about teachers and their needs. Teachers feel that their education does not prepare them enough for their first day at work. They often feel lost. This contributes to the levels of stress that makes many teachers quit.

ArticleOnboardingApp

Interviews

In total 23 interviews were conducted; 17 in independent schools and 5 in public schools. 
We used affinity mapping to compile all the data into personas, then grouped the data into four groups: pain points, feelings, keywords and quotes. 

Affinity Mapping
Affinity Mapping group
Affinity Mapping card sorting
Define

Personas

Personas Nina
Personas Thomas
Personas Mona
Persona Stina
Ideate

Empathy Mapping

To get into a deeper stage of our prime target audience we used empathy and effect mapping.
This was later going to prove the importance in our project as to how the user really feels.

Paint points

New teachers

– Generally stressed
– Worried
– Want to have a mentor in their first period as a teacher

Teachers

– No time to assist their new colleagues

Headmasters

– Demotivated staff
– New rules & regulations
– High turnover of staff

Empathy map new teacher
Empathy mapping teacher
Empathy mapping headmaster

Effect Mapping

Effect mapping
Digital Effect mapping

User Journey

From our findings from the empathy and effect mapping we created a user journey to describe the rollercoaster ride that new teachers might have. 

User Journey paper type
User Journey Digital
Userflow

User flow

We decided upon two USP's to focus on, which were the Magic map and Quiz. Our focus was to get parts of the mobile application gamified and fun, and not just having a heavy mobile application with teaching material.

Card sorting

Card sorting

From paper card sorting we made a digital information architecture. We could now finally start visualizing the new digital mobile platform for teachers. 

Information architecture

Information architecture

Our solution

We want to have a “one stop shop” that is easily accessible through a mobile application that is innovative, stimulating and personal with a touch of gamification to keep it fun.
Quiz 
”Buddy”-function
Calendar
HR-questions and FAQ
Check lists
Interactive map ”Magic map”

Prototype

Development process

After producing wireframes, we did mockups and made some design choices based on the color palette and fonts of a specific school. 
Based on our paper prototyping we continued with the three flows; Register process, The Quiz and Magic Map.
Below wireframes and mockups demonstrate the signup process

Mockups

Onboarding mobile application email demostrating the intro

We wanted a clean design with the color palettes of the School, and made several iterations of the homepage with different styles and color combinations.  We choose the black color in the text for more visibility.

Testing

Prototyping

Hi-Fi Prototype Onboarding Intro
Hi-Fi Prototype Onboarding AR Startpage
Hi-Fi Prototype Onboarding AR

Based on further feedback we made some iteration before moving on to high-fi prototypes.
We used Iphone 8 as a prototype frame, since two of three team members have that model. 

Make the app more neutral not for a specific school.

User testing

The overall goal for the user test:

– Easy to use
– How the user feels with the registration process
– How the user interacts with the Magic map
– How the user experiences the Quiz

We interviewed two relevant testers who were in the correct target audience, for which we prepared a script. We recorded and took notes throughout the interviews.
The data was first clustered with a Card sorting activity, once that was done we compiled the feedback into a digital canban where we could prioritize tasks and keep a backlog.

Melker and Camilla discussion

“AR-mode – oh, if AR mode is on I think I might bump into someone”

Prototype

Further iterations

We estimated that the needed iteration would take approx. 6-8 hours.
Main iterations based on feedback from user testing were:


– Update the homepage
Add an onboarding process when you land on the homepage
– Update the Magic map so it is easier to understand
– Add one more color to our palette for more visibility
-Change the size of buttons to get more consistency and accessibility

Lesson learned: 
Not making any assumption and take things for granted.

Paper protoype
Paper prototype start page
Prototype startpage first mockup
Prototype startpage second mockup
Prototype startpage hifi

Updated homepage

-Added an area which informs the teacher when his next lesson starts

-News in a carausel

-Adjustment of
text, button size and padding

-Added a new color

-Make Homepage stand out more in the footer menu, deleting un-necessary icons

Prototype startpage

Added an onboarding process when you land on the homepage

Updated the Magic map so it would be easier to understand

 

-New icon for AR-mode

-Updated icons

-Added a warning sign

 

Prototype Onboarding AR mode

Choice of the design

From the beginning of this project we had a specific school in mind, and we chose the color palette and font based on their design to be applied in our mobile application.

However, before the user testing;
We changed the branding and tone of voice to be a more neutral school, after the user test we also updated our color scheme to have a better visibility throughout the application. 

We decided to have “click” buttons on the homepage rather than swip function because we liked that more and it had a better consistancy.

Design kit

Conclusion

We have learned a lot about Design Thinking process and the different phases, which will be very useful when we finish school. It has been great to do several different methods and experience the pros and cons with them. One method we all like is the Affinity mapping because it gives you a nice overview and cluster things in a good way.
We had a very good cooperation within our group, all contributed with their knowledge and we have different backgrounds and competence.
We could however have used our different competence in a better way.
Since this was a school project, we were limited with resources and had no budget. We did not have just one stakeholder throughout this project which caused both confusion and could be time consuming, it was however a learning curve to understand different stakeholders’ point of view.
If there was more time, we would like to continue to work with one of our key findings, the mentorship, but our assignment focused on implementing a touch of gamification, so we decided to work on our main USP’s. We would also have liked to continue with our backlog to get more user flows in place. 

“Do the right things” – with help of different methods, for example empathy maps and “Do things right” – with help of tests etc