My internship at Microsoft Research gave me the opportunity to lead the design efforts on a research project called News Sync.
Before I describe the project I want to thank all the amazing people at Microsoft Research who encouraged, helped and inspired me. I truly believe the best things are achieved together with others and where every one gets to bring something to the table. You all rock!
The purpose of the project was to suggest and envision a new way for exploring news content on the web. Initial research and development of the back-end was already underway. But what was missing was a vision for the front-end design and user experience. It was published as a challenge paper in the HCIR 2010 workshop.News Sync: Introduction
The basic idea of the web application was that news results now are shown in long lists which are hard to filter through. By the use of dynamic clustering and algorithms that find out importance based on indexing metadata and article text we could create a more compelling and new way of searching for news! If 1000 articles were returned from one search, they then got grouped (clustered) into 3-4 collections of articles that ‘belonged’ together. This enabled the user to further pick on group of articles to search on and then zoom in and out of the content in that group using filters on date, keywords and place.
Process
Here follows a quick run through the process. Except for some white boarding, icons (by UX DesignLead Jim St. George) and the sparkline code I was responsible for the creation of all deliverables below.
It started out with near daily meetings as we brainstormed, sketched and iterated upon ideas. One lesson learned here was the more I prepare for presenting my visual vision the less time is have to spend later describing misunderstandings (Tip: Don’t overuse “scribble lines”).
From here wireframes where created with annotations for interactivity to try and better explore and the flow of actions through the interface. Design reviews with members from the UX team were conducted with the wireframes and discussions with the client (researcher) to makes that assumptions of the back-end architecture were correct.
Changes were made after this and we started creating our first mock-up without any functionality. It served as a design check-point and getting additional sign-off and buy in from stakeholders. After which it was used to represent the team in the paper and also as a next step in the design process.
Next on the agenda was development work and enabling the mock-ups with initial functionality. Through out the process, from wireframes to fully functional prototype, we came together for reviews of the current work and making sure the end vision was kept.
The above image shows the transition between the earliest functional prototype to a more mature one where for instance the time is actually more resembles a timeline of articles. From here on out it was a matter of constant development and prioritizing issues as they came by having triage meetings. Next image shows the application, fully functional, as it looked right before usability testing was done.
Evaluation and Testing
Usability testing was done with 5 users (excluding pilot test) using Steve Krug’s methods as a model. Currently the additional screenshots of the UI after implementing the most important feedback from users are all unavailable (except a partial one a the end).
During the development phase I got to interact with Bill Buxton as he came by my office, on invitation of course, and not surprisingly the feedback he provided us with was very close to one of the main hindrances users expressed during testing. It was the fact that we had created an artifact that primarily serves a research and searching style. This meant that users needed to have some mechanism for synthesizing article texts or saving list of bookmarks relevant to different topics that they wanted to know about. Currently they can only open an article, read it and that is that! Hopefully coming versions will take this into account.
Other functionality that was implemented, included highlighting the search text in the results and article pages so as to help with scan-ability and moving filtering icons closer to the action of where users activated the filters (tag clouds and sparkline). A small preview of that final UI:
This project has taught me a lot and my appreciation for the opportunity to work with all the talented professionals at MSR is great. If you have actually read this far, thank you, and I hope it gave you ideas or inspiration.