Keane Riley
LinkChat is an app I helped design with a team of two other classmates for HCDE 318: Introduction to User Centered Design. The focus of our app is to increase commuters' sense of community by facilitating conversation. To do this, our app has four main content sections with chat rooms for each so that riders will have common topics to discuss.
Through this class, I learned the methods of user centered design and this project allowed me to use concepts like design principles and patterns, metaphors and idioms, and product postures. Since I was working on a team, I also improved my communication and collaborative skills. Finally, I was familiarized with useful tools for designing interactions, such as POP (Prototyping on Paper) and Axure.
A complete portfolio of all deliverables from all team members can be found at linkchat.weebly.com.
This project had three main phases: preparation, design, and implementation. During preparation, we each did individual user research as well as some research as a group. The findings were used to create personas, scenarios, and story boards. The storyboards I created are shown to the right.
Each of the deliverables made during the preparation phase were designed to help us focus in on our user's and their needs. As we moved into the design phase, we repeatedly referenced these artifacts to guide our decisions and keep our sights on the users and their needs.
My storyboards depicting how I thought our app could be used. Click to enlarge.
The next phase was designing the actual app. We started by producing 10 sketches individually then presented them to each other and moved forward with our top 3 ideas. With those ideas we sketched some more ideas until we came up with what was a skeleton of finished product.
After finalizing what our app would be and getting a rough idea of what it would look like, we created a sitemap of all the pages it would contain. This visualized the arrangment of data in our app and how pages connected to facilitate navigation.
My initial sketches and our finalized sitemap. Click to enlarge.
The last phase was implementing our design. We started by creating a paper prototype using sketches and the POP prototyping app. Then we took our interactive prototype out to get user feedback around the UW campus. Each team member implemented changes and iterated through this process a few times.
Once we were satsified with our paper prototype, we created a exhaustive annotated wireframe. The layout of the pages was directly influenced by the prototyping we did and guided our final high fidelity mockup.
The culmination of our quarter-long work was the high fidelity mockup. While the actual assignment for this was canceled last minute in favor of a more overarching assignment, one of members, Tsuki, had done some initial work and decided to finish polishing what he had done so we could include it in our final portfolio.
Our paper prototype sketches. We decided to only prototype one section of content since each other section would have similar layouts. Click to enlarge.
Some of the pages in our annotated wireframe that I made. Click to enlarge.
The high fidelity mockups done by Tsuki. Click to enlarge.