Events Pro Case Study

CHALLENGE

The initial project was to approach a local business and design a new responsive website, which would best accommodate the needs of their customers and the business itself. I met with the owner of an Event Design and Planning company, that had recently branched out into large scale balloon installations. The installations had been so popular, that she was considering opening a second company, specifically catering to the balloon installation demand. I offered to develop the new company branding and the responsive website.

However, after my research, I discovered that what was truly needed was a product that could assist an Event Designer, with the project management of all her upcoming event projects, meetings, related documents, and her communication with clients and vendors.

PROCESS

Before getting started, I decided that the best approach for this project was the double diamond method. This method guided me to discover and define the real problems, so that I could weed out any assumptions and design solutions for actual frustrations.

DISCOVER

Being unfamiliar with the balloon installation industry, I held a brief meeting with the stakeholder. We discussed how she got into balloon installations, and how she was currently promoting this product option. We also talked about the design and installation process, from initial concept to final installation.

Competitive Analysis: For the competitive analysis portion of my research, I decided to look at how other companies were currently were selling balloon installations, and what types of services they were offering.

User Interviews: To gain insights into the event design process, and to empathize with individuals who work with event vendors and art installation groups, I decided to interview 3 individuals. Using my interview script as a guide, I spoke with each person, taking notes along the way. Afterwards, these notes were transferred to post-it notes.

DEFINE

During the synthesis phase, I created an affinity map, with my interview post-it notes. This way I was able to group together similar themes and patterns, in order to gain insight into the users’ overall experience. Combining these with my competitive analysis findings, I was able to define the following insights.

• All participants expect to collaborate with the vendor during the design process.

• The success of a project was not only measured by the final product, but by what level of the vendor’s coordination and involvement, when working with other vendors.

• Email correspondence can be heavy at times, since a lot of the approval process is handled through back and forth emails between designer and client. Sometimes this can lead to project delays, if responses are not sent in a timely manner.

The AH-HA Moment: After synthesizing my research findings, I realized that the project would need to switch gears a bit, in order to fix the pain points and frustrations, that users were having while working with event vendors and designers. Instead of designing a responsive website for my client’s balloon installation company, I needed to develop a product that an event designer or vendor could use to manage their events, share documents, and communicate easily back and forth, for approvals, during the design processes.

How Might We: At the end of the synthesis phase, I developed a key HMV question to guide me through the development phase.

How might we make it easier for event planners and project managers to book a luxury balloon installation vendor, while making the entire experience feel easy and under control; that they have a say in the creative process, and making the approval/revision process as stream-line as possible.

To influence my decision making, during the design and ideation phase, I created a persona and a storyboard. I would refer back to these to remind myself of who I was designing this product for, and what problems we needed to solve.

DEVELOP

INFORMATION ARCHITECTURE

Story Map:  Now that the project had changed scope from a company website into a product platform, I needed to generate ideas for how the information architecture would be structured. I approached the development phase as a high-level MVP, due to the time constraints of the assignment.

To configure the structure of the platform, I chose to create a story map. This “living” document would allow me to think through the different types of tasks users needed to complete, what actions were important, the information hierarchy, and what functions were possible. As the development process moved, I could update this document, so that I could troubleshoot any hiccups.

INTERACTIVE DESIGN

User Flow Diagram: Before moving into wireframes and UI development, I created user flow diagram to illustrate a “happy path” of the user navigating through the platform, and completing a couple of tasks along the way.

WIREFRAMES

Using the story map, user flow, as well as my research into common design patterns used for project management platforms, I started sketching out how the navigation, UI, and project management functions and information would be presented.

Now that I had a rough idea how the platform pages would look, I started to build mid-fidelity wireframes, to fine tune the design patterns and visual hierarchy.

DELIVER

Prototyping: The next step was to build a prototype. Using InVision, I constructed the prototype from wireframes that were uploaded through Sketch. This prototype was built to test the process of uploading a document to a project, followed by sending a message to the client to review that document.

Usability Testing: To test the user experience, while performing the task of uploading a document and sending a message, I performed usability testing with 3 individuals. The results from the testing were as follows:

• 100% of users found the overall interface clear, clean and easy to use.

• ⅔ of users got confused between the Edit and Message buttons.

• 100% liked the Active Projects cards, however 33% thought it would be nice to have a List View as well.

• Overall Complete Rate: 100%

• Error-Free Rate: 90%

UI DESIGN

Taking the information gained from the usability testing, I made the adjustments to my wireframes, and moved into the high-fidelity phase of the UI Design.

Mood Board: I started this phase by taking a few moments to develop a mood board of color, illustrations, branding, etc., which would express the overall look and feel of the Events Pro branding.

Logo Development: A part of this project was also creating the Events Pro logo. I started by sketching out quick ideas and thoughts. Then I selected a couple that I would push further, before landing on the final design.

FINAL DESIGN & UI KIT

After developing the Events Pro brand style guide, I moved into building a UI Kit and applied those guidelines to the Events Pro hi-fidelity wireframes.

Below is a gallery view of the hi-fidelity frames. Click through to review.

RESPONSIVE PLATFORM

After finalizing the hi-fidelity wireframes for the Events Pro platform, I wanted address it’s responsiveness from a desktop computer to a small laptop. The solution was fairly simple. Have the side bar navigation become collapsable.

NEXT STEPS

• Take development of the platform further by developing the specific project communication pages.

• Explore the meeting scheduling and vendor relations sections.