Making the entry-point of a tool intuitive and seamless for the user
UX Designer and Full Stack Developer
2 weeks
UX Design, Full Stack Web Development
An internal fiscal partner at the Foundation for California Community Colleges requested our team to help them make their web tool’s account registration experience more seamless.
Based on feedback from community managers and teachers, they stated that the registration process was complicated, too long, and required them to have information ready beforehand.
This complex registration process causes a bad first impression during the users’ first 10 minutes of using the tool, and it was something that needed to be addressed.
To provide the most seamless registration experience for the user, I designed and developed an invite system that provides the user a seamless, heavily simplified, and customized experience.
This invite system contains two key components: 1) a new view for administrators to create and manage their invites and 2) a revamped user interface and experience for users that registers through the invite.
The user invite system allowed me to reduce the number of steps and the amount of effort required for each step. The next section describes the thinking behind of how I simplified the registration flow for the user.
1. An administrator creates the invite
The administrator would fill out basic invite information, like the user’s full name, email address and the assigned organization. The backend also collects some extra data from the administrator that is creating the invite.
2. The user receives a customized email
The user will receive an email that feels customized to them; not something that’s generic.
1. The user is greeted with a welcome screen
When the user clicks on the link, they are greeted with a welcome screen that displays critical information upfront. A link to directly contact the administrator is conveniently placed at the bottom of the screen.
2. The user creates their account password
The user’s first name, last name, and email address fields are conveniently pre filled by the invite database. The only field they need to fill out is their desired password, unless they want to change the pre filled data.
3. The user confirms their assigned organization
Before the introduction of this invite system, the user had to select which organization to be part of and fill out additional information. This new registration flow completely eliminates those steps.
4. The user is presented with a quick overview
After the user confirms their assigned organization, they are greeted with an onboarding page which gives the user a brief overview of what the product is capable of.
Due to the small size of this project team, I was tasked to be the designer and developer of this project. Because of this, I had full control of how I want to bring this design to life. For this project, I rearranged the development life cycle to ensure technical feasibility and efficiency.
1. Create low-fidelity wireframes.
This allowed me to quickly sketch ideas and think of a rough user flow.
2. Develop the backend.
Starting backend development immediately after creating wireframes allowed me to determine whether my ideas can be implemented.
3. Create high-fidelity mockups.
After verifying that my ideas can be implemented, I proceed to create high-fidelity mockups that can be shared with clients and guide me to the front-end development phase.
4. Develop the frontend.
Time to make things look presentable and ready to use for the end user.
"This invite system is easily our favorite feature added to our web tool. We were excited by how natural and easy it was for our users to get started with using our tool."
Our Client (Director of an internal fiscal partner at Foundation for California Colleges)
"One of the easiest account registrations that I've ever gone through."
A coach for a robotics program in Elk Grove, CA
"One of my colleagues were blown away by how the system autofilled their name and email address; only requiring them to enter a password. Simply magical."
A director for a California school district
Designing and developing this user invite feature resulted in a significantly simplified user experience and glowing feedback from clients and users. Based on early user testing results, the average completion time for this new registration flow was less than 3 minutes, which is significantly lower compared to the average time of 8 minutes spent with the old registration system.
Being the only designer and developer for this project allowed me to combine both skill sets into one product and it was quite the learning experience. However, due to a limited budget for this project, I also had to stay in constant communication with the clients, lead user testing, and gather requirements. Juggling all these roles on top being the designer and developer was definitely a learning experience, however I could’ve used the extra lunch breaks lost and some overtime for something else.
