DPSS Los Angeles App

Role

Product Designer

Timeline

5 weeks

Deliverable

App Redesign

Tools

Figma
Photoshop

CaseStudyHero.png

Disclaimer:  I’m not affiliated with DPSS in any capacity, and the views for this case study are strictly my own. Since I don’t have full access to all the user data that influenced their current design, this case study is not fully comprehensive. This case study was done to enhance my learning experience and challenge myself to redesign it to serve a specific purpose.

Overview

The DPSS(Department of Public Social Services) mobile app is a case management tool that allows you to access your account details, apply for benefits, and stay up-to-date with news and events. The app is available for Android and iOS devices.

The Challenge

As a person who has needed to take advantage of the services that DPSS offers, navigating its mobile app is a rough and unpleasant experience. The actual focus for this project was to make the app more engaging, make managing and viewing case information easier, and introduce features to drive more engagement.
 

The Goal

The goal was to redesign the existing app to improve the user's overall experience, create an aesthetically pleasing UI, and include additional features to provide more value to its users. These additional features are;

  • Appointment Booking: Users now have the ability to book appointments with their case worker directly from the app.

  • News & Updates Page:  This allows users to stay up to date with any changes,  events, and news from DPSS. 

  • Live Chat:  In addition to users being able to send an email or place a phone call to customer service, they will now be able to chat with a live representative for immediate assistance.

DPSSLogo.png
Comparison.png

Getting Started

To get a more comprehensive record of the users pain points with the app, I took screenshots of everyway a user could interact with DPSS and recorded a typical user flow.

Analysis.png
App Reviews.png

Understanding Current Users

The DPSS mobile app is available for both android and iOS users with a collective download count of about a million users and has an average rating of 2.5/5 stars. To get a better understanding of their experiences with the app, I searched through the user reviews on both the Play Store and the Mac App Store to validate my concerns. 
 

Identifying Pain Points

During my analysis, I found the following pain points:

1. Lack of language accessibility, no option for user to choose a language besides English. 
2. Text is not legible in some instances.
3. Modal is difficult to use and outdated.
4. App features are redundant.
5. Visual design is jarring and clunky.

Need 1 - Greater Accessibility: Users which English is not their primary language are left a disadvantage, so more language options are suggested. Also users who have some type of visual impairment or blindness would benefit from voice prompts to help them navigate the app. 

Need 2 - Improved Usability:  Users feel the app experience is slow, not user friendly and outdated. Most users expressed how the most pertinent info regarding their case was not displayed. 

 

Ideation

Affinity Mapping

Next, I compiled all the feedback, insights, and pain points listed above and grouped similar ones. This helped me brainstorm and develop potential ideas and gave a clearer view of what was important to users while keeping in mind the business goals and objectives.

Affinity Mapping.png

Design

Wireframes and Iterations

When I started approaching the design problem, I sketched out some options of how I could improve the existing design and resolve the above-mentioned problems. I got to iterate on what would work and what wouldn’t and then I converted my sketch to Mid-fidelity wireframes, this made the visual design process easier and faster.

Wireframes.png

Analysis of Problems Discovered

A crucial step I took for the redesign was to audit the old design to figure what’s not working. The apps design needed to be completely renovated and new features would make for a much smoother user experience.

Onboarding

Before

Frame 37.png

Problems: 

  • There is no onboarding flow to introduce new users to this app and its features.

  • Lack of visual consistency in the buttons makes it harder for people to verify the authenticity of your communications, making them less likely to convert.

  • The registration process has a lot of unnecessary steps.
     

After

Onboarding Section.png

Solution:​

  • Designed a more streamlined registration and login process.  Instead of bombarding users  with a multitude of options at the start, provided users with just enough information to keep things moving. 

  • This approach ensures that the user is enlightened and knows what to expect at every point.

  • Maintained design consistency across registration and logging in.

Language Selection

Before

Frame 37.png

Problem: 

  • There wasn't an option for a user to change their choice of preferred language. This reduces the app's overall accessibility as their are a multitude of people who take advantage of these services who's native language isn't English. 

After

Language Selection Section.png

Solution:​

  • Designed an option for the user to change their preferred language by clicking on "Select Language" when you open the app. English is default but if say someone speaks Korean, the interface changes. 

Account/Case Info

Before

Frame 40.png

Problem: 

There didn't appear to be any logic in the user interface that was originally created to display account and case info. It's confusing to navigate the  app to find the information you're looking for. This lack of forethought hinders a pleasant experience.

After

Dashboard Section.png

Solution:​

  • Designed a navigation bar that organize the apps features in more efficient way. 

Case Verification Upload

Before

Problem: 

The UI design is not intuitive and confusing. 

After

Upload Group.png

Solution:​

Redesigned the user flow to be more straightforward and easy to understand.

Frame 42.png

Suggested Features

These are some features that I added that I thought would improve the overall user experience. 

Dedicated Resources Tab

Appointment Scheduling

Suggested Features 1.png

Dedicated News Tab

DPSS ATM Finder

Additional Customer Service Options

Suggested Features 2.png

Creating a Design System

The first step in the visual redesign process was to create a system of updated UI components that was more visually pleasing and consistent. 

Design System.png

Key Learnings 

Working on this product was a great opportunity for me to dive deeper into Information Architecture, user research, and visual design. I look forward to implementing and testing this design as with any project, testing is essential.

  • In-depth analysis of the design decisions is really vital to make sure you’re fulfilling your user's needs through empathy.

  • I got to understand the common UI and UX paradigms.

  • Small changes in design can make a huge impact on the whole user experience.

  • I worked on a lot of iterations to arrive at the right solution. During this process, I realized that there’s nothing like too many iterations because the more you iterate the more chances of the best solution.

  • While working on design solutions for this problem, I came across some micro-challenges, which made the whole project even more interesting. I learned how to resolve those challenges without compromising on the major design solution.

Challenges and Next Steps

The biggest challenge trying to refine the design with departing too much from the original design. I wish I had more opportunities to actually speak with users of the app instead of having to rely on my own experience and impersonal user reviews. 

This actually brings me to my future plans for the project. I want to give the design an actual complete overhaul and test the proposed solution with more users to validate my assumptions. I plan on pitching the redesign to the DPSS when complete. 

Try the app yourself here.