ec-main-image-4

Event Challenge

A collaborative event planning app that puts the fun into event planning.

OVERVIEW

The Salesforce UX Product team invited me to do a design exercise for a potential lead product design position. The request was to create an iPhone app that would allow friends to choose a destination and dates for a reunion.

PROJECT DURATION

The timeline was not specific but they wanted to see something within a few days. I spent a total of 35 hours and submitted it within four days.

MY RESPONSIBILITIES

Create the use case scenario, research technical requirements, develop wireframes, flow diagrams and interaction and then submit beautiful, scalable designs that show the end product in action.

Jake and Rob’s Camping Summit 2013

Jake and Rob are longtime friends and outdoor enthusiasts. Every couple of years they travel to a new part of the country to camp, hike and explore. This year they invited fifteen of their camping buddies, many of them spread all over the country. Through initial communications they all agreed on a couple things — They wanted to visit one of the amazing national parks in Utah and they wanted to do it in October when the weather was right.

Jake is an app developer and Rob is a designer. They decided to make the process of finding a location and date more fun for their friends by creating a scalable, gamified app to help lock down the important part of the event details.

ec-photo

Core technical requirements

After doing research on existing applications, devising user personas and considering the end-to-end user experience, I developed eight core technical requirements that would fulfill on the request. These requirements are based on the profiles for this scenario and scalability.

  • Create account/login
  • Info on camping destinations
  • Add destination feature
  • Map integration
  • Messaging feed
  • Voting and results
  • Calendar sync
  • Push Notifications

VISUALIZING THE EXPERIENCE

Initial wireframe sketches

As with most design projects, I try to begin the process using a pencil and print-outs. I find it allows me to think more organically about the experience.  I also find that sketching slows the visual UX/design process down to consider all options and possibilities. I began with sketches of the end-to-end user experience — login, review events, add an event, menu system, calendar and the winning destination.

These early sketches consider different layouts for certain screens such as the ‘Destination list’ and ‘Destination detail’ screens. Also, I begin to consider the menu and how this would be an essential component to the process for navigation purposes and also to allow this application to scale in the future.

ec-sketch-02

Wireframing using fluid mobile app design software

Visit their website

I chose to use FluidUI, a cloud based wireframing software that I’ve grown to like. It has a decent workflow and helped me create quick and simple wireframes and flow diagrams. Some of these screens follow earlier sketches due in part to defining technical requirements earlier in the process.

I also wanted to show the client my experience in flushing out more designed wireframes that UX designers would typically assist in developing alongside their visual designer counterparts.

ec-wireframe-02

TURNING A CHORE INTO A CHALLENGE

In most instances, inspiring and organizing a group event is a chore. Most people want decisions to be made for them and inevitably there are individuals who are not as available or willing to help in process. I wanted to turn this application into a game, or a challenge that involved everyone’s input. To do this, it needed to be easy and fun. I broke it into three steps, view, create and choose. Creating a countdown clock that counted down the time to select a winner emphasized the urgency to contribute and have a say in where and when the event takes place.

ec-comp-destination-small

View all Destinations

Users had to be able to navigate and see existing destination selections. In this screen, the decision was made to go with a standard, scrolling list view.

ec-comp-countdown-small

Countdown

Using an overlay screen after login, the user is immediately shown the countdown has begun. The countdown clock follows the user on all screens, thus impressing it’s importance.

ec-comp-vote-small

Vote on a Destination

The ‘Destination Detail’ page is where voting occurred. The page needed to show images, contextual information and maps as well as a voting button.

MORE THAN A CALENDAR

Viewing, adding and selecting destination was one part of the challenge. The other part was selecting dates that everyone could agree upon. This proved to be an obstacle because the calendar needed to be a collaborative effort, update and provide everyone else’s seleted options while also giving the user the ability to select their own dates. To do this I considered a hack of the existing iPhone calendar.

View Dates

In this screen we see pre-selected dates by other users in the light blue selections. This would be typical in any collaborative calendar. But I also wanted to show who those people were. Below is a scrolling list view of the dates, votes and those people who voted on those dates. This helped in the decision making process.

Select Dates

Here we see the user selecting the 26th of October. It is highlighted in royal blue. This would allow the user to choose the dates they were available against everyone elses selections. The idea would be that it would push the info and instantly update the calendar. It would also show their votes in the list view of selected dates directly below.
ec-calendar-finger

FINAL DESIGNS

Below are six of the final design screens I chose to present to Salesforce’s UX team. I felt they best displayed the user experience as well as some of the detailed visual design work I did for the project.

ec-comps-final-1

ec-comps-final-2

Prototyping using Axure

Axure is a great program for quickly mocking up interaction on mobile. Prototyping allows me to express the interaction of the application. There are some limitations to Axure, but for showing standard animations and interactions, it’s like your using a real app on your phone.

Conclusion

After presenting this to the UX team at Salesforce, I took a step back and considered what I could have done better. My first thought was to flush out how a user would add a destination. This section was also a difficult challenge for me given the time constraints and required a lot more research and thought. Would I use existing API’s such as Lonely Planet or some other travel destination site? Would it need to be customized where the user could upload their own images and summaries?

In the end, the team was very happy with the submission. I was asked in for two days of formal interviews which was an amazing experience in and of itself. Doing design exercises is never easy and this proved to be a great challenge for me. In summary I would say I came up with not only an app, but an app that helps to tell a story and turns a mundane chore into a fun and engaging experience.