SJ ONBOARDING APP

mock-up pictures of the app
logo of SJ
Project details

TIME: 2019-2010, 5 month

COMPANY: SJ

SCHOOL: Changemaker Educations

CHALLENGE: Design an onboarding app for a company within the travel sector

THE TEAM: Christelle Arnaud, Halldór Kristmundsson, Olle Prim & Rodi Cicek

PROJECT OWERVIEW

This project has been the backbone of our Experience Design courses at Changemaker Educations. Our project was running over several courses (user research, experience design, rapid prototyping). The project’s core is Design Thinking (Empathize-Define-Ideate-Prototype-Test) combined with a lot of different methods and tools that we used as the project went from an idea to a tested Most Viable Product (MVP).

The main idea of the app is to help new employees through their first weeks at their new job, something we call an onboarding-process.

mock-up picture of the app

MY ROLE & THE TEAM

In this project my favorite process was the ideate and prototype, mostly because I like to design and come up with ideas.
My strength is to illustration and visual design and my weakness is writing. I was lucky to be a part of a group with different skills that I could learn from.
I learned that well grounded research during the design thinking process is important to achieve a great design outcome.

THE PROCESS

We used the double diamond process of design thinking through the whole project. We started off by searching and networking to find a company within the travel sector with at least one hundred employees or more to work with. After a lot of emailing, I finally found a contact at SJ through LinkedIn.

Illustration of design thinking
A picture of a interview with XX, Christelle and Me
A picture of our typeform survey

EMPATHIZE

Who are our users?

We started hypothesizing about our core users for our intended App. This was important in getting the team to have the same perspective on the users. We did brainstorm sessions to produce interview questions and decided on a mixed method, with both quantitative (Typeform) and qualitative interviews.

After the interviews we wrote down key takeaways individually on post-its, focusing on “Bio”, “Needs”, “Behaviours”, “Frustrations”, “Gaps” and “Goals”, so we don’t influence each other’s decisions. 

DEFINE

We used several methods to get something worth working with during the define-stage. The first method seen on the image is called Affinity Mapping, grouping the takeaways from the interviews.

Afterwards, we did three different personas (train attendant, HR, stakeholder) to visualize the diverse needs, pains/gains etc.

In addition, we made an Empathy Map which is a similar method to personas and “Effect Mapping” used to measure success. The last method in the define-stage was to find three questions to work with through “How Might We”.

“How might we build a new on the job service for new hires at SJ, so they get quickly into the job, feel welcomed and get help when they need it?”

Picture of our workshop: Affinity mapping
Persona Yasmin Bonnard
A picture of our effectmapping workshop
Picture of sketchideas

IDEATE

With all the collected data and insights, we started creating a Mastery Path (referring to the various stages of getting used to a system) and user journeys.

We chose different problem scopes to start sketching on and used timeboxed sprints within the Design Sprint method, such as six step user flows, crazy eight and storyboarding.

After sketching we did wireframing of the app and the functions within it. This was done individually and afterwards we voted for the best one.

PROTOTYPE

During our week within the Design Sprint, we did paper prototypes of the flows, which resulted in two flows. The first flow was the login + tutorial and the second flow of the schedule (plan) for the onboarding process.

The paper prototype was tested internally in the team and with two additional users simulating a real case scenario.

I designed all the icons in Illustrator. For the wireframes and mock-up, we used Figma.

wireframe and mockup of the app: Intromail
wireframe and mockup of the app: Login Screen
wireframe and mockup of the app: tutorial step1: swiping
wireframe and mockup of the app: tutorial step3 plan
wireframe and mockup of the app: tutorial step5 search
wireframe and mockup of the app: plan(week mode)
wireframe and mockup of the app: Plan(march 23rd selected)
UI-toolkit of colors and icons
wireframe and mockup of the app: Splash Screen
wireframe and mockup of the app: Login confirmation screen
wireframe and mockup of the app: tutorial step2 menu
wireframe and mockup of the app: tutorial tep4 chat
wireframe and mockup of the app: plan screen
wireframe and mockup of the app: Plan(month mode)
wireframe and mockup of the app: Plan(March 23rd, dropdown view)
UI-toolkit of typo
A picture of a interview with me, XX and Rodi
A picture of todos(Kanban)

TEST & VALIDATE

The interview was conducted at SJ head-office in central Stockholm with a real user who was a team leader for train-attendants. We got a couple of insights to work with further on in the design process. We did both screen recording and sound recording with consent.

After transcribing, we reflected on pain points/problems that we found during the interview to have a clear goal for upcoming iteration. Based on our interpretation, we created a priority list of three problems that needed to be addressed. A Kanban-method, as shown on the image was used to visualize the to-do-list for the team-members.

We did some adjustments to make the app customised for their needs. One example is that we added a group-chat-function for the new employees, to share information with each other. This because we found that train attendees start as group at the same time. This was the last part of the project we presented for our client, SJ. We made a handover for them to continue build on, if they decided to do so, both an Android-version and an iPhone-version.

ITERATION

The most important insight was to create an integrated team-function for messaging, because the interview showed that the current employees used an external team-messaging App.

This showed us the importance of collecting feedback from real users to develop useful functions to help them getting the best experience possible.

Mock-up of our chat funktion