Transforming the onboarding process into a user-centric journey
OUR CLIENT
Johnson Controls is a global leader in smart buildings that create safe, healthy, and sustainable environments.
Project Focus: ONBOARDING.
The emphasis is on redefining the out-of-the-box experience for new clients, with a special focus on addressing setup issues. The critical questions investigated by them:
Current Setup Complexity: Evaluating the difficulty of the existing setup process.
Enhancement Strategies: Develop methods to simplify and streamline the setup procedure for a more user-friendly environment.
Inclusive Steps:
Redesigning Software: Visualizing the software's appearance and feel to improve the onboarding experience.
Current Setup Scenario:
Currently, users install the server and enter minimal credentials. The entire setup process occurs within the desktop client, which may be intimidating for end users.
Considerations for Improvements:
We aim to revolutionize the onboarding experience by empowering users to seamlessly configure their environment upon installation, encompassing user addition, camera integration, Cloud connections, and more, all through a visually intuitive interface.
THE PROBLEM
How might we simplify the interface of the software to significantly ease the installation process for our integrators?
Johnson Controls offers the ExacqVision Professional video management software, focusing solely on installation steps for integrators. These integrators, responsible for setting up cameras for users, face challenges understanding the current instructions. The company plans to create a prototype for a more user-friendly onboarding experience, guiding integrators through all aspects of the software.
TIMELINE:
It took eight months to complete the research and design of the interface.
PROCESS:
Research, Interviews, Competitive analysis, Literature Review, Ideation, wireframing, prototyping, User testing, and Evaluation.
TEAM:
We were a team of four User Experience designers.
TOOLS:
Figma, Figjam, Survey Monkey,Otter, ExacqVision Client, ExacqVision player.
MY ROLE
I played a crucial role as both a UX researcher and designer throughout the project.
-
Initially, as the project commenced, I crafted a presentation outlining the problem statement and the planned steps for project progression.
-
In the competitive analysis research phase, I selected Genetec as a benchmark, meticulously comparing and documenting superior aspects.
-
For the literature review, I delved into a paper titled "A Systematic Review of Intelligent Video Surveillance: Trends, Techniques, Frameworks, and Datasets," providing valuable statistics on video surveillance usage trends.
-
I conducted a comprehensive UX review, contrasting it with our partner company. Following the research phase, I formulated a set of interview questions and actively facilitated over two user interviews, also taking on the role of interviewer and note-taker in one instance.
-
In the design phase, I proposed an idea to streamline the onboarding process, which was implemented.
-
Among the five design flows, I specifically designed the Camera Recording and Storage flow, a pivotal element in the software for camera installation. Additionally, I contributed to report writing, poster creation, and presentations.
BREAKING DOWN THE PROCESS
I employed the aforementioned design process, which comprises six crucial steps, to address the problem and achieve an optimal solution. In navigating these steps, a thorough analysis and iterative approach were implemented to ensure the most effective resolution.
Understand: Initiated with hardware and software setup, engaging in user interviews for a comprehensive understanding.
Research marketplace & competitors - Conducted competitor analysis on three companies, reviewed five literature papers, and performed UX evaluations comparing competitor companies.
Sketch, Analyze, and Repeat: Identified pain points, desires, and challenges, generating three improvement ideas. Narrowed down to two ideas for implementation, creating a relatable persona.
Design: Executed wireframing and prototyping, iterating through three low-fidelity and two high-fidelity prototypes. Finalized a prototype for user testing.
Develop: Implemented user interface enhancements based on testing feedback, refining aspects for the final deliverable.
Evaluate: Compiled user feedback for quality and compatibility assessment, pinpointing areas for improvement. Suggested additional features for future implementation.
UNDERSTAND THE USER
Gained a thorough understanding of integrators' installation experience, pinpoint challenges and pain points, and gather insights into their expectations for an effective onboarding process.
Insights from our client
Having all the hardware and resources provided, including the PC and cameras, made it much easier for us to navigate and explore the software.
Whats the goal?
The primary objective is to establish an onboarding process for integrators, offering a user-friendly setup that eliminates the need for extensive manuals or training sessions to install cameras.
Analysis and Synthesis
After interviewing Johnson Controls team members, we analyzed findings by categorizing insights. Using affinity mapping, we grouped similar ideas, formed complex solutions, clustered them into themes, and systematized the best elements into comprehensive solutions.
Developed a persona that embodies one of the integrators utilizing ExacqVision for camera setup.
The extensive guide and mandatory classes for understanding Johnson Controls' software make the installation process cumbersome and tedious.
Initial Design Ideas
-
Admin Account Setup Wizard
-
Systems and Guided Camera Setup
-
Prompt Based Guided Tutorial
-
Prompt Based Tool tips
Why?
-
Wizard - The step-by-step guide will walk users through the process of configuring essential admin account settings.
-
Systems and Guided Camera Setup - We replaced complex instructions with a guided tour featuring contextual help, ensuring an intuitive and efficient camera setup through a step-by-step process for users.
-
Prompt Based Guided Tutorial - These prompts guide users through the setup journey, offering clear and contextual explanations for a confident and precise execution of each step.
-
Prompt Based Tool tips - Employed tooltips to provide users with contextual information or hints about specific elements or features.
Optimal Design
The initial design sketches included two distinct ideas, both of which were implemented in the project. Following idea approval, we underwent three iterations for low fidelity and two iterations for high fidelity to refine and finalize our designs. This iterative process ensured a comprehensive and polished end result.
The initial sketches
How did we make our novice client understand our design concepts?
We were asked to do Six flows:
-
Onboarding screens - The welcome screen is the initial point of interaction, offering crucial information about the software's purpose and guiding users on how to get started effectively.
-
Dashboard - The dashboard is the initial landing screen which directs users to the essential "Add Systems" section, a critical step for configuring their personalized system setups. The guided tour visually guides users through key options and features on the software dashboard for efficient navigation and understanding.
-
Add Systems - Essential for users to effortlessly integrate new servers into their network.
-
Add IP cameras - A step for users to add the number of cameras connected to the local network. These cameras are located on different locations for video surveillance.
-
Camera recording & storage - The "Camera settings" option allows users to record the camera for different schedules or display the cameras on the grid, specify the quality of the camera displayed, and select the storage location for the recorded cameras.
-
Tutorials Tab - The "Tutorials" tab serves as a centralized hub catering to both newcomers and returning users seeking comprehensive guidance on various aspects of system setup and configuration.
Low Fidelity Designs
Onboarding Screens
Dashboard
Add Systems
Add IP Cameras
Camera Recording
Tutorials Tab
High Fidelity Designs
The designs below illustrate the problem (WHAT) with the initial design and detail the improvements made (HOW) to enhance usability.
Onboarding
Problem - Low user Engagement and Connection
Solution - Engage Users with Informative Onboarding
Dashboard Tour
Problem - Lack of Introduction to Dashboard Features
Solution - Dashboard Tour Emphasizing Key Functionalities
User Feedback
Problem - Inadequate feedback or updates
Solution - Feedback and system status at every step
Setup Wizard
Problem - Unclear flow of the steps
Solution - Stepwise process using wizard
Simplified Scheduling
Problem - Complex schedule process
Solution - Simplified scheduling process
Guided Tutorial
Problem - Inadequate User Orientation and Understanding of the System
Solution - Providing Prompts and Guidance
Five iterations led to our final high-fidelity designs, with a key focus on integrating valuable client feedback from each iteration. This feedback loop is crucial, aligning our product with client expectations and user needs.
Client Feedback
"The guided tutorial idea seems to be quite interesting"
"Adding the Schedule button in the camera recording tab makes it easier to set a recording time for the camera"
"Onboarding screens showcasing features make it engaging for users to learn about available features. "
"We like the guided tour for the dashboard, but why not enhance it by incorporating GIFs for interactive engagement with users? "
"We prefer having 'Add Systems' directly on the dashboard for easier and quicker access to add systems."
User Testing
The phase aims to perform think-aloud testing on ExacqVision software, with experienced users from Johnson Controls. The objective is to gain insights into UX, identify pain points, and discover areas for improvement.
Test Plan
1. Purpose: The purpose of this usability testing is to evaluate the redesigned application for Johnson's Control.
Scope: This test will focus on various features and aspects of the software to assess its user-friendliness.
2. Objectives:
- Evaluating the ease of use of the recreated application.
-Identifying and prioritizing usability issues.
-Validating that user requirements are met.
3. Test Environment:
-The test environment includes the hardware and software configurations needed to run the software.
-Tools or equipment, such as computers, software installations, and internet connections, should be specified.
4. Test Participants:
Three test participants which includes
- QA Engineer
- Software Lead
-Software Engineer
5. Test Scenarios and Protocol:
-Test scenarios and a protocol document will be provided to participants.
-This document will detail the tasks, navigation, and instructions for testing the prototype.
-Each participant will read and follow the protocol document for testing.
6. Test Procedure:
The test procedure will include instructing participants, collecting feedback, and recording and analyzing data.
7. Data Collection:
-Data will be collected through methods like observation, screen recording, and surveys.
-Metrics, including success rate, task completion time, and user satisfaction, will be used to evaluate usability.
8. Success Criteria:
-A percentage (e.g., 70% or more) of participants should be able to successfully complete critical tasks without significant issues.
-The error rates (e.g., user errors, system errors) should be significantly lower than the error rates observed in the previous version of the software.
-Users should express a high level of satisfaction with the software, as measured by surveys or feedback. Satisfaction scores should meet or exceed established benchmarks
-The usability testing should validate that the redesign has led to a more user-friendly and efficient software.
10. Roles and Responsibilities:
Each of the five team members will play a particular role, such as facilitator, observer, note-taker, etc., with the other team members serving as participants.
Updates based on the insights from usability testing
QA Engineer
7 years - embedded and IoT, different mobile applications and web applications
"The UI has many new changes that look better than the older version."
Proposed Changes : Address button states, tutorial clarity, and prototype interaction.
Senior Lead
Specializing in desktop and client software with a focus on automation.
"Transitioning to the next screen was easy, indicating that the navigation elements were intuitive and user-friendly."
Proposed Changes : Emphasized clear navigation and user-friendly features.
Senior Engineer
8 years - Automotive and locomotive industry, specializing in Automotive Web UI management
"The guided set-up steps are clear and easy to navigate through the process using the next and previous buttons."
Proposed Changes :
Refine button placements, improve instructional clarity, and streamline processes for enhanced user experience.
Evaluation
We conducted a prototype evaluation with three Johnson Controls employees who were already acquainted with the software. The users' insights proved valuable and intuitive, facilitating the alignment of requirements with actual usage.
Certain buttons lack intuitiveness and appear unresponsive
Navigation confusion in exiting guided tour
Optimize camera schedule settings for enhanced configuration.
Guided setup coupled with tool-tips for a user-friendly experience
Found the process easier than the previous version
Appreciated prompts and feedback given throughout the entire process.
Futuristic Directions
With recent improvements, we're moving forward strongly, getting ready to bring in a set of better features to simplify the experience. Each one is carefully designed to offer an improved and easy-to-use experience for our users.
Simplify UI Redesign: Streamline and modernize the application's UI, focusing on user-centered design, consistency across platforms, and prioritizing accessibility.
Interactive experience using AI: Allow users to ask questions, seek clarification, and receive guidance within the application using a AI based chat bot.
Interactive Video Tutorials: Enhance user understanding by introducing video tutorials within a guided tutorial framework, providing users with a visual and interactive learning experience for the software.
Reflection
This journey has provided me with valuable insights and industry experience that will benefit my future projects.
Plan & Management
-
This project taught me the importance of project planning and management, understanding client needs, and putting users first.
-
It provided insights into the industry dynamics, stressing the importance of timely deliverables. The experience also showed me the intensity of the interview process.
Client Satisfaction - Effective communication and relationship management with clients and stakeholders were effective. Weekly connections for updates and inputs were very helpful.
Team Collaboration - Working with the team improved my teamwork skills and added valuable experience to my journey.
The Capstone Poster
Earned us TWO awards at the Capstone event (Dec'23)
