Team Up

ux/ui, uni
Project Overview
During my 3A at Waterloo, at my very first ux/ui course, we were tasked with creating something that would connect our satellite stratford campus with main waterloo campus students. As my first introduction to the discipline I wasn't sure what to expect, but it was a project that was a worthwhile learning experience.
Tablet Prototype with corresponding wall projection (Christie Tile Wall)

duration: September - December 2019
team members:  Jessica Chu, Sarah Chung, Georgia Nyland, Janessa Pretorius
role:  Project Team Member

Logo I made for the project

(or extended overview)

 ✍︎ The Problem
There is a lack of connection between Stratford satellite campus students and Main campus University of Waterloo students.

☃︎ Target Audience
Stratford Campus students and Main Waterloo Campus students.

✏︎ Research
• data collection (surverys) 
• ecosystem report
• experience map
• personas

☞ The Idea
Create a sense of live connection through short bursts of games, these can be activiated through physical setups throughout high traffic areas on the Main Waterloo Campus and Stratford Campus

✵ Prompt
Before we formulated our project idea, we were given a number of prompts to work of off, as a team we decided upon the one below:

"There are limited opportunities for Global Business and Digital Arts students to gain valuable experience collaborating with peers from other faculties."                      
- Natalie Quinlan (MDEI student)


Data Collection

Working off the prompt we surveyed the target audience:  GBDA and Main Campus students. These were the results of our findings. ​We found that Main campus students connect with GBDA students through first year, where the students are situated 90% on the Waterloo campus before moving 100% to Stratford campus for years 2, 3 and 4. As well as through most students had already met and known the student before entering the University of Waterloo.

Ecosystem Analysis

Individually we wrote ecosystem analysis reports to gain a better understand our target audience and the setting constraints they faced from this problem.


We continued our individual research on the project through personas, and that helped us to further understand the variety of users involved.

personas pdf version

Experience Map

After our individual components were complete, we created our first group component together, the experience map.

Through this map we better understood what exactly a typical user of the problem would go through and the timeframe the project would be applicable in.

group experience map

After all the research was complete we sat down as a group and discussed what exactly we could make. Main thing we knew for sure was that we wanted to do more than just an application, because our professor for the class said that people don't download applications on the regular.

A teammate Jessica mentioned the idea of how we could utilize the wall, and she pointed to her interaction class where they used the wall to play games. And thus our idea was born! We wanted to utilize the Christie tile wall on the Stratford campus and have live sessions that would connect to similar projects on main campus.​ Our main inspiration for this idea was a Coca-Cola Campaign where they utilized Coca-Cola machines with digital screens to connect the people between the India-Pakistan Border. We also drew inspiration from an application on the app store called Trivia Crack.



intial sketches

Low-fi Wireframes

After the experience map was complete we moved into sprints where we developed low-fi wireframes each week. The wireframes were first done separately but we discussed as a group what we wanted to pull from each other's ideas. Then after collective discussion we developed a final set of low fi wireframes before moving on to high-fi mockups.

2nd iteration
3rd iteration, Group Effort

We had a discussion as a collective what we wanted to keep from our low-fi wireframes. We found that we had a lot of ideas for what could go on the wall but ultimately decided to narrow it down to one component, the games component; to build connections between Stratford and Waterloo campus students.  We made this decision in order to better focus on what the project was and in order to fulfill the project within time limitations. ​

After the meeting was complete we did one more iteration of wireframes but this time as a group, and I was responsible for the introduction screens.

High-Fidelity Mockups

After 3 iterations, we individually made mockups for the final product.

Mockup for FInal Product

At this point, we've reach the final couple of weeks on the project. We discussed what we wanted for the final look of the project, got feedback from our peers and our professor and conducted an usability test.

After the test was complete, we moved onto Figma and began prototyping a final mockup for the project.

Final Product

Final Protoype Figma (view only)Interactive Prototype Intro ScreensPDF Version
some final thoughts

• First introduction to the world of ux/ui
• learned a lot about the process of user experience and user interface
• experienced agile product development (lots of iterations!) 
• opened my eyes to a new discipline that sparked my interest for the future

more case studies   →