Overview
UX/UI Design, UX Research, Inclusive Design
The Client
OCEIA, a sector of the City of San Francisco, promotes inclusive policies and fosters immigrant assistance programs that lead to full civic, economic and linguistic integration. They run the CAP, Community Ambassador Program, that gives individuals the opportunity to create job opportunities for themselves. Additionally, these ambassadors act as an approachable resource on the streets of San Francisco, where those in need can feel safe seeking out support and receive help.
The Challenge
Creating an accessible and equitable experience for all their ambassadors of their CAP program.
Redesigning and optimizing the experience for ambassadors with no budget and tight constraints.
The Outcome
A fully redesigned, restructured, and optimized workflow.
A complete redesign of critical documents and internal website flows.
A conceptual mobile app for users to access their schedules and easily request schedule changes.
52% decrease in effort, 167% increase in satisfaction, 353% increase in likeliness to refer dashboard to other ambassadors.
Timeline
3-Week Sprint
Team
Katelyn Johnson (me)
Allie Wrubel
Role
This was a highly collaborative project. Input from both of us was executed within each method.
I took additional responsibilities in task flows, Google HEART analysis, inclusive design (accessibility), and leading the design style for the 2-Week schedule redesign and mobile application.
Methods Used
Business Analysis
User Interviews
Heuristics Evaluation
Task Flows
Affinity Mapping
Journey Maps
Persona & Scenario Development
Google HEART Analysis
Inclusive Design
Usability Testing
Metrics Analysis
Prototyping, Iteration
OCEIA’s Goals
Understand
Understand the pain points with the current documents in the eyes of the ambassadors.
Empower
Give ambassadors the necessary tools to take ownership and build confidence managing and navigating critical work documents.
Create Impact
Take action to optimize and digitize the workflow by having my team conduct UX research, build design solutions, test these solutions, and measure the impact.
Constraints
Limited Technology
OCEIA’s current workflow system is all run and managed via G-Suite tools.
Due to lack of resources, we would need to revamp their current documents within G-Suite as they do not have budget for a website or a mobile app.
There’s a wide range of technological competencies amongst Ambassadors, so accessibility and simplicity is key.
No Budget
As OCEIA dedicates all of its resources to the well-being and success of their employees, OCEIA challenged us with providing no budget for this sprint.
Defining Challenges
Digitization
How can we digitize the operations workflow with the constraints we’ve been given?
Optimization
How do we optimize these documents to increase comprehension and confidence?
Success
How do we define and measure success?
Analyzing the current systems
Conducting a Heuristics Evaluation to objectively understand design violations.
One of our first action steps was to dig into the current documents to gain a base-level of understanding for how Ambassadors interact with these on a regular basis. We wanted to see firsthand what it was like to experience completing tasks with these documents using this objective framework to see where any tension surfaced along the way.
Using three main tasks, we discovered violations across all documents, utilizing a series of heuristics to identify these violations.
Current Documents
2-Week Schedule
Hourly Schedule
Zone Map & Hot Spots
Heuristic Evaluation
Violation Trends
Aesthetics
All documents showcasing a variety of color and text being used everywhere, but there is no hierarchical information indicating importance of these elements.
Strive for Consistency
All documents are trying to communicate a variety of information, but their current structure and formatting is inconsistent across the board.
Recognition Not Recall
Ability to recognize patterns is unintuitive in these current layouts. Information overload; it is incredibly difficult to associate simple messaging with its meaning in all documents.
Conducting interviews
Connecting with Team Leads in 1:1 interviews and surveys to better understand frustrations within the current workflow.
Due to COVID-19, we were unable to conduct contextual inquiry, which would have given us a rich understanding of the day-to-day processes and interactions Team Leads face with these documents. Instead, we were confined to video calls to conduct our interviews, so we met with Team Leads to uncover critical information. We additionally conducted surveys as supplemental data.
Our Goals
Understand how their current workflow exists.
Get better insight where the pain points are in the current operations workflow.
Understand how we can better streamline the processes so all Team Leads and Ambassadors feel confident accessing and managing information on a daily basis.
Interview Insights
“A lot of them tell me [the schedule] works better when they know exactly what their days are. It’s easy just to go to that little piece of information instead of having to go through a lot of names. It gets really confusing and overwhelming.”
— Interviewee
“If there’s something easier, something very accessible to the point where if I log in and put my name in and I can just see my schedule and my partner’s schedule, that would be perfect instead of looking at everyone’s schedule because that's just confusing.”
— Interviewee
Synthesizing our research
Conducting Affinity Mapping to organize data and discover trends amongst research findings.
With our research completed, we used Miro to virtually collaborate to conduct Affinity Mapping. This led us to discover trends and commonalities with the data we uncovered.
Affinity Mapping
This Affinity Map provides useful insight into each interviewee’s experiences managing, navigating, and updating the documents. Each color represents one individual.
Major trends and commonalities
Time consuming to update
Difficulty tracking schedules
Hard to comprehend cluttered information
Hard copy schedules are invalid when shift changes occur
Changing shifts is a complicated, lengthy, manual process
The Problem
Currently…
The CAP scheduling documents are inconsistent, visually cluttered, and time-consuming to update, leaving Team Leads feeling stressed and frustrated with the current workflow.
Additionally, ambassadors have difficulty tracking their own schedules, and therefore are confused and misunderstand the scope of their responsibilities on a regular basis.
Team Leads Need…
A streamlined process of accessing, updating, and distributing vital scheduling documents in order to feel confident in their team’s understanding of their schedules.
Our Solution
We believe…
By redesigning and streamlining the structure of these documents, along with optimizing the CAP Dashboard to centralize all information, Team Leads will feel increased confidence and competency updating and managing their team’s schedules.
We’ll know we’ve succeeded when…
Team leads are able to update documents quickly without additional support from their supervisor, and ambassadors can visualize and comprehend their schedules more easily.
Redesigning the CAP documents
Enhancing the document experience by focusing on simplicity, accessibility, and efficiency.
Once our problem and design solutions, founded on our research, were defined, we took steps towards designing the proper solutions. OCEIA’s main concern was restructuring the documents, so we made sure to keep this at the forefront of our project, keeping our constraints in mind.
Increasing Simplicity and Accessibility
We reduced the amount of colors, as well as the variation of colors being used in the current documents in order to increase accessibility of visualizing information. We gray-scaled and removed competing colors when possible, resulting in maximized simplicity and reduced visual clutter.
2-Week Schedule
Before
After
Hourly Schedule
Before
After
Zone Maps & Hot Spots
Before
After
Restructuring IA
Restructuring the Information Architecture was a critical decision in our process, as the current documents had an overwhelming amount of information presented in illogical order. Many users felt confused by the content they were looking at, and sifting through information proved to be very difficult.
In order to restructure the IA, we examined and broke down the content used in the current documents. From there, we found ways to logically break them up into more simplified structures.
Our goal behind this decision was to reduce cognitive overload and increase the intuitive nature of navigating through information within each document, ultimately resulting in increased overall comprehension.
2-Week Schedule
Before
After
Hourly Schedule
Before
After
Zone Map & Hot Spots
Before
After
Centralizing documents
Finding a measurable solution to centralize and streamline access of all team documents.
While OCEIA’s main goal was to restructure the team documents to be more user-friendly for their Ambassadors, we found another issue through research: The centralization of accessing these documents. We took it upon ourselves to utilize their CAP Dashboard, built via Google Sites, to explore this as an area of opportunity for a solution.
Existing Dashboard
Main Takeaways
Users counterintuitively click around on home page searching for team documents, but struggle to discover them under the home tab.
Users get lost in scrolling mechanism within Google Sites.
Users get overwhelmed by all of the colors and text variation within each of the documents.
Hard for users to understand information and sift through/discover what’s important for them due to lack of visual hierarchy.
Redesign Prototype
Main Takeaways
Using language and composition, we prioritized Team Documents on the Home page as these are most frequently used by all Ambassadors
Transitioned the 2-Week Schedule from a Google Doc to Google Excel. This design solution created opportunities to have real-time, automatic updates to the CAP Dashboard when edits are made in the backend by managers. This takes out the manual process of updating the dashboard bi-weekly.
Housed Zone Map information directly into CAP Dashboard for easier management and updating.
Added tips and additional information for easier navigation throughout site.
Incorporated buttons to create seamless, intuitive navigation between the three team documents.
Measuring Success
Testing the existing version of the CAP Dashboard against our redesign via Usability Testing.
Following each usability test for both versions, we had 100% participation from our users to complete a brief survey. We also ensured our participants were new on both the existing and redesign dashboards as a type of control; they all started the test with the same level of knowledge: None. These post-test surveys served as the metrics to define our success.
Metrics
How much effort did it take you to achieve your goals?
1 = no effort, 5 = a lot of effort
52%
decrease in effort levels.
Existing
Redesign
What is your overall satisfaction of this dashboard?
1 = not satisfied, 5 = extremely satisfied
167%
increase in satisfaction.
Existing
Redesign
How likely are you to refer this dashboard to another Ambassador?
0 = not likely, 10 = very likely
353%
increase in likeliness to refer.
Existing
Redesign
Designing a mobile application
Taking it one step further: Listening to our users and continuing to design for their needs.
With the success of the document and dashboard redesigns, we took it upon ourselves to continue finding solutions for our users to enhance their experience. From research, we found that our users are regularly using their mobile phones to access and navigate these documents, but run into issues viewing the mobile versions. We used Figma to collaborate on designs and build out a prototype.
To reiterate the problem:
Currently, the CAP scheduling documents are inconsistent, visually cluttered, and time-consuming to update, leaving Team Leads feeling stressed and frustrated with the current workflow. Additionally, ambassadors have difficulty tracking their own schedules, and therefore feel confused and misunderstand their scope of responsibilities on a regular basis.
Team Leads need a streamlined process of accessing, updating, and distributing vital scheduling documents in order to feel confident in their team’s understanding of their schedules.
Our design solution for a mobile app:
We believe that by designing a mobile app to streamline updates and processes, along with centralizing the accessibility of schedule and zone information, Team Leads and Ambassadors can easily access their information on a regular basis. With this mobile app resource, both Team Leads and Ambassadors can visualize and comprehend their schedules more easily in addition to efficiently adjusting schedules as need be.
Mobile Prototype
An Ambassador profile with pre-saved information, such as team location and manager.
Streamlined process of requesting a schedule change.
View schedule in a calendar with the Day, Week, and Month views.
Access to Zone information via Google Maps integration.
Ability to keep track of and check off main activities and guidelines.
Reactions from our clients
“You turned around such a comprehensive, robust, thoughtful set of tools and revamp of our whole process. It was way beyond what we expected, and we’re super excited to take the next steps on it.”
— Client
“It’s been an outstanding experience on our end. The fact that you all did go above and beyond is noted and deeply appreciated.”
— Client
“I do feel that you were thinking how the target users were ultimately using this, so thank you for keeping them front and center.”
— Client
“During the pandemic, it’s no small feat to be as focused and disciplined and committed to the way you all have supported the growth of this project.”
— Client
“These resources are going to be even more crucial in streamlining and getting us to a place we know we need to be. It comes at a perfect time.”
— Client
“It was great working with you on this. It looks great and it looks pretty user friendly, and that’s something I really need.”
— Team Lead
“I really like it. I feel like it’s going to benefit us in the long run; it’s a big improvement.”
— Team Lead
Next Steps
Budget
If we had a budget for this project, we would move forward with building out the mobile application and sending off the designs for development.
Design
With more time, I would’ve liked to have a discussion with the client on branding to gain a better understanding of colors to apply across all designs.
Accessibility
My next step to measure accessibility would be to test designs on target users to ensure the designs are easily readable and digestible, both visually and linguistically (specifically for those who aren’t native English speakers).
Process
Through research, we found the process to request a schedule change was a strong point of friction within the user experience. Our conceptual mobile app begins to cover this problem, but I would like to dedicate more time towards research and build out this process in more depth.
Reflection
This project pushed me beyond what I thought I was capable of accomplishing within three weeks. Collectively, my teammate and I were able to not only meet our client’s expectations of optimizing and digitizing their operations workflow, but we far exceeded their expectations by taking additional steps throughout the process.
While our client’s most important need was to redesign their google documents, we felt we were able to accomplish this request, but utilize the additional time we had to continue optimizing and developing additional design decisions, based on our research, to make sure we delivered and handed off as much useful, insightful information as we could.
Challenges
My original expectations were to work on an existing website or mobile app platform as this is was the expected nature of this project. However, this was not the case with our client and it challenged me to think outside the box of how we could ensure we were creating designs that were executable for the client that stayed within their constraints, as well as challenging ourselves with the skills we’re capable of applying to this project.
Other challenges were the constraints and impact Covid-19 had on our ability to maximize our skillsets. This project in particular made me realize how much we could benefit from meeting our clients and our users face-to-face, as well as having the ability to conduct contextual inquiry to get a richer understanding of our users’ problems. Covid-19 prevented us from gaining this richness in the project, so it was challenging to experience pain points firsthand and empathize with our users in-person. We made the best of it by conducting online interviews and meetings; however, I still believe there’s an added element to having in-person interactions for all parties involved to express and validate our interests and concerns for the users involved.
In the end, I felt incredibly proud and accomplished knowing we truly designed a solution that OCEIA’s incredibly eager to implement: redesigned documents and digitized workflow via their dashboard. I could feel their gratitude and appreciation for the work we put in, given the circumstances of the constraints and Covid-19 shelter in place restraints.
Project completed May, 2020.