Portfolio of Reese PattersonReese is a UI/UX Product Designer living and working in Vancouver, BC.This document contains a small handful of the projects he’s worked.

reesepatterson.comreesehspatterson@gmail.com454 East 8th Ave, Vancouver BC 250.739.8947

CONTACT:

Event Schedule ComponentEventbase Technologies, 2019

Project Overview

Eventbase creates apps for Events, ranging from Conferences and Tradeshows to Music and Film festivals. From SXSW to Microsoft, the range of clients using the app varies greatly, but they all have one common goal in mind: to help their attendees craft their ideal experience. The main component of this is schedule building and discovery of sessions being offered by the client Problem Space

Attendees at events find it tough to fill their schedule in meaningful ways. Their objective is to make the most out of the event by attending the right sessions, visiting the most important exhibits for them and what their company recom-mends. As a result, the attendee experience is reported to be overwhelming and time consuming.

Proposal

How can we create an experience for the attendee where their time is spent enjoying what the conference is providing, rather than spending too much time aimlessly wandering looking for what they need to go to next?

Discovery & Research

When tackling this overhaul, we had to ask two questions:

What do our clients (organizers) want?

What do our users need?

By conducting user interviews we were able to determine the pain points of our userbase which could lead us to our hypothesis.

Results of User Research

Based on our research and breakdown of user scenarios and stories, we were able to determine the main pain points and wants of our user base:

Users want to build out their own personal schedule, where they could curate a list of sessions they were attending, rather than just “favourites.”

Users don’t want to jump around as much within the app, and neither do the clients. They want to have more core features in one area. Inline recommendations to create a more personalized experience, as well as inline advertisemetns for clients to regain their profits from advertisers.

Improved filters to narrow results

Users want to fill in the gaps of their schedule easily so they can optimize their time at the conference/tradeshow/festival more.

Component-based Design

Once the man iterations of my designs had come to fruition and user testing was completed on wireframes, I created a component-based UI Kit that were based on the Atomic Design Method. This made it easier to break down all the elements in to pieces that could be repur-posed elsewhere and create consistency as we built out the platform beyond the schedule area.

Another reason these components work well with our system is we can easily define what is editable by the client and what’s fixed, creating a fluid system that’s customizable by out UI design team to offer each client a unique product.

Colors are broken down in to primary, secondary and tertiary, all of which can be swapped out by the client. The same goes for typography (H1, H2, etc) and imagery/iconography, if the client requires.

Cards with variable height to adjust for content, as well as optional thumbnails.

Actionbar floats on the bottom and is configurable on a per-card basis.

Clients can designate a small number of sessions to be Promoted, which is configurable with a stylized background of the session image to stand out to users.

Configurable action bar that sticks to the bottom of all schedule cells with options to favorite and indicate the user attending. The text is configurable depending on the status of the session.

Cards

Action Bar

Recommended for You

Best practices for Social Media: How to have a big presence in 2018 without losing your...

Ballroom C, Conference Center 1

7:30AM – 10:00AM

RESERVED

Calendar with room to add or remove dates de-pending on the client’s event date range. Below is a stickied tab to switch between “Agenda” and “Schedule” for quick access to user’s favourites.

Calendar and Tabs

Icons all have different states depending on their intended action. Color comes from the client-defined accent color.

Icons and CTA

Filter Components

Our clients have many different levels of filters, which posed a challenge of how do we show the user 50 topics to choose from in a list?

After testing a few solutions we came to the conclu-sion that for MVP it made sense to compartmentalize all topics in to headers if possible, thus saving screen real estate and not overwhelming the user at first glance of the filters screen.

Filters are compartmentalized in to category drawers with pills to turn on/off different topics etc.

Pills are expandable depending on character count, and use the color accent to indicate on/off states. Checkmarks are used for filter categories with no children topics.

Components

Pills/Icons

Filling the Gaps

A main component of this schedule design was filling in the gaps of the user’s schedule so they didn’t miss anything at the conference. This functionality was found on the user’s Agenda page.

Results

User testing showed positive results, with people being able to find the sessions they wanted quicker via filters and personalized recommendations, as well as filling their schedules with ease thanks to adding elements via their agenda.

Login RedesignEventbase Technologies, 2018

Project Overview

The first screen of an app often has the biggest impact to the user. It’s the first point of contact and often sets the tone for what’s to come, so why not make it as impactful as possible?

In Eventbase’s case, this screen the Login screen.

Eventbase’s app works in a way where one app will host multiple events, often each one requiring its own v to access. By offering clients the option to brand each log-in screen individually, and bringing in the Magic Link functionality, we can offer the user a seamless login experience while offering a full brand experience.

Understanding the Problem

One has to determine what it was that the user needs and why design a new login screen in the first place.After conducting user interviews, from a funcationality per-spective we discovered that: Users often get their login months in advance and forget it by the time they arrive at the show.

With many different logins, it’s not clear that each login screen is for a different event. Users often wonder why their login doesn’t work for all events.

From our client research, we determined that:

Clients want a unique experience for each event within their app.

Sponsors pay a lot of money for advertising, and clients were putting their sponsor logos in the splash screen, where they were often missed.

Login screen User inputs email

User selectes magic link

User didn’t receive email

user clicks on link login successful

Resend email

“If you are registered you will receive an email with

your magic link”

user chooses to input pw

user inputs password login successful

Invalid pasword, display error “Please try again or try

logging in via magic linK”

User Flow

The below user flow shows how

Breakdown of Components

The results of our efforts was a login screen that has both full mo-tion video and a default gradient.

We can see here the atomic de-sign that makes up the layout of the login screen, with each ele-ment being customizable by the client in terms of visual layout, while the placement/UX remains consistent among each app. A gradient colour can be applied as both a backup if the video doesn’t load as well as the default background if no video is re-quired.

Client Customization

While our efforts were deemed successful after user testing, one of the most important features to clients is the ability to customize the UI of the app in order to provide a unique experience using specific brand el-ements. That’s why every aspect of the User Interface is customizable in terms of colour and imagery while still retaining the intended UX flow and layout deemed appropriate.

In order to offer this to clients, we both had to:

Design in a way that offered customization to the users, and

Offer a theming service to the client.

The latter was done via our Eventbase Manager web tool, where cli-ents can login and upload their own assets and create their own color schemes. The tool was designed in a way to ensure no human error was possible, by automatically creating color overlays for backgrounds to ensure readibility, cropping instead of re-sizing image backgrounds with a safe area, and offering colour-schemes that go well together.

Final Results

The final result was a Login screen that offers client customization and ease-of-use for users via Magic Link, solving the problems that we initially set out to solve.

You can find an invision link here to view more.

https://eventbase.invisionapp.com/share/SFOYEZ0TC4K#/329589354_FLOW_1_-_1

Misc WorkA Random Collection of Work

Web Infographic

A web infographic for the client Cogitai, whom wanted to show off their new AI learning for homes.