Harness: A Productivity Prototype
The final project for my “Interaction in Practice” course at Kent State University was to construct a working prototype of a mobile app. We had to create a mobile app that provides a service, but we were virtually unlimited in terms of project constraints, including budget and technological limitations.
This prompt brought my mind to the idea of productivity app, which are usually designed with a singular focus that is only part of a greater need to manage the many facets of one’s personal or professional life. My idea was to create an app called Harness that combines numerous time and project management techniques — task lists, timers, and mindmapping — into a single app.
Project Timeline
2 months (November 2019 — December 2019)
Project Goal
Create an interactive mobile prototype for a masters-level class
The Overview
The prototype design was broken down into a series of deadlines:
· Project Brief
· Sitemap
· Wireframe Sketches
· Digital Wireframes
· Working Prototype
· Finished Prototype
How I Did It
The first step to conceptualizing Harness was a project brief. It was here that I encountered my first opportunity for improvement. Coming from a background in academia, I am used to constructing long, thorough explanations of my ideas and concepts, building upon previously stated ideas and citing numerous sources. However, a brief is a document designed to give the essential points of a project with no room for overload. I am now focused on adjusting to this way of communication and trying to be succinct while still getting the essential points across.
The sitemaps proved to be a straightforward undertaking. With the basic functions of the app set forth by the brief, it was easy to compartmentalize the app into separate sections . This made the most sense functionally and also provided the opportunity to experiment with communication across the dashboard.
The wireframes, however, were more challenging. Because the screens themselves needed to be laid out, there was much more to consider when designing each one. As a result, I ended up having to adapt the design and give up some features I had listed in the brief. Nevertheless, I faithfully derived the wireframes from the sitemap in a manner I found to be functional and intuitive, and with help from my classmates, was able to refine them into a well-developed series of digital wireframes.
The final step was the construction of the prototype itself. This was the longest and most challenging aspect of the project. I initially ran into problems utilizing InVision due to wireframe size, and so had to switch to Proto.io. After creating a basic navigation format for my wireframe, I rebuilt the app in Proto.io. I encountered several challenges involving creating scrollable interfaces and sub-menu popovers, but I was still able to create a worthwhile prototype that displayed the basics of the app’s functions and settings.
Challenges & Setbacks
The largest challenge of this project was managing the project’s scope. I wanted to build a productivity app that handled as many facets of time and project management as possible; however, as I developed the app, the scale grew by leaps and bounds each time I revisited the app. Eventually, the scope became too large to handle the time and resources I had; moreover, some of the features I wanted to see added, particularly relating to the time tracking features, didn’t work as well as I had hoped on a mobile screen. Therefore, I had to cut those items back.
However, this incident provided a valuable lesson on managing project scope. Oftentimes, the scope of a project can expand quickly and without notice. This can lead to getting in over one’s head and losing the main focus of the project. Having encountered this, I am now much more aware of this and try to manage the scopes of my projects accordingly, allowing for adjustments while keeping focus on the main goal.
The resulting prototype contained 30 screens, including overviews of the app’s primary functions, the settings, and a help center devoted to user onboarding. The app utilizes time tracking, visual mapping, and basic task lists to give users the means to track more complex personal and professional projects. The prototype also shows off “Freefall,” a feature designed to quickly add maps, timers, and notes without having to go too far into the app’s nested navigation. Moreover, interactivity in the prototype allows the user to navigate the app’s functions. Smaller interactions are also used to show interactivity in device syncing, account deletion, changing some settings, etc. Lastly, colors and UI components give the user an idea of how the final app would look.
While there are some features that did not fully translate from Harness’ initial conception to its finished prototype, I learned more than enough to make up for any setbacks I encountered during this exciting and challenging process. For example, I gathered experience using multiple industry standard programs such as InVision and Adobe XD while also gaining substantial experience with Proto.io, a worthwhile alternative that can be integrated into future projects.
Furthermore, by building this prototype from conception to final product, I learned more about the challenges and solutions that come with fast and iterative development, including meeting deadlines, handling unexpected disruptions, and miscommunication. Overall, I overcame these restrictions and ultimately created something I am proud of. Still, I believe that, given more time to research and experiment with other design programs and techniques, I would be able to create something even better.
Building Harness was an incredible and worthwhile experience that has vastly improved my efficacy in the user experience design process and left me eager for the chance to start a new project with what I know now.
