This case study is password protected
Enter the password to view.
Service Industry Startup
A Mobile-First, On-Demand Job Matching App
Problem Overview
This early stage startup needed a UI to meet their defined business requirements in order to build their MVP, gather a user base, and potentially gain VC funding. They sought out the help of my company, a UX consultancy, in order to get a solid UI that was built with standard and well-vetted UI patterns to create a familiar platform that users could easily learn and operate.
The Goal
The on-demand job matching app takes cues from well known apps such as Wag and Task Rabbit to allow workers in the service industry to find gigs and build a schedule of job shifts to ensure adequate income. Meanwhile, employers can find and hire well-vetted employees to fill open shifts on the fly, ensuring events and routine shifts are always fully staffed.
My Role
In a team of two designers, I was the primary interaction designer. I took part in the product discovery session, flying to DC to meet with the client stakeholders, co-presenting our discovery methodology and taking point on documentation throughout the discovery session. On the last day of discovery, I led a session defining the full product walkthrough, with rapid prototyping of the on-boarding process.
Leading Discovery Sessions
Outputs produced from our feature requirements gathering session (organized and written by myself).
Following the session, I created user persona profiles for the three types of users so we could model out their workflows and how they intertwined.
Rapid Prototyping
I used rapid prototyping to quickly document and communicate my understanding of the user workflow based on the information we needed to gather and provide the users.
Persona Identification
Taking what I learned in the discovery workshops, I identified three different personas with vastly different workflows and needs that would need to be met by the mobile app.
I then created an information architecture diagram that defined all screens required, and defined what type of screen was needed for each. Using this IA with screen definitions, we were able to create a scope that matched the timeframe and budgetary restraints set by the client.
User Persona Profiling
A full persona profile, including a description of a day in the life of this archetype of person, sub-segments of the persona, technology comfort, goals, frustrations, key requirements, primary needs, and information about the frequency and mode of interaction with the app.
Information Architecture Diagram
I produced an information architecture diagram of the full app workflow, including definition of the screen type. This helped us to scope the budget for the project by estimating how much reuse there would be between screens, and how many unique screens we would need.
I then produced wireframes for the entire on-boarding processes of both user types. To speed up the design process, I used a UI design kit containing buttons and form elements linked by a Sketch library. This took some time to establish and organize up front, but it saved time later when the designs became high-fidelity, because colors and styles could be swapped out in the master library and cascade down into individual page files with minimal effort.
Progressive Disclosure
A wireframe workflow for creating a profile in a step-wise form. It was important to not overwhelm the user with too many questions up front, but rather present one question at a time, and show the next question when the prior had been completed.
Detailing Mobile Interactions
The wireframe was detailed enough to account for every single step in the process. Adding a profile picture took four steps: viewing visual instructions for how to take the picture, the photo capture screen, a screen for reviewing your profile picture and editing it if you wish, and a confirmation screen.
Visualizing and Tracking Status
In order to gain full access to the app, users had to be approved via an interview, background check, and payroll on-boarding. Before they were fully on-boarded, they needed a screen to track their status and view if there were any steps they needed to work on. They also were given the ability to explore jobs, but would not be able to apply until approved.
Organizing Design Files by Workflow
I single-handedly wireframed two-thirds of the app in just three weeks, and created an organization system by persona workflow to ensure all designers could find the wireframes they needed.
Process
- Discovery
- Competitive analysis
- Requirements gathering
- Prioritization
- Scoping
- Information architecture (visual)
- Defining screen types
- Creating a sketch symbol library (that could evolve)
- Wireframing
- Client/UX/technical reviews
- Branding research and collaboration
- Documentation/proof of effort
Challenges
- Working with a startup with a strict budget
- Creating a design system that can evolve to reduce excess design outputs
- Translating requirements into technically sound interactions
- Targeting a user audience who may not speak much English
- Trying to maintain a positive working relationship with a client who didn't want to pay for the work he received
Impact / End Result
- 103 screens in 3 weeks
- 66% of wireframes complete and under budget
Lessons Learned
- Collaborating with a client who didn't value the user experience process
- Wireframes are best left looking rough and in gray-scale so a client doesn't mistake it for final product (even when leveraging UI kits)
- More time needed than was scoped
- More document review needed following discovery
- Don't try to streamline UX processes — every step counts
- Check Glassdoor for reviews about a client before working with them
What I Would Have Done Differently
- Accounted for more time reviewing discovery documentation and interaction modeling
- I would have voiced more firm opinion on scoping because our budget was too low
- Noticed red flags with the client sooner