This is a capstone project of Coursera HCI Specialization program, I’m asked to generate an idea to solve a problem in the real world and finally provide polished deliverables in the timeframe of ten-weeks. 

Product Intro video:  https://youtu.be/f9FB1ImmTSw

1. Need finding / Contextual Inquiry

Every day I browse through tons of news, blogs, and articles during lunch time and commute to work. The problem I meet is there’s no good way to organize all of the information, which may cause two results:

• miss something important.  
• clutter too much unnecessary weblink in a bookmark folder.

I would like to know How do people view and save useful information and see if there’s any chance to improve the experience. I asked my friends to join an observation and interview session.

Before the first user use starts daily work, she likes to check these interesting works to get some inspiration. But her habits to leave all tabs make the browser super cluttered.

The second user is very organized with useful information. On the smartphone, he uses the app called Pocket to save the page he interested in, and he uses bookmarks on the laptop.

The third user also uses bookmarks to save the website that useful, but only for the thing related to work. For the other things she finds during random browsing, say an interesting discussion on a forum, a pretty art craft, she uses to copy the link and save it in a notebook like Evernote.

2. Ideation

There are different kinds of ways to collect information, we save sites on the browser, save documents on the computer, save favorites in some app, however, these infos are all separated, next time, when you want to find something that you’ve read before, but hardly can you remember where is it. My ideation is creating a tool that helps people to manage information from different places and allow them to review, save and share.

3. Breakdown User Needs

4. Storyboard

Once I have a clear goal about what to do, I started with storyboard to see some potential user case.

First scenario: A user is browsing the internet but interrupted by other errands, he has to save the site for reading it later. Sometimes a user might forget where did he save after couple days. 

Second scenario: Two friends plan to have a trip together, and they need to share the information like confirmation of flight tickets, confirmation of car rental, maps, trip plans and so on. The app would offer a solution that allows users to collect information based on the event and share the collection with friends as one board.

5. Paper Prototype

6. Heuristic Evaluation - 1st iteration  

I collected feedbacks from peers of the course and some students of UCSD, it’s valuable to get feedbacks at the early stage, so that I can fix some easy peasy problem immediately and spend more time to think through these tough ones before I move to next step.

7. Wireframes of Key Screens

The landing page of the Spark is a camera state to capture key info (web link, title and highlighted part words on the screen). The function of prototype2 will be realized in view board section. The setting/account icon hides in the menu icon on the left corner.

8. Create Hi-fi Mockups - version 1.0

9. In-person User Testing - 2nd iteration

10. Update Hi-fi Mockups - version 2.0

11. Online A/B Test - 3rd iteration

A/B Test Process:

1. Set up the original prototype as version A, recruit 2 participants to use the app and do the assigned tasks. (tasks are listed in the diagram below)
2. Set up updated prototype as version B, recruit another 2 participants to use the app and do the assigned tasks. 
3. Receive results from all 4 participants and go through 4 videos and make notes of their activities
4. Gather demographic information and analyze feedbacks

Based on the recored video, I collect the data from all participants, in order to figure out which version works better and what part need to improve for revision.

List of Potential Revisions:

1. Reduce some options (ie.share page) and make sure all links and buttons are valid
2. For these invalid/gray out buttons, a pop-up message will show up and let user know what is going on
3. Make the board title has the ability to tap on and show board information
4. Make the create a new board thumbnail more noticeable

12. Finalize Hi-fi Mockups - version 3.0

Live prototype:  https://invis.io/7RDS2QST3

13. Visual Deliverables

14. Project Development Plan