Pivot

 

Pivot is a collaborative web application for designers. Through Berkeley Innovation, I was teamed up to work with Vertigo Software (recently acquired by MLBAM) to create an environment for designers to share files, communicate and resolve discrepancies directly on the platform.

Inspiration

Team: Ji-Hern Baek, Gabi Dumaguin, Kylon Chiang
Skills: UX Research, UI/UX Design, Branding
Programs: Balsamiq, Sketch, Photoshop, Illustrator

year - 2015

 
 
 

Research

 

preliminary research

Essentially, our product would be a Github for designers, where instead of sharing code, users can share design files and have merge conflicts restored via the web app. 

Our preliminary research consisted of competitive analysis and user interviews. As the only one on the team who was not familiar with Github, I was tasked with familiarizing myself and identifying pain points in learning the system. A few that stood out were:

1. Github uses too many unfamiliar terminology (such as "pull" "commit" "merge" "master" "branch")
2. The onboarding took too long
3. UX was not intuitive.

For the full Github analysis, click here. 
My lack of familiarity with Github proved useful throughout the design process as I offered a laymen's perspective in converting technical concepts into more design-related ideas and features.

 

competitive analysis

We identified our main competitor as Pixelapse which we referenced throughout the process. We kept the features that were useful and built on the places that Pixelapse lacked (such as the revision conflict).

 

 
 

Ideation

 
 

We first brainstormed by listing out main tasks on a whiteboard and created quick wireframe sketches for each one. We consolidated the most important ones and turned them into paper sketches for mocking up later.

 
 
 

Lo-fi Mockups

 

We used Balsamiq as a quick and easy way to figure out hierarchy, placement and interaction. We were able to distinguish what features worked best as an image, a button or a dropdown and share that amongst each other. With these mockups, we established a way to divide up the work so that each person was in charge of certain pages. I decided to create the files and upload pages. From there, we got more feedback from our project leader, Ian from Vertigo, to move forward into our own lo-fi mockups.

 
 
 

Mid-fi Mockups

 

At this stage, we went into the Vertigo office for our first presentation and got back a lot of feedback. With my pages, I was asked to pay particular attention to the interaction of the hover icons. Should it take up the whole picture? How can a user click on just the file and not accidentally click on a button? Should the icons be more clear? Should the text be at the bottom to couple with the icon?

 

 

Branding

logo design

 

We chose the term 'Pivot' to describe the design process as a bouncing back and forth of ideas before you get to the final product.

When you pivot, like in basketball, one foot stays grounded as you advance towards the basket. The same with design, every iteration maintains its main concept as the design moves towards its final iteration.

 
pivot_colors.jpg
 
 

UI Design

For the user interface, I chose to go with a very simple color scheme so as to not take away from the user's own designs as they edit on the platform. The web app mainly uses shades of gray to denote different hierarchy (white being the most active features, the darker the gray, the more passive the feature), with blue as a general color scheme and orange as an accent color for notifications. 

 
 

Prototype

Click here to check out our Invision prototype.