Prototyping

After analyzing the usability study results, we wanted to totally reimagine the design of our system. We created a final prototype plan that consisted of an app redesign, physical hex hardware, and a new concept video to help explain the idea. This plan would remedy several of the critical usability issues that caused navigation and language confusion, while adding a few new features that make users’ lives easier.

App Redesign

First, we wanted to tackle the cognitive issues that stemmed from navigation and decision fatigue. The swipe down menu gesture was replaced with a standard horizontal swipe navigation system that was familiar to both IOS and Android users. We added back and home buttons in order to visually communicate navigation choices. The home menu layout was altered in order to give hierarchy to the different options. Finally, a new “create” button was added to the home screen in order to allow users to quickly create and update their information.

Second, we addressed the language and dashboard usability issues. The term “view” was removed in favor of iconography, which better communicated the option’s function. The dashboard was renamed as the “Hub”, a term that most of our users were familiar with. Lastly, the newly renamed Hub was split into two separate pages to reduce the amount of information on the page and to help users quickly navigate to the information they want. Now, the Hub is split into an “insights” page and an “AI” page.

Lastly, we gave the entire app a visual design makeover. The new version introduces a darker color palette that synchronizes with the physical hex design and is easier on the eyes. We used the Avenir typeface to improve readability and give the interface a modern, humanistic feel. Finally, the hex view screen was remodeled to become a “hex map” that shows users a macroscopic view of all of their hexes on a grid. The map is interactive, so users can pan and zoom between groups or single hexes.

Physical Hex Hardware

As tangibility is such a critical aspect of the solution, we wanted to include physical devices in our next prototype iteration. The hexagons were designed to be interactive and operate in real-time, communicating with the app prototype to give users a real feel of how the entire ecosystem would function.

Our first step was to design the outer shell of the hexagons. Since we had to pack a large amount of electrical components inside of them, the hexagons were sized up to approximately 3.5″ per side. The shell consists of three parts: an upper lid, a lower lid, and a bottom cap.

Inside the shell, a TFT (thin film transistor, i.e., the LCD’s cheap cousin) screen was secured to the top shell. A proximity sensor, which was used to detect other hexagons, was sandwiched between the two shells. The sensor allowed us to implement the physical grouping functionality, which would allow users to add a task to a group by dragging the task to it.

Unfortunately, the app to Arduino communication was not successfully implemented within the time constraints of the project. However, we managed to showcase the functionality by manually piloting the hexagons while users interacted with the app. Here’s a video of the entire system operating:

Concept Video

From our usability testing, we found that many people were confused by our design solution as it was completely novel and outside their comfort zone. To help ease the transition, we created a concept video that would help users grasp the idea behind our solution and understand how to interact with the ecosystem.