Project: Eventual.li

Keep up with what’s happening locally—wherever you are—whether you’re looking for something to do with friends this weekend or want to explore a new neighborhood.

My Role: Design - UI / UX

Interaction Design, logo design, interactive prototyping. Led concept definition, ideation, defined and helped with usability studies.

Challenge:

Eventual.li is an app concept developed for an Adobe Live UI/UX event. I had essentially 2 weeks to conceptualize the product, prepare materials and get ready for a 3 day/2 hour a day live presentation. One of the main challenges was using Adobe XD for the first time and designing the entire app while live streaming from Adobe’s headquarter in San Francisco.

Action:

I followed a rigorous process to get this project ready for the event: 1) Research competitors 2) Outlined the scope of the product including the top Key features 3) Conducted an user interview 4) Gathered insights and findings to start the next phase "user flow" 5) Developed rough and polished wireframes 6) Design the app during Adobe’s live event using Adobe XD.

Result:

Designed 19 screens and finalized a live prototype during the 3-day live event with over 2,000 viewers watching.  I was very pleased with the results and decided to bring this product to life, which is now currently under initial phase of development.

Scope: Adobe invited me to their headquarter in San Francisco to participate in one of their live Behance UI/UX programs.  To design UI/UX project while live-streaming and interacting with the live audience.  The prerequisite was to use Adobe XD to design the project.

 

Overview: The initial idea of the app would be a place where users can go to look for events, attend and share their experiences.  The app would be a fully functional product to be developed for the iOS platform.

Project Scope and Overview

Process

The diagram below displays the process I use for the majority of my projects. It is also safe to say that not all projects will require the extensive steps as outlined below as some projects will have less steps and more simplicity.  One of the main goals is to test an idea or to deliver a MVP (Minimum viable product), or a fully functional prototype.

Research

Insights

Ideation

Design Phase

Hand-off

Competitor Review

Mood Board

Exploration

Discovery

User Pain Points

Learnings

What Works

Mind Map

Feature Narrative

Design Principles

Journey Map

UX Flow

Wire

Asset Creation

Asset-prep

Micro Interaction

Development

Design & Prototype

Typography

Color

Iconography

Style Guide

Low-fi Wireframes

High-fi Wireframes

Interactive Prototypes

 

Design Evaluation

Feedback

Refinement

User Test

 

Research

1- Competitor Review

When reviewing the competitors’ landscape, I often look for differentials and opportunities that could be applied to improve the product that I’m working on.  Often times this approach is used to see what’s working and what’s not.  After all, most of these products have already established themselves and been put through the painful process of building their platform.

Eventbrite

Eventbrite is an event planning platform that helps people create, promote and host their events. The free mobile apps are meant to serve as discovery tools for people who are looking to attend events they're interested in.

 

Use it to discover popular events around you, see what your friends are doing, get recommendations, register for events and even securely purchase tickets all through the app.

 

Who uses it: Amazon, Youtube, Coca-cola, ADP, Johnson & Johnson, Verizon, Google.

Guidebook

Built with ease of use and design in mind, Guidebook lets you create event apps through a simple drag-and-drop interface. It’s got all the bells and whistles as the other guys, but a bit more straightforward and intuitive for builders and users alike.

Eventbase

A feature-rich app with full-screen commercials and branded placements opportunities, Eventbase can help you meet both your and your sponsors’ goals. Eventbase features include custom fonts and advanced theming, as well as time and location-based systems.

 

Who uses it: SxSW, Sundance Film Festival, Montana Folk Festival, SAP, Adobe, ComicCon.

2- Mood Board & Exploration

Creating a Mood Board for Your Design Project Will Help Keeping You Focused

Anytime I start a design project I begin by creating a mood board as part of the exploration process to narrow in on the design direction.  Mood boards are a visual tool, often in a collage format that can consist of images, text, and/or samples.  Mood boards can be physical, with items placed on one big board or gathered in a central binder/folder, or they can be created digitally using Pinterest or another online source.  I like to think of mood boards as the first piece of homework you do in preparation for a project.  This may include images, type treatment, and or snapshots of products, etc.

3- Discovery

$22B was spent on admissions to live events in 2014 in the US. Spending on attending events is growing, but 90% of people look for events only once a week or less. Despite this lack of regular visitors, event discovery is highly competitive with no clear winner. One may assume this is due to the lack of a centralized event database. Unfortunately, most people privately share events so an app cannot rely on users to build an event database. However, Facebook is the first place that most events are created and an app can gain access to these events.

Admissions to live events: music concerts, performing arts, sporting events from

Millennials: Fueling the Experience Economy by Eventbrite

Events provide perfect photos, videos, and statuses to share. 79% of millennials will buy an experience over buying an object. With millennials now making up a quarter of the US population, the experience economy will continue to rise. Today we are attending more events than ever, but most still rely on word-of-mouth to find new and unique gatherings. No app or website has completely solved discovery of things to do.

4- User Pain Points

Half of most people are planners and half are procrastinators which leads event consumption to happen in waves. When people search for events they want to filter by category, just announced, time, and location. They also want no more than five to ten personalized results. Personalization is easy when an user has a lot of active friends and likes a lot of Facebook pages in the area, but it is difficult if they don’t. Additionally, events have a short shelf life and diminish in value the farther away they are. This makes it difficult to maintain and scale a consistent experience for less connected users.

Insights

1- Learnings

From afar event discovery seems like a tasty low hanging fruit. Most of us have had an experience where we missed a cool event only to find out about it on social media after the event had past. This feeling has been given the name FOMO, or fear of missing out. FOMO has driven many first time entrepreneurs to create a company to solve this problem. All we need to do is create a good service, grow to a decent user base, and charge for advertising, ticketing, deals, or providing an event feed. Only if it was that simple.

Event Discovery User Retention

2- What Works

People usually go to events to socialize and network

 

Whether it’s the friends you brought along or the people seated next to you, sporting events bring people together. Maybe it’s the common interest in (or hatred of) a team that starts the conversation — or the simple joy of having a beer with a stranger. Whatever the reason, talk to any sports fan and you’re bound to hear a story or two about mid-game encounters with interesting folks.

 

How can you encourage your attendees to mix, mingle, and network? It could be as simple as arranging a pre-event happy hour or encouraging your guests to introduce themselves to the person next to them.

Interview:

 

“I go to events or concerts when I feel like having fun and and socialize with friends or like-minded people”

Survey:

 

If you’re trying to impress someone, what better way than to take them out to a ballgame? For some, it’s that cute girl from the bar. For others, it’s that big client. Whoever it is, sporting events are a great way to take someone out and show them a good time.

Product Definition

3- Mind Map & User Flow

For the most, I use OmniGraffle before wireframing as starting point to define the flow of the product. OmniGraffle is a great tool to create diagrams, mindmaps and low or high fidelity user flow.  In any case, this is a typical approach to put all the dots in one place and connect them.

Ideation

1- Feature Narrative

Keep up with what’s happening locally—wherever you are—whether you’re looking for something to do with friends this weekend or want to explore a new neighborhood.

 

Key Features:

 

A) Notification & Followers Updates — See the most recent activity, events and places your friends are interacting with and updates from event hosts and Pages you follow.

 

B) Interactive Map  — Find events and activities happening near you on an interactive map and filter by time, category, location and more.

 

C) Tailored Recommendations  — Get recommendations based on what's popular with your friends, events you've been to in the past, Pages you like and our curated Guides.

 

D) Dynamic Calendar  — Choose to add calendars from your phone to see all of your plans in one place.

 

E) Event Notifications  — Opt-in to get notifications about your upcoming events so you know if details change.

 

F) Host/Create Your Own Event  — Host, create and or curate an event.

 

G) User's Own Live-streaming Channel  — Provide livestream to your audience

2- Design Principles

What are Design Principles?

Design Principles are a set of considerations that form the basis of any good product.

 

Why use them?

Design Principles help teams with decision making. A few simple principles or constructive questions will guide your team towards making appropriate decisions.

 

Who uses them?

Organizations, individuals and product teams have benefited from writing and following their principles.

 

1) Be loyal to the user

2) Make it easy to share and promote sharing

3) Add human touch

4) User feedback is important

5) User delight is important

6) Respect social norms

7) Promote discovery

8) Make things simple and intuitive

3- Journey Map & UX Flow

 

Must-haves

 

Personas: the main characters that illustrate the needs, goals, thoughts, feelings, opinions, expectations, and pain points of the user;

 

Timeline: a finite amount of time (e.g. 1 week or 1 year) or variable phases (e.g. awareness, decision-making, purchase, renewal);

 

Emotion: peaks and valleys illustrating frustration, anxiety, happiness etc.;

 

Touchpoints: customer actions and interactions with the organization. This is the WHAT the customer is doing; and

 

Channels: where interaction takes place and the context of use (e.g. website, native app, call center, in-store). This is the WHERE they are interacting.

 

Nice-to-haves

 

First moment of truth: A positive interaction that leaves a lasting impression, often planned for a touchpoint known to generate anxiety or frustration; and

 

Supporting characters: peripheral individuals (caregivers, friends, colleagues) who may contribute to the experience.

Design Phase

Design & Prototype

The design phase in itself is a multi-step process and the end result is visual directions and blueprints, which gives a vision of the final product. It also informs you on how an interaction should feel, move and flow. It consists of Typography selection, color palette selection, iconography, a comprehensive style guide Low and high-fidelity wireframes and if necessary an interactive prototype.

1- Typography

Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

 

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.

Lato

Lato

Lato

Lato

Light

12pt - 14pt

Regular

12pt - 14pt - 18pt

Bold

12pt - 14pt - 18pt

I watched the storm, so beautiful yet terrific.

I watched the storm, so beautiful yet terrific.

I watched the storm, so beautiful yet terrific.

2- Color

Selecting the colors for my projects is always a fun phase to me. I like to start the color selection by concentrating on one main color and building the palette using complimentary colors and using the similar hue and saturation for the supporting colors.

3- Iconography

Icons fit within graphic systems. Whether they are designed for desktop applications, web sites or phone applications, an icon is one of many graphic elements that needs to work together harmoniously. I usually select the icons that best pair with the style and the look and feel of the product I’m working on. In some rare cases, I design custom icons from scratch. This process requires a lot of research and trials and errors. Icons can really impact the functionality and how the user will interact and navigate your product.

4- Hi-fidelity Wireframe

The process of creating wireframes can be helpful in defining the product flow and visually understanding the product architecture. I tend to treat wireframes as the first real concrete visual process for a project. It also allows stakeholders to identify and drive clarification of the product features.

It is a good idea to create onboarding steps that can guide and prepare the user for product’s main features, and to provide the user an informed starting point.

Wireframes are not meant to be visually appealing; they're meant to be usable.  At a later stage, a well polished wireframe may help to avoid design setbacks.

4- Interactive Prototype

When static wireframes, mockups, and flows aren't enough to communicate the complexity of your project, it's a good idea to make your designs interactive. There are many tools available to create an interactive prototype. For the prototype below, I quickly used Adobe XD since the project was fully designed using the software.

Click here to see the interactive prototype

Design Evaluation

What is Evaluation?

 

Evaluation is the skill of being able to look at a piece of art or design and know what is right or wrong with it. It is an instinctive skill but one that you can develop by increasing your knowledge and understanding of art and design through studying the work of other artists and designers.

 

Why do you evaluate your work?

 

You evaluate your work to find out what works and what doesn't. It is also important to understand what you have learned from doing the work. What are the new skills, techniques, and concepts have you grasped through your involvement with the creative process? Each piece of work that you undertake should build upon your knowledge and understanding of art and design leaving you better equipped for your next challenge.

 

How do you evaluate your work?

 

When you are evaluating your designs you should consider the following:

 

Images: Consider their suitability for the subject, their style, proportion, arrangement and color. Could any of these be improved upon by making any adjustments.

 

Fonts: Consider their suitability for the subject, their legibility, style, proportion, arrangement and color. Could these be improved upon by making any adjustments.

 

Layout: (the combination of images and fonts) Consider the proportions, arrangement, alignment, and color relationships of the various elements in your design.

 

Target Audience: (your client, buyers, users, readers, listeners) Does your design speak in a language, color and style that appeals to your target audience?

 

Technique: Does your use of media, quality of finish and presentation need to be improved upon?

1- Feedback

When done correctly, receiving feedback is the most valuable part of any designer’s process. It doesn’t matter how experienced the designer is. Without feedback from other people, you cannot be sure your work will be appreciated and understood by anyone other than yourself.

 

How easy is it to navigate the app?

 

         Very difficult

 

         Difficult

 

         Regular

 

         Easy

 

         Very Easy

2- Refinement

After feedback is received from different sources, it is time to refine and update the design. This phase can be straight forward or it could require a total restructure of the design already implemented.

3- User Test

Usability testing is effective because you can watch potential users of your product to see what works well and what needs to be improved. It’s not about getting participants to tell you what needs adjusting. It’s about observing them in action, listening to their needs and concerns, and considering what might make the experience work better for them.

© 2019 Rovane Durso, All rights reserved.