Contact

USPS EAP Feature Case Study

Interact with prototype

My Roles

UX/UI Design / UI Development and components coding

Project Background

USPS EAP program provides their employees with mental health issue and offers consultation with live psychologists. The challenges we were facing are integrating all the existing programs and streamlining new products in a user centered methodology. The new products are not only providing a face lifting of previous functionalities but also design a fluid user experience work for people who are not computer or device savvy with all 508 compliances (accessbility) guidelines and mobile responsive capability.

Task And Mission

  • Design a new healthcare web app for USPS Employee Assistant Program that aligns with existing branding
  • Meet AA requirements of 508 compliance guidelines of federal government
  • Build mobile responsive and cross platform competible app

DISCOVERY

Research Goals

  • What are the technical defficulties are existing end users facing.
  • What type of the devices do end users use.
  • What percentage of various devices are using.
  • What challenges and frustrations of existing site do end user facing.
  • What demographics of current end users.
  • What percentage of each age group.
  • What sites or apps do they like and why.

Interviews

Participants

  • Gender
    • 2 males
    • 2 females
  • Race
    • 1 Asian female
    • 2 Black female
    • 1 Caucasian male
  • Age
    • 1 25
    • 2 45+
    • 1 55+
  • Employment
    • All full-time employed
  • Marital Status
    • 2 singles
    • 1 married
    • 1 widowed

Summary

Interviewees liked the idea of "simple and diverse". Managing services such as Opioid Rcovery or Depression should be as easy as possible. Many liked the idea of being able to see all widgets in a group, like a dashboard. Frustration and challenges are expressed as flexibility and sectional concepts.

DEFINE

Persona

I consulted my notes from the interviews and was able to develop the type of persona who would use the new fresh features in the EAP app. Based on my research and interviews it became clear that this group, needed help in simplify and grouping features. "Myeonhe" and "Kesha" are based on the people I spoke to and the struggles the fluidity of existing app. They were 2 of the interviewees to help bring that struggle to light and make the journey to groupling more relatable. Here, we really begin to get a sense of who they are.

Task Flow

There are three task flows : One for a user to create a new goal, another for modifying an existing goal, and finally one where the user could easily access once the feature was set up. A task flow demonstrates the beginning to end walk through the process with no deviations. View the full task flow.

User Flow

Here is where I got to get into my persona and really look at what a real user might decide to do along the path to creating their goals. There are many decision points to consider, like are they creating a new goal or modifying one that already exists. They also needs to take into consideration how the goal will be funded. The user flow is like a task flow but takes decision points into consideration, which may take the users into other directions along the flow. View the full user flow.

Sketches

I used both my task flow and user flow to start sketching some low-fi wireframes. This sketch represents the creation of a new goal with a second step of editing the goal once it's created. Getting the ideas rapidly down on paper really helped to solidify the flow. I find this method the best way for getting ideas down quickly and being able to iterate on them just as quickly. View the full sketch.

DESIGN

High Fidelity Prototype

Once I got the low-fi sketches to where I wanted them, I began creating the high-fidelity wireframe/prototype inside of Adobe XD. Here, is where the UI starts to come together and I was careful to stay within the parameters of the already established branding of the USPS app. I wanted to be sure I stuck to the original task of making sure the new tool embedded well and smoothly with the rest of the app. Interact with the prototype. I also used HTML, Bootstrap, jQuery to create a dynamic version of interactive prototype which could be used in futher development stage. By doing this step, I could load the work in BrowserStack for repsonsive testing and accessbility testing in Level Access. This step is critical for refine the prototype work but also make the whole process seamlessly be transferred to UI development.

Usability Testing

Participants

  • 69 total test subjects - 4 in person (2 female, 2 male) - 65 remote, unmoderated

Test Objectives

  • Determine the ease at which users can navigate through the healthcare app to accomplish their tasks, which will be to set up a new goal and then edit that goal.
  • Observe how users searched for and found the features.
  • Observe the path in which they took to get to the goal setup screen.
  • Test the overall ease of use of navigating through the feature.
  • Observe any frustrations or obstacles users may have that may impede their ability to complete their task.

Test Summary

  • In Person Testing
    • Users had very little trouble completing the task asked of them.
    • Difficulty on the Health Assessments screen.
    • Issues with some responsive screens.
    • High marks for tags of 508 compliance.
  • Unmoderated Remote Testing
    • 52% had no trouble completing the task.
    • 31% used an alternate route
    • 48% gave up
    • Many had issues with the My Streghth screen and either clicked around the screen a lot or outright gave up and did not complete the task.

Affinity Map

From the affinity map I was able to pin point a couple of distinct patterns. There were some users who had difficulty with a few of the elements on the Suicide Prevention screen. There was also clearly some confusion around the My Strenghth Screen and the fact that the Get Started button seemed grayed out to people. Between the patterns that emerged and users' suggestions, I was able to prioritize which changes I needed to make. In this case, making sure the Suicide Prevention screen can be more easily understood takes priority because that page was impeding people from moving forward. View the affinity map.

Priority Revisions

I determined that most of the suggestions for change that came from users and the patterns found in the affinity map were simple enough to implement. Had there been a significant amount of changes that needed to take place, I would have used a priority matrix to pin point exactly which changes were low effort/high impact and implement them.

Logo Design
CI Design
Web Design
Poster Design
UX/UI
All Right Reserved | ® Copyright

DC, Maryland, Virginia

202-556-1809

j.z.franz@pm.me