Native Leave Request App Update
My Role
UX Designer
My Tools
User Interviews | Affinity Mapping | Sketch App | InVision
TASK
The current leave app for this organization was outdated and didn’t use a mobile design system. Our team decided that the best approach was for me to conduct moderated usability testing followed by mockups before finalizing the product for development.
User Research
The only data to rely on, since the app had been build more than a decade prior, was the quarterly survey of all department products. Based on this, there was an occasional comment from an app user themselves which would point out a specific missed use case (for example, holiday displays by country did not auto-populate).
I started by investigating the missed use cases and detailing out the user flows that would compose an MVP. When ready, I wrote a research protocol that would:
Target a range of users from different departments who:
Have/have not downloaded the app
Are/are not located at DC HQ
Last approximately 20 minutes
Include open-ended questions to encourage discussion
Require task-based completions based on the MVP requirements of what the user should be able to accomplish ‘without any difficulty’
Processing the first affinity map based on interviews with some help from my team.
Sample Open-Ended Questions
If the app is on your phone, do you like it?
Why do you use the application?
What would you expect to see on the home screen?
What would you expect to see on your calendar view?
Sample Task-Based Questions
Can you change the time units from hours to days?
Submit an annual leave request for any two days next month.
Submit a sick leave request for this afternoon, and inform a co-worker.
Submit a request to work from home three days per week for the next three weeks.
Medium Fidelity Wireframes
I tested the initial wireframes with users, and the feedback was overall positive. A few new issues popped up:
Users eyes were drawn first to the icons and leave information, but had trouble understanding what it meant.
Users wanted to see more leave types right away.
User Feedback:
“It's not clear to me if that's the remaining leave or if I have taken this leave.”
“This is nice. Simple and good.”
CLIENT AND PRODUCT TEAM ENGAGEMENT
I worked closely with the dev team to ensure the mockups could be easily developed.
As each round of research wrapped, I presented a deck telling the story of the research before sharing the mockups. This helped create a deeper understanding of why suggestions were made, and helped prevent arbitrary changes from the client side.
Final mockup
Final mockup
Summation of research-based changes from the previous version of the app:
Clarified the UI so that it was clear to users how to check for other type of leave balances.
I introduced a standard tab bar which appears at the bottom of the app screen and provides the ability to quickly switch between main sections of an app. The calendar seemed to be in the wrong place on the app so we made it more visible by adding to tab bar.
I also introduced a standard primary action button which is located in the center of the tab bar.
I reworked some of the content, for example, I moved policies and guidelines in the hamburger menu. I also suggest links should not take and strand users outside the application.
Current Status: This app is currently being utilized and has an 89% approval rating. The additional contributions to the design system have been key in developing other mobile products.