Case Study: Express Evaluations Sign Up Flow

Introduction

Who is Express Evaluations?

Express Evaluations is a young startup looking to make waves in improving the accessibility of small businesses and public organizations in getting feedback from employees and keeping a strong pulse on the needs of their teams. Today, more than ever, it’s critical for business leaders and HR teams to be able to ensure that employees are happy, and their needs are being met. Express Evaluation’s goal is to ensure that can be accomplished in an affordable way, with software that makes transitioning to a condensed feedback and evaluation software painless, and easy to manage.

The new Sign Up Flow landing page

The Problem

Ultimately, as with any new product or experience, your first impression of how the process is going to go usually starts with signing up for a new account, and getting on-boarded into the platform. For Express Evaluations, this was an entirely manual process, with heavy time investment requirements from Express Evaluation's own team members in creating new accounts and importing data on behalf of new clients. The team needed to figure out a way to make creating an account easier, and preferably not requiring input from anyone other than the registrant.

Understanding what steps existed in the initial flow vs. what the team wanted the new flow to look like

My Roles

User Research, Stakeholder Interviews, Journey Discovery, Task Flows and Wireframing, Design Flows, Interaction Design, and Visual Design

Challenges

While there weren’t any immense roadblocks that I had to overcome in working on this project, I think the biggest restrictions that I faced were primarily side effects of working with a tiny startup company. Express Evaluations was still working on growing their customer base, and this restricted both the user-base I had available to tap into for User Research, as well as restricted the amount of time and resources available from the company for providing me previous ‘lessons learned’ or tools for gathering user data.

Additionally, from a design perspective, the team wanted to hold strong to building anything visually using the Material Design framework. I hadn’t worked with Material Design’s framework in the past, but fortunately there is a lot of public information and a whole knowledge base dedicated to Material Design and Material UI that I could draw upon to learn and design with.

Solutions

I was able to center my research processes around getting strong feedback and contextual inquiries from product stakeholders and team members at Express Evaluations to give me the information I needed to understand what challenges they were facing, and what the new Sign Up flow needed to solve for them. Additionally, the process of designing a whole new feature from scratch meant that I could do some competitive analysis of other SaaS platforms and how they were solving this task to gather inspiration and design ideas that could help.

I also spent a lot of time reading through Material UI and Material Design documentation to better understand how the visuals and interactions work within the framework. I was also very fortunate to discover that if you’re using Figma as your design tool of choice, Material Design has some templates available that I was able to draw from as references while building the Design System for Express Evaluations.

Stakeholder Interviews and Contextual Inquiry

Before I could start designing or laying out any frameworks, I first started by meeting with some of the key stakeholders over the feature’s design. This included the Director of User Experience who was overseeing things as Product Manager and whom I worked closely with through the entire process, as well as both the President, and Director of Client Success. The latter two both acted as the main points of contact during the sales and discovery cycles for a new client, and their lives would (hopefully) be most impacted by the new feature I was helping design. I met with all 3 of them a few times, taking that opportunity to understand what challenges they were facing, and what their goals and visions were for the company.

Later on, I sat down again with Mitch, the Director of User Experience, and performed a Contextual Inquiry interview with him, where we performed screen share session and he walked me through all the steps of what the original ‘New Account Creation’ process looked like, and I was able to acquire an even deeper understanding of who the intended users were, what age groups, company compositions, and level of effort the end users should ideally have to put into creating an account. This really helped me to start getting a picture of what we could incorporate into our Sign Up Flow that could make a lot of the manual lift far easier for the team, and for the end user.

Task Flows and Iterations

Now that I had a pretty good understanding of what the problem was, and what we were trying to solve for, I set out to create my first iteration of a Task Flow that could begin to outline what the new feature would include.

The first of several flows used in starting to outline what the whole flow would ultimately achieve

Once I had the first design down, I reconvened with Mitch and we iterated on the design based using ideas he had for incorporating future-proofing the design to allow for scalability in the future. The goal was that the team also wanted to leave open space for incorporating things like a payments or package selection page, as well as potentially a deeper feature-selection or onboarding step prior to completing this flow. I also learned that the team would, at some point, be transitioning to a different User Authentication platform, which could impact how we needed to authenticate the user, or grab information.

With the new feedback in mind, I was able to quickly put together a secondary flow option while in the meeting with Mitch, that provided a choice for him to make with his other stakeholders and the developer on the project.

Option 2 of workflows - Incorporating feedback and reorganizing
‍

Benefiting from Agile Methodology - practicing flexible research

We were reaching a point where we were close with the design, but independently we compared some similar SaaS platforms through Competitive Evaluation to try to find something that might give us a living example of what we were trying to achieve. We found a few good examples, and ultimately utilized the ideas we had to streamline the flows, and thus a third task flow was born:

Option 3 of our workflow - Building on Competitive Analysis and further refinement

Wireframes

After we had all 3 task flows laid out, the team was split between flows 1 and 3, wanting to get additional stakeholder input as to which task flow would work better--both from a technical development perspective, as well as the overall feel of the experience.

In order to better convey the information and story we were trying to tell however, I set out on creating some low-fidelity wireframes of the two task flows, so the other stakeholders could get an idea of what we wanted the experience to look like. This also gave me the opportunity to start playing with how the design would work from a high-level and work toward preparing for the high-fidelity designs that would be coming not long after.

Ultimately, the major differences between the two came down to when we gathered different data points, but also I used the flows as a way of visually showing different options of how we could implement page composition, and incorporate future visuals into the flow.

After a bit of back-and-forth deliberation, and Mitch’s ability to meet with the team more regularly, the decision was made to go with Task Flow #2, and I was able to start building out the high-fidelity designs. However, before I could get started I needed to learn how to design with Material UI and, with the company being so young, it meant there weren’t any pre-existing design materials to speak of.

So…

Then came the Design System

The Design System

Mitch was able to get me some JavaScript files containing the company’s color palettes, as well as their chosen typography, which I was able to translate into the design system.

Beyond that though, there wasn’t much reference to speak of in regards to pre-existing elements and functions with which I could use for building the high-fidelity designs. I also wanted to make life easier for whomever would work on other projects after me, or if I worked with the team again on future iterations, and additional designs, we could quickly and easily adapt what we had in the Design System. This also gave me a great opportunity to both practice my Figma skills, as well as get intimately experienced with how Material UI and Material Design functioned both in their visual design, as well as their interaction design.

User Interface

With the Design System in place, and myself having a firm grasp on the guidelines I needed to follow while designing, I set out to build the major pages of the flow.

Critical Pages

The primary pages I needed to design included:

  1. The landing page - Where we would ask for the user’s Email. This would allow us to catch returning users, as well as users from an existing organization if email domains matched, or potential bots and competitors
  2. The Email Verification page - A common step for security practices to prevent spamming/bots and ensuring engagement in the registration process
  3. The Details page - Gathering the remaining information we needed from the user. This would allow Express Evaluations to create a new instance and user, as well as gather some other important data for the user’s experience. This step was removing a lot of the manual work the sales team had to perform previously
  4. The Completion page - Functioning more for user experience and aesthetics, but also giving the development team a clear marker of where they should add their other add-ins later when they make expansions and iterations to the flow

Additional Designs

On top of the primary scenes, I wanted to ensure that the Development team had everything they would need to build an awesome flow. I designed additional screens to show how alternative designs could look to provide alternate user experiences, and potential additional functionality for a wider user subset.

Mobile Designs

In today’s world, so many people want to have the ability to sign up or access new tools via their mobile devices. With that in mind, I took the time to also create some mobile designs for the flow, so that when the team was ready, they could incorporate the mobile designs into their system. Additionally, all of the designs from the Design System through the Web and Mobile designs are built on a reactive scale system, and utilize the 8pt grid, so everything was built with reactiveness in mind.

Conclusion

Next Steps

The Express Evaluations team doesn’t plan to just stop with basic sign up of course--long term, they are looking forward to further taking the initial onboarding process and making it more intuitive and self-adoptive.

The team is also looking to take the leads that they are generating with an easy-to-use sign up flow like this, and start converting those into paying clients through defining a ‘free trial’ functionality. Additionally, better empowering their power users with more intuitive and in-depth onboarding functionality, as well as building new features to get users access to support documentation quickly and seamlessly.

Final Thoughts

Getting the opportunity to work with the Express Evaluations team and build this new feature from the ground up was an amazing experience. I had such an incredible time getting to practice and really envelop myself in the UX design process, and being able to really grow my UI skills has been invaluable.

I can’t wait to see Express Evaluations incorporate this new flow into their system, and I look forward to updating this Case Study with details in the future of how this has impacted the team and the product as a whole.