Tony's Portfolio

First, how TeamUp looks and feels! After this I'll show you how I got to this solution.

or jump to the process + design decisions now

Check out and play around with the live prototype!

Final HTML/CSS/JS Design

Informed by my Mid and Hi-Fi prototypes, I built an interactive version using HTML, CSS and JavaScript.

View the live protoype here!

The eventual web version had some visual differences from the mock ups and the paper prototypes, but the core functions remained the same. I leveraged CSS and JQuery animations to emulate the real user experience of using the app in mobile and web forms.

Process

1 - Paper Prototypes & User Testing

For the first iteration, my main goal was to layout the minimum functions needed for the app. This was created in-class within 20 minutes.

Why?
Constructing the most basic functions allowed me to test what I thought were the core functions of the app.

Insights
The first user tests revealed that I should use progressive disclosure during the team creation phase of the app. This way I don't have to jam multiple buttons on one screen.

I forgot to add any form of navigation for the user because I was so focused on one linear task.

After several user tests of the first iteration, I consolidated the insights gained and updated my paper prototype with navigation, error messages, and additional screens for progressive disclosure. I then conducted 3 more user tests to test the validity of my update.

Why?
By adding navigation, I can see how the user might want to explore different ways of interaction, as well as backtracking while doing a task.

Error messages were added in order to better guide the user, as well as a way for me during user testing to see which parts of the prototype could be the most confusing.

Insights
With navigation and error messages, the user tests became alot smoother. Error messages were not commonly needed however, because with navigation and additional, simpler screens, users were able to digest information quicker and easier.

2 - Mid/Hi-Fi Prototyping using Sketch and InVision

After the second iteration of the paper prototype and the smooth user studies of the core functions of the app, It was ready to be fleshed out.

View Implementation Process

Here's a summary of what I did & learned in this project:

What I Did

Created rapid paper prototypes and conducted user tests to evaluate the effectiveness of each iteration.

Used prototyping tools such as Sketch and Invision to visualize final design.

Hand coded a functional mobile-optimized web prototype using HTML/CSS/JS from scratch.

What I Learned

Rapid iteration and testing prevented me from having tunnel vision, I realized early on I had missed some features that should've been there all along.

Mid to Hi-Fi prototyping can reveal previouly overlooked features in Lo-Fi prototypes!

Greatly improved my knowledge of CSS and JS because I didn't rely on templates or Bootstrap.

TeamUp