Stay Connected

Team Member/Designer/Programmer

Timeline

Jan 2019 - Mar 2019

Process

User observations, paper prototyping, iterative digital prototyping, user testing

Team

Three fellow classmates

Tools

Adobe Xd, Adobe Illustrator, HTML, CSS, Javascript

Problem Statement

We were assigned the following prompt for our coding and design assignment. We put it in our own words below:

The goal of our project is to remind and help users schedule plans with their friends more often in order to help reduce their behaviors of forgetting to meet up. By making time to meet their friends, students will be able to relieve stress, prevent loneliness and isolation, and continue to maintain and develop quality connections they have made with others previously. Obstacles include the difficulty of finding matching free time slots in each user’s respective schedule, remembering to reach out to friends in the first place, and having the motivation to go through with plans once they’ve been made.

User Personas

Paper Prototype

Our first draft of the user focused design was created by making a paper prototype. This was a super low fidelity mock up that we tested with users to see right away what their reactions were to Stay Connected. We gained valuable feedback from our users before we even coded anything, which was helpful to not have wasted work.

  • We could make it more clear which aspects of the website are interactive.

  • Have feedback so people know if they were successful with a task 

    • Add more buttons where appropriate

    • Shade in buttons so people may know they’re already on that page

    • Make resulting feedback consistent

  • Make the visualization of data less daunting 

    • Ex. making the data for past hangouts more accessible

    • Ex. changing the graph showing the hangouts.

Wireframes and Prototypes

We next had four more rounds of using testing. Since this was a Computer Science class, we were not only trying to design a website that had great usability, but we were also coding it in HTML, CSS, and Javascript. Every iteration that we tested with 5-10 users, we added a different element that we had coded whether it be user profiles, data visualization, log in pages, or something else. We made edits based on user feedback at each step - both to the design and to the code.