APP Design / case study

blueline

problem Solution Competitor Audit Site Map User flow Wireframing Hi-fidelity Wireframe Usability Testing Insights & Revision Style guide Prototype
toolbox
Figma
Adobe Illustrator
Adobe Photoshop
prototyping
Employer
School Project
My Role
Product Designer
When
Jan, 2023

tARGET Problem

The trust between citizens and law enforcement, specifically the Police Department, is eroding.

sOLUTION

Blueline, an App is actively engaged in fostering a heightened level of integrated communication between law enforcement agencies and the public, with the ultimate goal of enhancing community safety and promoting mutual trust and understanding. A list of feature includes: File a report, submit a tip, language support, check report status, victim assistance, anonymous features etc.

Tracking a report
File a police report
Add a follow-up report

competitor audit

By examining 51 related products from various perspectives, which encompass 5 similar products originating from distinct market domains, we have conducted a comprehensive analysis. We assessed these products using a range of criteria, including SWOT analysis, key features, user interface (UI) and user experience (UX) design, value proposition, market strategy, and accomplishments. In this presentation, we have selected the top three identical applications as illustrative examples to demonstrate our competitor audit process. If you wish to explore further details, please don't hesitate to access the organized Google Sheet for more insights.

View Competitor on Google Sheet

site map

user flow

wireflow

Wireflow: wireframe-style user flow

Wireframing

Sketching is a powerful tool that helps visualize my ideas, communicate concepts, and bring the imagination to life.

High fidelity wireframe

By researching pain points of potential users and to provide solutions that I could visualize,
I established a preliminary blueprint

usability testing

It's time for users to test the first version of my design

some highlighted from user journey

I captured the essential screenshots from the whole user journey

Insights & revision

In the process of product testing, I received some suggestions and modifications from the active users, which much helped my design ideas. Want to see what I improved?
please scroll down.

Revision 01

Icon "arrow" gives the user a confusion
Using the text "Next" instead of icon "arrow"
Sign in every time makes the user feel annoying
Set a "keep signed" function
Give more contrast on the emergency call
Emergency call is not easy for the user to see

Revision 02

User can’t see who reviewed their case
Add the police officers name on  progress
Users can't send a PDF to an insurance company
Add “dots” icon to give more options to users
Emergency call is not stand out for user to see
Give more contrast on emergency call

Revision 03

Users don’t know how to get their case number
when they forget.
Add an extra line " Don't have the case number ? "
to retrieve the case number in case the user forgets.

user testing round 2

I revised my concept and conducted the second round of user testing

Rae
“It’s a big improvement from last time!”
“I like its fluency, and I can report a case very quickly !’’
Vincent
Ove
“I’m looking forward to the final version!
I would use this App for sure!”
“ These icons are very engaging! I just can’t
wait to tap on them ~”
Serena
Police Officer
“ The report progress flow very much mirrors real-life situations.”
— Officer D_______ (name withheld by anonymity request)

Style guide

Color
White
Black

logo

DESIGN SYSTEM

We are ready to show you the third chapter of Blueline, a design system I developed. a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different page or cross functional teams.

components

Tracking a report
File a police report
Add a follow-up report
Try   Prototype