Create a new onboarding experience for Praxis Impact's CRM system

Duration
Sep. 2023 - May 2024
Skill
Interview, Contextual Inqury, Prototyping, Usability Testing
Tool
Figma, FigJam, Miro
Team
2 UX Designers, 1 PM, 1 Researcher, 1 Communication Lead

Intro

For the capstone project, me ang my team collaborated with Praxis Impact, a startup that has yet to release their customer relationship management (CRM) system. Praxis Impact has already developed a work-in-progress. Our team focused on redefining the role of the system administrators, and designing an onborading experience for them.

My Contribution

  • Designed the commenting and gating functions within the workflow builder.
  • Integrated new design into existing dashboard.

Result

New onboarding experience that help the administrator with building workflow and risk control.

About Praxis Imact

A customer relationship + project management system that allows schools to manage experiential learning programs more efficiently.

Experiential learning is a teaching strategy that engages students through direct experience. Students actively participate in projects, which strengthens their skills and better prepares them for problem-solving. Some examples will be working with clients on business problems or taking internship in a clinic.

The goal

Our client, the founder of Praxis Impact, wished to build a new product to help schools manage their projects and scale up. While he worked with the capstone group last year and made some progress, he was still far from having an MVP. Hence, our team decided to begin by brainstorming the project scope with the client.

Founder of Praxis Impact

"I want to build a MVP to test the concept in the market."

Prioritize the unexplored users

Before digging into the problem, we looked at the user flow from last year and map out potential areas for us to improve.

After a quick user research, we found out the functionalites the user are looking for can be synthesized into three main modules: Contacts Management, Projects Management and Configuration Administration, which targeting different user groups. Given that there were already some work for the regular faculties, we decided to focus on designing for the system administrator.

Exploratory Research

Competitive Analysis

To understand the landscape of CRM and PM products, we conducted a competitive analysis to see what are the essentials. Combined with the information we collected from user study, we were also able to identified some unsatisfied needs.

Interview

From our interviews, we divided the users into three different groups. And these three personas helped us to come up with 4 design priciples.

The busy team lead

Solo project coordinator

The novice professor

Our four design principles

01
Introduce Process Thinking

02
Be Newbie Friendly

03
Provide Flexibility

04
Ensure Security

We wanted to assist professors who may not be familiar with experiential learning by providing them with a comprehensive overview before they enter the classroom at the beginning of a new semester. To achieve this, we emphasized process thinking to facilitate smoother project management. Lastly, considering the busy schedules and limited time for proper employee orientation for faculties, our system needs to be intuitive and secure.

Brainstorm

Idea 1: Customized recommendation ❌

In order to onboard new users, we considered conducting a survey to understand their needs and provide  customized tasks and processes from the very beginning. However, we soon realized that this would require a broader scope of user research to capture all possible outcomes. Additionally, the technical resources needed for recommendations were not practical for the MVP.

Idea 2: Workflow template ✅

In the next sprint, we realized that the diagram we created to help ourselves understand the users would also be very helpful for novice users. This led us to develop the main features of our onboarding experience: a workflow builder and expert templates.

Design

Workflow builder: A clear visualization of the processes

The most important thing we want to communicate to our user is the importance of process thinking. Building upon the diagram about how different teams we interviewed with work, we designed the workflow builder. It visualizes the processes for an experiential learning program from beginning to end.

By establishing a workflow at the very beginning, users configure a system to help them streamline the process, secure important checkpoints, and ensure the quality of the team’s work.

A/B Test

When we were sketching out the user flow, one question we couldn't answer by ourselves was wheather to build the workflow top-down or buttom-up. As a result, we ran an A/B test with some users and found out the users' preference.

Exploring different layout

Besides the user flow, we also experimented different layouts for the workflow builder. Vertical grouping with horizontal scrolling turned out to be the most intuitive design for users.

Expert Template: Speak the same language as people with more experience

Taking the bottom-up method and have the user to build a completely new workflow from scratch may be daunting for those who have just started running experiential learning programs. That's why we designed the expert template, where users can refer to how teams with more experience do their work.

Gate: Keep the steps accountable

One thing our client valued highly was keeping the project secure by integrating a risk control mindset into the system. In the interviews, we found that most teams in schools lacked a formal review mechanism. This problem mainly occurred due to a lack of human resources, causing people to take on many tasks outside their original job responsibilities. To avoid mistakes, we designed the Gating System, which allows the team lead to have a better understanding of the progress and ensures accountability at every step.

Provide maximun flexibility

In real life, things don't always go smoothly and linearly. That's why we came up with two types of gates—a soft one and a hard one. A soft gate serves as a reminder to check the result before moving to the next stage, while a hard gate requires the user to get approval to proceed.

Final testing

In our final round of user testing, we were able to find two proxy users that manage experiential learning programs for their departments. Specifically, we wanted to test on the aspects below:

01
The usability of the overall user flow

02
The UX writing for the tutorial

03
Visual hierarchy and proximity

The overall usability

In our previous testings, we found out there were some usability issues. Some users find it hard to sort the tasks into stages, some couldn't understand how to apply a template, and some had trouble adding new comments. Hence for our final testing, we wanted to make sure the user could use every function intuitively.

UX writing

Another focus of our iteration was the UX writing of the tutorial we provided when the user logs into the system for the first time. We struggled not to over-explain and to maintain a unified tone throughout the different sprints we went through. In the last round of user testing, we were able to solve these problems.

Visual hierarchy and proximity

In the very beginning, many participants struggled to find the connection between the side drawer and the comments in the main panel, as well as read the thread. After adjusting the visual hierarchy and proximity, the issue improved.

Style guide

Another problems the client faced was the lack of a consistent style guide and components library. As a result, we established a style guide and a component library before creating the hi-fi prototype. This way, future design team can scale up more efficiently.

Hand off

Having learned that our client's next step was to find more designers and map out the screens for day-to-day use cases, we decided to hand off the design document in Figma. Within the document, we outlined the project goals, findings from user research, our design rationale, and potential future plans.