January 2021
My Role
UX Designer - Interaction Design, Visual Design, Rapid Prototyping
Timeline
This feature was completed after 1 month of work.
Overview
For one of my product design assignments at Utah Valley University, I was tasked with redesigning a popular chocolate chip recipe web page.
I was instructed to design for 2 platforms, mobile and tablet.
Initial Research
From the project outset, I was given access to the existing Agreement Builder, a heuristic study performed by another UX designer, as well as a list of features to be added in the redesign.
Problems
Agreement/Addendum Builder
Signing Flow
Goal-Directed Personas
To better understand how this flow needed to be designed, I defined the main goals of each type of user that would eventually be interacting with this flow. I listed out the user segments which are noted below.
Moxie Admins
Admins are the office staff that support Moxie in every avenue of their business. Admins are also the user-type with permissions to access all features in this feature. They typically access Moxie Universe on their desktop.
Goal: Create agreements, create addendums for existing agreements, access employee documents
Recruiters
Recruiters are members of the sales staff that lead sales team, or have helped to recruit another member of the sales reps. They typically access Moxie Universe on their phone or tablet.
Goal: Add addendum’s to one of their recruit’s agreement, help a recruit through the signing process
Recruits
A recruit is a new sales rep who is in the process of joining the Moxie family.
Goal: Get through the signing process as quickly as possible
Returning Sales Reps
Sales reps that have sold with Moxie before and returning for another season.
Goal: Get through the signing process as quickly as possible
Redesign
Moxie actually had a very robust design system that had been created by another designer at Maven earlier on in the year. I was required to use this existing system for the project but I created some custom components, such as the accordion menu for the agreement builder and the timeline-esque components for the agreement builder.
Agreement Builder
The agreement builder allows administrative users and recruiters the ability to draft sales agreements to send to recruits so they can officially sign onto the team as a sales representatives. The agreement is purposefully built so that users may complete all the steps in drafting the agreement in any order they may wish. Each step of the process is divided by the accordion menu to promote accuracy, as the administrator must focus on each step individually.
Agreement Viewer
The agreement viewer is composed of a "structure" diagram that displays the main agreement and any addendums that have been added to it as well as a viewport for examining the documents. The user will use the structure as a menu to select what is displayed in the viewport. The user may click on the “Sign Agreement” to access the signing process for this agreement.
Signing Process
This flow is designed for returning sales reps and other users who already have an existing Moxie Universe account, or Admins who are sitting with a recruit and are helping the recruit through the signing process.
Design Validation
To validate my design, I requested a zoom call with one of the office admins at Moxie. I presented my prototype with her to receive feedback. She loved the designs, and was excited to see them implemented.
Project Reflection
What went well
This was one of my first professional projects and as such, I learned a lot! This was also my first project working with an existing design system, learning to navigate another designer’s components was a learning curve, but I learned a lot about Figma’s collaborate tools.
What could have gone better
During the course of my project with Moxie, I encountered a challenge that impacted our ability to conduct direct user testing. Despite the recognized importance of this phase in the design process, regrettably, we faced constraints that prevented us from obtaining valuable user feedback.