Interaction Design Specialization: dailyHub — collaboration and communication in a glance
I enrolled in an 8-course certification program in Interaction Design offered by the University of California, San Diego on Coursera. The capstone project required me to choose a design brief and design a mobile app based on its requirements.
Design Brief: Using the process of design thinking, find the problems in one of the three briefs (Time, Change & Glance) to design a solution around it. Walk through the structured steps designed for this project course to come up with the design for your product — go through needfinding, ideation and paper prototyping to design as many creative solutions possible. Then turn those ideas into one concrete design with the help of Heuristic Evaluations. Test your application prototype, get feedback, iterate and test to keep on improving your designs. After all the refinements, demonstrate your final product design and document your process.
Mission: Glance - Find people and design a personal dashboard tailored to their needs.
Needfinding and Ideation
The first step for the designing process was the needfinding and the ideation where I had to choose ideas around specific opportunities.
I chose to be a part of the ‘Remix Project’ wherein the students gets to work off from the contributions from their peers and extend and build on it to create remixed versions for the next stage of the design process.
As part of the ‘Remix Project’, the ideation that I chose was ‘Glanceable Collaboration in a Shared Household’. The point of view that this ideation entailed was:
“Shared living would be much more convivial, if communication and collaboration were seamless. Every click is an obstacle, this communication should be available at a glance.”
This idea focuses on the needs of individuals residing in a shared household. Thanks to my peer, Christopher Griffin, for his ideation topic which I used as an inspiration and the basis for my design.
How many of us are living or have lived in a shared household with friends or family. We have all come across situations where we have had to share chores, or remind each other about shopping lists or inform each other the plans for the evening and how many times have we have either forgot to remember them or had to use numerous aids (post-its, notes, reminders on phones etc.) to help us keep a track of it, only to misplace them later. The concept for this design stems from this need — a one-stop place to record, view and track all information that a person in a shared household would normally need and the communication and the collaboration it affords comes with minimal clicking and tapping than it normally would necessitate. In summary, information of a shared household — chores, calendar, messages, and even weather and the latest news headlines — in a glance!
Storyboards and Paper Prototypes
Storyboards allow you to create different design ideas for the chosen point of view to address a user need. I attempted to build them based on this point of view where communication between people in a household are more streamlined and effective. The storyboards I created centered around two of following scenarios in a shared household:
- User is unsure of her chores and needs to track them
- User needs to check with his housemates about their calendar event and communicate with them
Paper prototypes are hand-drawn sketches of the design and allows for rapid ideations. I used them to connect to the point of views which were specified in the storyboards.
Prototype 1 instantiates the first storyboard and shows the following steps a user would perform:
- Logging into the homepage
- Viewing tasks
- Assigning a new task for a future date
Prototype 2a and 2b is based on the second storyboard and shows the steps a user would complete in order to view the calendar events and message the other members of the household. These include:
- Logging into the app and selecting the Calendar
- Viewing calendar events (individual and group)
- Selecting Message and messaging the other members
Heuristic Evaluation
Continuing the design process, heuristic evaluations were conducted on the app using Nielsen’s 10 Usability Heuristics. I conducted walkthroughs with the paper prototypes to ensure all the components were in sync and the prototype was able to run smoothly and attempted to remove dead ends and confusing steps. Then the following types of evaluations were run:
- In-person evaluation: Where a person was observed while interacting with the prototype and the resulting feedback incorporated into the consequent version of the prototype.
- Online peer evaluation: Where a peer was allowed to interact with the prototype and the heuristic violations (violation type and their rating) were documented. Though Google Hangouts was suggested, due to time constraints, I used POP prototyping to share my paper prototypes with my peer. Thanks to my peers — Erika Presson, Jennifer Carden and Arvind Kumar Agarwal — for their evaluations and feedback.
The resulting evaluations were compiled and were winnowed down to a concise list of changes that would need to be made in the design. The violations were either remedied and incorporated into the existing design or were archived to be incorporated into the future versions.
A development plan was also drawn up where I included key milestones, their tentative timelines and the effort estimated for each of the them.
Wireframes
In the next step of the designing process, the prototypes were converted to wireframes that showed the basic UI elements, navigation in screens, hierarchy of information and allowed user interactions.
Our instructions required us to use Invision or other similar prototyping tools. After considering some of the tools available, I choose Axure RP for the flexibility and the versatility it offered.
I had to create a prototype, though not completely refined at this point, which needed to be completely functional and ready for user testing, while also ensuring that:
- Information architecture of the prototype aligned with the mobile form factor
- Mental models for mobile user interaction were supported
- Prototype worked on mobile devices and simulated mobile devices
The prototype was created with the following functionalities:
- Creating tasks: Users can login and navigate to the Task page where they can view the list of tasks assigned to the members of the household. They can also create a new task and assign to another member.
- Creating calendar events: Users can navigate to the Calendar page and view the calendar activities on a day, week, and monthly basis. They can also create a new event which includes another member of the household.
- Messaging: Users can navigate to the Message page and view the messages exchanged between the members.
Prototype Testing
In this step, the prototype was made ready to undergo a user testing. For this stage, a usability testing protocol was drawn up which outlined the preparation and setup, steps to execute the test and instructions and questions that would be provided to the participants. Users were asked to sign consent forms and observed while they interacted with the prototypes.
The following changes were planned based on the testing:
- Redesigning of the home page because the current home page looked overwhelming to the user. Using icons and realignment of the text should simplify the look and feel of the interface.
- Better use of labels for text fields to avoid confusion and provide clearer understanding (‘add tags to tasks’ rather than ‘add tags’)
- Including a link to the Getting Started page from home page instead of including it under the options in the hamburger menu, where it had the tendency of being overlooked.
- Removing the ‘Welcome Jane Doe’ page after the login page since it looked redundant, instead have it combined with the login page.
- Include bottom menu bar in the Getting Started and Invite pages to provide better navigation.
- The Create button in the Task screen appears to be lost in all the information displayed. The Create option should be redesigned to have the option readily available.
- In the Messages functionality, clicking on Messages takes the user directly to the chat window. There should be another page before that which lists the participants of the chat and also any other people that have been added.
A/B Testing
I conducted the A/B test with UserTesting.com, a user research platform in which online testers evaluated the app by completing tasks that designer outlines. Their subsequent comments and interactions were recorded as they tested the prototype.
For the A/B testing, I wanted to test the app on how the users were able to navigate around the app, create a task, and view the options to sort the task lists. The main feature that was tested in the A/B testing was the ‘Create New Task’ option. Two users got the Interface A where the create icon was a plus sign in the top menu. The other two users got Interface B where the create icon was a plus sign at the bottom of the page.
The task given was to create a new chore for the household. Users had to click the ‘Create New Task’ icon and create a new chore and assign it to a member of the household.
After the A/B testing, the following revisions were made:
- Retain the Interface B design where the ‘Create Tasks’ had the Add button as a plus sign at the bottom of the page because users found that interface easier and more intuitive.
- Remove the list of ‘Completed tasks’ from the Task homepage because it should essentially only list to-dos and users weren’t concerned with what they already completed.
- In the Sort option of the tasks, remove the Date of Creation and Creator name because these options were thought to be unnecessary by three of the users. The Sort option also now has sort by Name.
- Remove the hide/show option in the Task homepage. All the information were not required, retain only whats required. So, Created By, Created date and time were all removed.
- List all the to-dos with the Day as well as the date and year (eg: Monday, 12 October, 2016)
- Improve the look and feel of the homepage since it looked too cluttered with all the preview information. To ensure consistency and minimalism, all preview information were removed and only the ‘number’ of updates listed.
Final product
This specialization has been a learning experience and each of the assignments required me to apply the principles and concepts that were taught over the course of the specialization which I found to be very useful. Though challenging at times due to time constraints, it was gratifying to see how ideas progressed to wireframes to prototypes and to final designs. Thanks to everyone who made this possible.
Here are the links to the final product:
URL of the prototype: http://x4mq46.axshare.com/#c=2
URL of the explainer video: https://youtu.be/j-ZIVbCMOVI
