top of page
Skellefteå factories.HEIC

Redesign Onboarding UX of NC Management Hub

 

 This project was done within my internship company of summer 2022.

Cover.png

project OVERVIEW

Redesign the Onboarding UX(Help & Documentation) of battery NC Management Hub for Northvolt

Responsibility: User Research, UX/UI Design

Keywords: User Behavior, Data-Driven product design, onboarding 

Duration: 2 months​​​​​​

 
Timeline.png

bACKGROUND

This project aims to improve the onboarding experience that helps users get started with the nonconformities (NCs) Management Hub at Northvolt. This digital platform enables users to manage the status of manufactured items, initiate investigations, quarantine affected products, and determine their future usage based on quality control. There is already a tutorial exists on the application page but it's not user-friendly and unreadable. 

PURPOSE

Help newcomers quickly adapt to the NC Management Hub so that they could perform well, so that facilitates communication between different teams, enforces process standards, and ensures quality control throughout the production line. 

Purpose logo.png

TASKS

The task and initial scope of works

1. The existing short onboarding for the internal applications

Are people actually looking at this or do they just click through it?

Are people finding this onboarding helpful?

How could we improve it?

2. The display of new features and changes

Are people finding it and looking at it in the webpage?

Can it be improved?

3. Should we show it in-app?

4. Should we have a FAQ section?

Should we have a more interactive in-app guide?

 

user research

1. Get myself familiar with the existing short onboarding introduction on the applications.

2. Identify target users, and summarised two kinds of users: Novice users and expert users.

3. Identify the research goal: 

💡Know what users think about the existing short onboarding for applications.

💡Know users' ideas about the display of new features and changes.

💡Know the user’s ideas about the FAQ and interactive guideline sections.

4. Develop research questions.

5. Choose research methods: Online interviews.

6. Conduct research: Have two interviews with both novice users and expert users.

7. Evaluate results.

user research results

Novice user: Frequently use the internal application to trace cell quality, mainly used laptop and digged it on his own by learning all steps and components. Want to reduce the working time. Don’t know about the existing help feature till the interview, feel it’s helpful to have a tutorial. Have an overview of the internal application is good. The help feature should be more visible on the interface. Text in the help can be organised into bullet points, now it’s too comprehensive to new users. Illustrations can help users understand steps. If we can replace the tutorial paragraphs with something that is easy to grasp for a new person: a 2 minutes video(especially for the filter feature)/multiple sections to depict the information/classify information​​​​​​​.

Expert user: Starting to use the internal application a bit more to check for informations and look through the data from there. Use only on Laptop(Because the UX is not very friendly on the phone). The first time using it is like have to navigate through the different steps and try to find out the the way to actually do it. Know the existing help feature and thought it was messy, just click to go through and nothing is very new to her. It is helpful for cell status, but not how to use and navigate the internal application. Improvements: Content introduction -> Steps introduction -> Feature introduction, urgent FAQ linked to different teams(process team, UX team, Digitalization team). The current tutorial is worse than before.

So, to improve the tutorial...

🔋The tutorial will pop up automatically for first-time users.
🔋Starts from the first login, the tutorial icon will be highlighted for 1 week.
🔋After 1 week, there will be no highlight animation effect.
🔋The search history will be collected for experience improvement(feature introduction rank/new label/hot label and autocomplete search).

Brainstorm.png
Brainstorm prototype 1.png

1st User Evaluation Feedback

👩‍🏭From an expert user

Visual level: 

change the place for the Help & Documentation button and the News button at the top right corner

For UIs try both with Company Logo/without Company Logo

Content introduction: terms should be visually clickable 

Usability level:

Step introduction: add scroll bar, add text below the headline/clickable bar drop-down

Feature introduction: have both screenshot+video

Technical level:

Quick search: How the first matched information been generated, should have a search result page

 

🧑‍🏭From a new user

Visual level: 

Content introduction: terms should be visually clickable 

Step Introduction: Video + text make better sense

Not sure the tutorial icon can be noticed(can use animation to remind the user to click)

It could be good if there is a short popup text when your cursor hovers over the icons.

The popup of news is too small.

Usability level:

It's important for first users to go through the tutorial before they see anything else, the user has to go through the tutorial before he or she is entering the portal itself.

 

Iteration

Brainstorm prototype 1.png

2nd User Evaluation Feedback

👩‍🏭From an expert user

💎The tutorial window can pop up directly in front of a new user, like ''Since this is the first time you're in the internal application page, here are some information if not you can skip the tutorial. '' So then you get back at homepage.

💎A short sentence explanation is better than just saying ''beginner to proficient'' like this on the homepage.

💎Have both FAQ+Search bar. Since new users probably don't know what to search at the beginning stages.

💎The explanation text below the tutorial should be more clear sentences instead of questions. It is better to explain what this tutorial part is trying to do directly.

💎It might make more sense if the ''updates'' is sitting somewhere else. Since if this is a tutorial for beginners, they wouldn't immediately want to look for updates, they have to go in here to look for the updates.

💎If there is no answer in the search result, can have a recommendation like ''You can find the answer by contacting these people'' or something like this.

 
 

what's next?

The feedback from the 2nd user evaluation was used as the future work direction and summary. Then I handed over this project to my colleague, and it was praised by my mentors and my users when my internship was finished. The UX designers from the team will continue to work on that.

 
 

What I have learned?

Keep transparent in the work process, like setting objectives in the documentation. Then I can get everyone on the same page. And also, don't be afraid to over-communicate, take initiative and keep asking "Why". Users always speak differently so it's important to ask follow-up questions or follow-up emails to determine which ideas from users are real and which are “False needs”.

 
 
bottom of page