image

Economic Mobility Data Standard

The Economic Mobility project is funded by the Bill & Melinda Gates Foundation. I led the user experience and UI design for both stages of this project.

Stage 1: Landing page

Stage 2: React.js web app: https://em.datastandards.directory

Figma
apple
jQuery

My Design Process

UX and UI Design to Launch

I follow the iterative design thinking process. My designs are driven by the user's needs and feedback.

1

Disovery and Research

  • Focus Groups - JHU met with over 60 cities at the 2019 Economic Mobility Convention to capture user needs and different perspectives. Brainstorming group activities were done with users to validate and identify content needed for the data dictionary.
  • Internal Stakeholder Interviews - I heavily relied on the JHU Applied Public Research staff for this specific project because they had gathered user needs from city staff. They managed all of the content needed in the deliverables. They also connected me directly to users to get the feedback that I needed and to track any new user needs.
  • Questionnaire for internal staff that was on the project for 2 years.
  • Competitive Analysis I researched the user experience and user interface design of other city government data dictionaries and standards so that I could see what was best practice for this kind of tool.
2

Define

  • Problem Statement
  • User Scenario
  • Information architecture (IA) - User Journey Map
  • Our JHU team used the term "doors" to describe the different navigational entrances that a user could take. So for fun, I used door emojis in the user journey map for internal collaboration and communication.

App Target Users: City and County government employees that make data-informed decisions for economic mobility programs.

Click above to enlarge
Click above to enlarge
3

Ideation

  • Sketches - The first hand-drawn sketches.
  • Homepage Wireframe - Transition physical sketches to low fidelity digital wireframes.
  • Figma Wireframe

4

UI Design and Code

  • Figma Design System and Components.
  • High fidelity prototype and team collaboration in Figma -

    Figma Prototype Link

  • Front-End Development: I coded my designs using React.js, ES6 JavaScript, Reactstrap (a component based Bootstrap library for React).
Click above to enlarge
Process
5

Beta Launch and User Feedback

  • The APR JHU team and I met with different city government departments in Zoom video calls during the COVID-19 Pandemic. During these calls, I asked how they would use our data standard tool for their work, how useful was the tool and other important questions.
  • I also emailed user feedback surveys to city government staff to capture user input and suggestions on the data standard tool.
  • I applied the requests and changes to the local code base.
6

Launch to Production

Process

Feedback and Results

Internal Staff and External User Feedback

Check our customers success stories.

review service logo

Alicia led the UX and UI design process for the Economic Mobility project funded by the Bill and Melinda Gates Foundation. Alicia used surveys to collect user feedback and needs from city government staff.

She used Figma to design low-fidelity wireframes and high-fidelity interactive prototypes for team collaboration and review. I learned a lot from working with Alicia, and enjoyed working with her as well!

Katherine Klosek

Johns Hopkins University
Director at Center for Applied Public Research

review service logo

Overall, I find the tool to be useful and flexible to encourage cities to continue sharing their data.

Davonte Caldwell

City of Houston
Planner ll

I have been involved in this project since the beginning and I am invested in wanting to help roll it out in my city to demonstrate its utility.

Karalyn Kratowicz

Performance Excellence Specialist
Madison, Wisconsin