Wireframe Prototype

Interactive Wireframe Prototype

We were able to use this low-fidelity prototype to walk a new user through a scenario in which they would use our system. We considered the overall flow and the risky interactions before we ran user tests and received feedback.

Design Rationale

Design Direction

We chose a design direction that merged the three different designs that we came up with. While we thought the design with icons (design 2) looked very interactive and fun for the user to engage with, we also realized, through feedback we received, that some screens looked more cluttered than the other design directions we had. We decided that faded photographs won’t be as exciting and interactive as the icons. The icons also reflect the essence of games and keep the design refreshing and fun!

Home Page

We wanted to keep the homepage very simple! We created three circular icons that give the user the option to play games, participate in real-time activities or “konnect” (schedule a hangout for later). We decided to include the logo on the homescreen to maintain symmetry and also to serve as branding. We decided to use a navigation bar at the bottom of the screen like many other mobile applications to maintain external consistency and provide an easy way to reach some of the most used pages. Previously, there was only a profile, home, and settings button. We added a notification and search button to the menu bar to encourage navigation efficiency. Notifications keep the user informed about their invites while the search page (from design 1) allows the user to easily search for a game or activity and also quickly find their top games, activities and most “frequently konnected” friends.

Games and Activities Array Pages

In the icon-based design, the array of games or activities in the icon design looked slightly cluttered and would not be the most efficient to find what you want to play or do. We edited these pages to look like a mix of design 1 and 2, with games displayed through icons inside rectangle boxes to better organize the layout. We also wanted to make the experience as satisfactory as possible for the user and decided to expand on design 3’s idea of dividing the games screen into different groups, such as popular today, for you, and new games. The bottom navigation bar from design 1 and 2 remains on these pages.

Scheduling Pages

We decided to create an entirely new design for the schedule page, integrating different aspects from all three designs. Taking design 1’s idea of displaying time zones for friends, design 2’s time pitcher and calendar (to choose time and date quickly), and design 3’s ability to display if users are online, we were able to come up with an improved overall design for the screen that made the experience more efficient, satisfactory, and learnable for users. We also used the idea to include “frequently konnected” friends from design 1 on the scheduling pages to make it easy for the user to identify their most common selections.