Introduction
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. With the article, I would like to go over the entire process and conclude some takeaways from this project.
1. Need finding / Contextual Inquiry
Based on my personal experience, 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 and 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 main breakdown here is wasting too much time to organize the information, and some websites might be useful in a certain timeframe, and after that time period, it should be removed automatically.
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. The breakdown, in this case, is how to organize information.
The observation and contextual inquiry session help me identify the problem in the real world, so now I need to clear up and conclude the goal of the app.
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. So there is a need for such a tool helps people organize all types of information from different sources in seconds and offer people a simple way to review information in a well-organized way and also allow people to search within the results and share with others.
3. 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. Besides the website, sometimes user also could find something useful in a newspaper or a book, but couldn’t find it later on. With the app”spark”, the goal is to scan and record the key information from all kind of sources in seconds.
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. But it’s annoying to keep sharing an item per time. 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.
4. Paper Prototype
5. Heuristic Evaluation — First Iteration
For the paper prototype I create a few key screens and right after I shared it publicly, 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.
6. Wireframes
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, which is popularly used in lots of app on the market, I believe it’s more user-friendly to keep the style similar as the app users are using.
7. Create Hi-fi Prototype — first version
8. In-person User Test — Second Iteration
I conduct an in-person test by asking participants to do couple tasks that cover all main feature of the spark app. During the process, I record how they interact with the app by taking photos and making notes. And below are follow-up questions:
1 ) What part of the app do you like and why?
S: The layout is clean and looks aesthetic, I like the board card view, it makes the article well organized.
P: It’s very well designed and almost like an app on the market. I like the shoot, save and read process.
2 ) What part of the app do you dislike and why?
S: There are couple problems with using the app. I think the flow is weird, I don’t really get the idea of the build, I think it should be combined into the other two tabs. Like when I’m trying to create a new board, I actually want to create in the view board tab. Another thing is I don’t think I can select my Facebook friends through the app, if these buttons work like sharing publicly, you’d better separate them to another place.
P: I do think all of the text is very small, so it’s hard to read, especially in the read article state. I’m also not sure how to delete a board, will the articles in that board be deleted as well or just the board itself, if not, then where will these articles go? You don’t include that in the prototype, I know it’s not final deliverables, but it’s better to make that clear.
3 ) You spend some time to figure out how to share with friends, is that any problem you met?
S: The share icon is more like “send” I’m hesitating whether it is a share or not and on the next screen, I think that I can tap on existing email address and share, but it doesn’t work.
Planned Changes Based on Test:
1. Adjust text font size to make it easy to read
2. Change the build tab to articles tab, and combine the build action in other two tabs
3. Update share icon
4. Adjust the location of social app share icons
5. Make sure to allow users to delete articles and board separately
6. Finalized all interactions between pages
7. Fix some wording problem
9. Update Hi-fi Prototype — second version
10. Online A/B Test — Third Iteration
A/B Test Process:
1. Sign up an account on UserTesting
2. 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)
3. Set up updated prototype as version B, recruit another 2 participants to use the app and do the assigned tasks. (Since I launched version A test two days ahead of version B, so according to the feedback, I adjusted 2 questions)
4. Receive results from all 4 participants and go through 4 videos and make notes of their activities
5. 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.
I have some experience with usability testing previously, but this is the first time to conduct the test remotely online and I don’t have the chance to talk to the users. Different from in-person test, it reveals more usability problem then expected, some broken links or not clear wording will make the users stuck in the process, and I cannot help them out. You can not imagine all possibilities that how users interact with your app, so for a testing prototype, designers should reduce all unnecessary options but make sure all buttons and links on the screen work, if a user tries to leave the page before saving something, designer should give him a popup message, instead of make the back/close button invalid (I tried to make button grey out when invalid, but it seems some of the user won’t get the idea, popup message will help a lot)
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
11. Final Hi-fi Prototype — third version
Please find live prototype at: https://invis.io/7RDS2QST3
12. Visual Deliverables
I have been working as a UX designer for more than 3 years. Before I switched the role from a graphic designer to a UX designer, I only took two courses and learned a few research methods and yep, that’s everything. When you are in a working environment for some time, you will be blind by works by hand. So I find it’s tremendously helpful to take courses like this Interaction Design by Coursera, with which you can jump between industry and academic and test what method is crucial and what is never be used in real world.
In this project, I use one contextual study, one heuristic evaluation session, one in-person user test and one online user test to make sure the product design and iteration is on the right track, but the fact is, many companies, especially for some startup with limited budget and short release circle, cannot support these investment of money and time, I was doubt about the academic way to improve a product at a time, but through this capstone, with the data from A/B test, I would say there’s no shortcut for a good product.
Cheers!