Zone In App
Roles: User Experience Designer, Researcher, Project Manager
Project Type: Group
Timeline: 6 weeks
Tools: Balsamiq, Adobe Illustrator
Task:
Ideate, design and mockup a unique mobile app for Northeastern University students that solves a
real-world problem faced by them.
The Problem:
Students are concerned about their studies and want to commit themselves to it, but they struggle to maintain focus due to on-going distractions caused by their phones. But, technology has blended itself with the learning process and thus it is not possible for students to completely avoid using their phones while managing their studies. Most study apps, either completely block the phone usage or allow only partial access to the phones; both of which end up breaking the flow and thought process of the students.
The Proposal:
We proposed to design a customizable study app that lets students access their study materials and media in a single location, while allowing them to block the key distractors.
Value Derived:
Highly improved time management as all the crucial material can be accessed from one place, and customization fosters better usability and efficiency; thereby maintaining a natural flow to studying.
Process & Solution:
Research: We kicked off the project by conducting user research in and around the campus. We prepared a list of questions and outlined a script for undertaking contextual inquiries in order to understand the student's preferred methods of studying, the different problems they face and their study needs. A quick analysis of the existing study / time management apps was undertaken prior to the research. A total of 8 students were interviewed at different locations like the library, classrooms, and labs. The research was structured to help us gain insights into the different study methods used by various students and also to narrow down the major sources of distraction. We also asked the students to use an existing study / time management app to understand their preferences, issues, and desires.
We compiled our research findings into a single report to amalgamate and highlight various facts and to spot potential trends. Next, we performed in-depth competitive analysis to understand how existing apps catered the user needs arising from the research, and their approach to addressing student's pain points.
Ideation: Our research revealed that every 'study session' undertaken by a student is unique and has its own set of parameters and requirements. We realized that apart from blocking the distractions, our study app had to manage the provision of necessary notifications e.g. study session progress, to the students using our app. Furthermore, just blocking all the apps was not a solution as many students preferred to use apps like calendars, schedulers, music apps, etc to improve the outcome of their study session. Thus, after a few brainstorming sessions, we decided to offer a set of customizable 'modes' which students could set up based on their requirements for that particular study session. In order to build a user persona, we first created a behavioral map. The behavioral map also enabled us chart out similarities and trends between users and their behaviors.
(Behavioral Map: Mapping the behavior of the interviewees)
Wireframing & Testing: Once the persona was created, we planned a rough user flow. Based on that, each group member came up with their approach towards the structure, navigation and flow of the app. After deliberation, the first round of wireframes were designed to incorporate all the proposed features with as much clarity and ease as possible.
Our approach was to undertake a quick usability test without getting into too much design details in the first round. We designed a usability protocol with tasks and exit questions to help better understand the issues in our designs. The aim of the usability testing was to understand the existing navigational issues, frustrations and design incoherence in the architecture and design approach. A total of 8 participants were used for the usability test.
(Wireframes used for usability testing)
Design: The usability test revealed quite a few expected and unexpected flaws in the design which were addressed and improved upon. Based on the feedback, a revised user flow and navigation structure was incorporated to make the app more simpler to use. The taxonomies and labeling of a few features and buttons were also tweaked in the final design. E.g. Although the participants were comfortable with the idea of using different study modes, the term 'mode' itself threw off most participants. Hence, we changed the term 'Mode' to 'Session'. A few structural changes were also incorporated in the layout to enhance screen identification and comprehension. The final design was intended to have a modern UI with a 'young' yet serious look and feel. Our aim was to have a fun and minimalist user interface.
(Final mockups of main Zone In app screens. Click to view full screen.)