M
E
N
U

Crosstown

Crosstown is a new kind of journalism that uses data to drive storytelling. It aims to tell ambitious stories through charts and visuals.

WEB
UX
UI

1

2

3

4

5

5

Crosstown

Crosstown is a new kind of journalism that uses data to drive storytelling. It aims to tell ambitious stories through charts and visuals.

WEB
UX
UI

Crosstown is a data-driven, public-interest news organization run out of the University of Southern California. It mines the data on crime, air quality, and traffic to help people stay connected with their communities.

I design, improve, and manage the overall user experience for Crosstown's sub-products, like the crime map, the crime tracker, and the air quality monitor.

For each sub-product, I

1/ made comprehensive product analysis from its pain point, target users, and positioning;
2/ conducted competitive research and analysis;
3/ identified design objectives and key experiences;
4/ build user-centric design;
5/ conducted product testing and revised the overall design.

This is a team project supervised by Professor Gabriel Kahn in which I took the role as a UI/UX designer and collaborated with the product manager, engineers, news reporters, and marketers to deliver product stories.

Sketch
InVision
Principle
Adobe Photoshop
Pivotal Tracker
IBM SPSS

TAKE THE Safety Map AS AN EXAMPLE

https://map.xtown.la/

Product

Analysis

ME

Figure out what problem the map is going to solve and what kind of customer needs it solved the most. Clarify the map's positioning in the overall user journey.

Pain PoinT 

People living in Los Angeles have experienced a rise in the concern of crime while the current news media is not effective or trustworthy enough to connect people with their communities.

How can we create a product that conveys the real crime situation and solve citizens' concern about crime?

Target users 

1/ Homeowners who might have children and care about the safety of their neighborhoods.

2/ LA politicos, real estate agents, and community managers who need evidence about the crime to support their work.

positioning 

We believe that an interactive map, a visualization of the latest crime data associated with stories can be a new way to connect people with relevant information.

The map will serve as a database which people who see our stories would like to check and share, repeatedly.

Competitive

Research & Analysis

ME

Research and interview people about current crime maps, such as LAPD Crime Mapping and Los Angeles Times' Crime L.A. to collect insights.

When researching these competitors, I took notes of their content, functionalities, visual design and user journey. During the interview, I paid attention to those interviewee's actions on the map and asked about what they liked and disliked. Below are my findings for LAPD Crime Mapping:

What it is good at
1/ Authority and effectiveness. Under the brand of LAPD (Los Angeles Police Department), Crime Mapping is the first place where people want to know about the latest neighborhood crime data.
2/ The pin feature. It drops pins on the map based on crime types which help people to understand the crime situation in their neighborhood.
3/ The filter feature. It is easy for users to navigate and focus on the information they need.

What it needs to improve
1/ Visual design. Its outdated and dazzling visual design decrease the map's usability.
2/ Understandability. People who do not know about the crime may find it hard to understand the data.

Our opportunity
There might be room for an interactive crime map built on the latest data and with clean and simple design as well as understandable graphs and texts.

Key Experiences

Identification

ME

Collaborate with another UI designer and engineers to build the key experiences on our first prototype after clarifying the design objectives.

1/
Address search box

2/
Crime rate indicator

3/
Pop-up Data information box

4/
dropdown customize box

ME

Designed the user journey and collaborated with engineers to build the map site based on the design team's Sketch files.

Prototypes

Research & Analysis

Product

Testing

ME

Continuously conduct user interviews, online surveys, and usability testings. Until now, I have already made six in-person interviews, launched three Amazon Mechanical Turk surveys, and organized one group product testing with 18 participants (see the image above.)

After researches, I collaborated with engineers, delivering feedbacks on Pivotal Tracker and redesigning features to improve the user experience.

takeaways

Crime rate indicator

50% of survey participants indicated that they didn't understand neither the color different nor what the "higher" and "lower" mean.

before

After

Black areas

Almost all interviewees expressed their confusion about the black areas on the map and that it was hard to find the explanation.

After

Share button

62% of survey participants indicated that they didn't recognize the share button.

before

After

search box

During the group product testing, I noticed that half of the participants didn't realize that they can use the search box to locate an address. It reflected that the previous design of the search box was ineffective.

before

After

future takeaways will be updated

Reflection

MEANINGS

This is my first team project in which I took the role of the UX designer. I was able to manage various products and collaborated with other stakeholders, including the product manager, designers, engineers, news reporters, and marketers.

During the project, I learned how to continuously collect user feedbacks and became familiar with writing user stories.

CHALLENGES

My biggest challenge was to think about solutions that could not only solve users' problems elegantly but also be interpreted by engineers.

After the basic learning of HTML and material design, I became much better at communicating with engineers.

CONTACT ME
M
E
N
U