Picnic's Campaign Manager

UX and UI Designer 

 
7-campaign-manager-boards.png
 

The Campaign Manager for Picnic™ is a platform that embeds game mechanics into a web or mobile application.

It's an ongoing product that we have been working on at Pug Pharm. We iterate and continue to add features as the business grows.

The campaign manager allows customers to:

  • create and manage their own content (badges, virtual items, collection and game boards),
  • implement rules and actions that will trigger outcomes in a gamified system,
  • manage their user database, 
  • and measure their results with a set of reports and analytics.

 

[May 2011 - Present] 

 

 

Stage 1:

Information Architecture and User Stories

 

My process started by reading API and SDK documentation.

I worked closely with the engineering team to clarify key objectives and features. This allowed me to build information architecture that defines the data, functions, and operations in the campaign manager.

User stories helped me clarify flows that I later visualized with interaction diagrams.

 

sdk-IA.png

Stage 2:

Prototyping and Wireframing

After I had the structure, data and functions defined, I moved to the whiteboard to start prototyping with paper.

At early stages, I used paper UI patterns that I moved around the whiteboard to think of better ways to arrange an interface. This allowed me to focus on the overall user flow and iterate quickly.

Then I moved to digital tools and translated the paper prototypes to wireframes that I drew with Balsamic and Illustrator. I identified interaction patterns and built interactive prototypes in InVision—I used this to discuss a prototype with the technical team before we jumped into development.

In these conversations, we identified gaps or functions that were missing.

paper-wires.png

Stage 3:

User Interface Design and continuous iteration

After drawing the wireframes, I built the UI on top of them. I used Photoshop and Illustrator to make all final UI elements.

At this point, I had many discussions with front-end developers and we collaborated on the things that needed to be tweaked. I usually do most of the cosmetic changes myself (HTML and CSS) to allow the developers focus on the bigger picture development. 

This process keeps going and we iterate the design constantly. Sometimes we even go back to the Information Architecture to find a better way to label and structure interactions. 

I keep track of changes and we have version control that allows us to go back and document the development of our product.  

 

UI-top-wire.png