HF banner


OVERVIEW

– Oct.2015

– Mobile App Design

– Project completed in 18 hours

Winner of the Seattle Facebook Student Hackathon 2015 Fall

Qualifying work for 2015 Facebook Global Hackathon Finals

CONTRIBUTION

– Led design

– Identified user flows

– Designed wireframes and prototype

TEAM

– Jenny Wu

– Xuan Liu

– Zoe Xiong


This is a story composed of many of my “first time”. I completed my first UX work in my first try at Hackathon with my first design collaboration and won the first place at the challenge, earning a finalist spot in the Facebook Global Hackathon 2015. Reflecting on that amazing experience, I think it was the belief of Embrace challenges, Dare to do, and Learn by doing that encouraged me to make it happen!

EMBRACE CHALLENGES

Hackathon is an event that brings developers, designers and PMs together to collaborate intensively overnight to realize a “wow” idea. From the first time I heard of hackathon, I had been wondering what could I achieve in such an all-night session. Although at that time I was neither expert in design or development, I went for the Facebook Seattle Student Hackathon without hesitation. What was waiting for me? Admittedly, a bit of fear of unknown. But what far outweighed that was the excitement to do what I love the most: embrace ambiguity, collaborate with talents, test my limitations, and explore my potentials.

DARE TO DO

The hackathon started with pressure. All time given was 18 hours, from the first moment we participants met each other, to present the final project. I didn’t bring a team but came with my friend Zoe. As many participants didn’t know each other before, the first challenge came when we wanted to form a team. After spending a couple of hours on chatting and proposing ideas, we found it hard to achieve consensus and get someone whose skills complements ours’ to form a team. Some gave up, but we kept on. I consider a hackathon an incubator for amazing ideas, so no matter how competitive our team is and how far we can go during the overnight-session, just contribute as much as we can to realize the idea. During the pitch session, the idea from Jenny caught my eyes.

Catch the probelm

Jenny proposed an idea based on her experience dealing with out-of-network health care when moving from New York to Seattle. When in a new place, it’s difficult to understand the difference between a hospital emergency room and a flat-rate clinic with traditional searches. As the cost and services available depend on a lot on where you choose to go, it is necessary to know the differences when you search for hospitals. For example, Jenny once searched and went to a nearby hospital for an emergency. But without an in-network insurance, she finally got a $3000 bill for only visiting an advising nurse. By reaching out to locals for help, she luckily knew that she could apply for a health care program to cover the most of her bill. So, how to find an affordable and quality hospital when someone’ health care is out-of-network? How can the information of health care programs be more feasible when someone is searching for hospitals? She wanted to create a way to solve those problems.

Zoe and I joined Jenny to work as a team of three: Jenny was more like a project manager who brought and pitched the idea; Zoe and I were designers to create solutions and interactions. The second challenge followed immediately. It was uncommon that we had no experienced developer in a hackathon team. But it couldn’t be the excuse for giving up. I believe what important in a hackathon is not only to write as many lines of code as one can overnight but to elaborate and present the cool idea and bring something new in the end.

LEARN BY DOING

Here was the topic, but how to start? At that time I just stepped into the world of UX with my first UX course at UW — the User centered design. Although I was a novice in UX, I tried to apply the UCD process in this hackathon project. I believe the most efficient and effective way to learn is learning by doing. Therefore, my first UX work got started.

HF_Photo_WitheBoard

Photo of iterating user flows and  wireframes.

thumb_IMG_1545_1024Photo of designing interface.

Research

First, to get a better understanding of Jenny’s idea, I structured the problem with inquiries, quick research, and discussion. For inquiries, since Jenny proposed this idea, I treated Jenny as a “client” and asked more about her experiences to know her pain-points and needs. Also, since it was not wise to develop an application just for a teammate, we searched online about the out-of-network health care and the condition of people without insurance.

Design

Based on that, I led discussion to identify target users to clarify our scope, ideate functions and features to meet users’ needs and ease frictions, and iterate user flows to organize every step. When functions and flows were finalized, Zoe and I moved to design wireframes on withe board to incorporate each piece of work. Finally, Zoe and I created hi-fidelity user interface with Sketch, Illustrator, and Photoshop, and I generated the interactive prototype with inVision to demonstrate the flow more intuitively.

Iteration

The whole process was iterative, bringing about the third challenge — articulating decisions in a team. Only by getting support from the whole team can one idea grow up. However, something that was explicit to designers could be hard to understand by others, which required much effort, patience, and empathy in communication. For example, Zoe and I were learning UX at school, but Jenny had no UX background. We got a divergence when deciding how to develop our idea. It reminded me of the User centered design process I learned from class. So I insisted on utilizing UCD process and explained my decision with what I learned to make my points more reasonable and compelling. It was challenging but rewarding to explain the design to others. Because by doing so, I not only refreshed my understanding of design but got new perspectives in critiques.

Solutions

We designed a hospital search and review system that focuses on affordability and quality. It is a mobile application that uses search or GPS to locate nearby healthcare services.

HF-gif-01

It is a mobile application that uses search or GPS to locate nearby healthcare services.

The filter function helps users to decide the right place by choosing time availability, distance and cost considerations, customers reviews, and featured programs for out-of-network coverages.

HF-gif-02

HF-gif-03

The sorting function is available on the result page to sort results by price, distance, and rating.

Also, users can bookmark interested hospitals and review all bookmarked ones with sorting function in the bookmark page. Besides, the history function is available to see the review history.

HF-gif-04

Mockups

Home screen with tooltip pops up
Home screen with tooltip pops up
Filter screen
Filter screen to specify requirements
Bookmark screen (similar as the tabs of search result and history views)
Detail screen with the info of the selected hospital