top of page

PROTOTYPE

Building a Solution for Radio Hosts

OVERVIEW

In the prototype phase, we took our design ideas and developed them into a paper prototype that would eventually become a high-fidelity mock-up of INTUNE. In between these two steps, the team completed a quick evaluation of the paper prototype in order to make iterations on the project and completed annotated wireframes of the entire system. Prototyping allowed us to test the usability of our application and actualize it.

Paper Prototype

Drafting Our Design

We used the page hierarchy of our information architecture to develop the paper prototype. Each page in our information architecture became a screen in our paper prototype and also included various pop-up windows. The INTUNE paper prototype focused on the completion of three core tasks: replying to a listener’s text message and pinning it, adding and deleting a new show recording to the archive, and adding and editing a new public event to the events calendar. We created these low fidelity prototypes to identify early problems with the design and navigation of the application. To further identify these problems, we user tested the paper prototype based on the three core tasks and recorded our quick evaluation findings.

Paper Prototype

Takeaways​​

  • The navigation bar should be at the top of the screen

  • Pullouts had to perform different tasks on the different pages

  • "Upload Show" had to be a separate page instead of a pop-up

Paper Prototype Samples

Quick Evaluations

Testing Our Design

The paper prototype was used to conduct a simple usability study with three participants. This study was conducted in order to test and evaluate the preliminary design of INTUNE. The participants were asked to complete the three tasks identified in the previous step. We conducted user testing to get feedback on our designs in order to improve clarity and eliminate unnecessary functions. The suggestions from the users and our observations were used to make modifications to INTUNE’s design when transferring the paper prototype into wireframes in the next step. 

Quick Evaluations

Takeaways​

  • Pin button was unclear and missing on the live messages page

  • More differentiation was needed between live and threaded messages 

  • Functions of big buttons were clear to users

Annotated Wireframes

Refining Our Design

Using the paper prototypes as a model and the feedback from the quick evaluations, we created annotated wireframes of INTUNE. The annotated wireframes outlined the application's visual design elements such as layout, grid, and font choice. They helped the team visualize what the final version of INTUNE would look like and what changes still needed to be made. The wireframes were a barebones skeleton of the application that served as a blueprint for our high-fidelity mock-ups in the next step.

Annotated Wireframes

Takeaways​​

  • The back-to-top buttons looked like upload buttons and needed to be changed

  • Search, pin, edit, and delete icons were necessary for clarity

  • Pullout symbol was misleading and needed differentiation on different screens

Hi-Fi Mock-Ups

Wireframe Samples

High-Fidelity Mock-Ups

Finalizing Our Design

We chose several key screens from our wireframes and translated them into high-fidelity mock-ups. These screens represented the core functionalities of INTUNE: the homepage, events calendar, and messaging system. In this process, we created the INTUNE logo and solidified the brand identity. We created high-fidelity mock-ups to show the first fully developed version of the application and to see what it would look like in the users' working environment. We went through a few iterations of our high-fidelity mock-ups and eventually chose a design that not only looked nice, but would be functional for a user using this application for a long period of time. 

Takeaways​

  • Color scheme was changed to include only one accent color after feedback

  • Accent color was used to indicate interactive components

  • Darker color scheme was easier on the eyes, but lighter background made the application more elegant

  • We optimized screen space by combining threaded and live messages onto one screen

High-Fidelity Mock-Up Samples

bottom of page