SummaryPrototypingProcess
SummaryPrototypeProcess

Goal :

Product/Experience Design, Events, Tourism Web Portal

Role:

Duration:

3 Weeks

Tools:

XD, PS, WebXR
After Light Philadelphia is a web based platform micro site of the larger events website Visit Philadelphia that caters specifically towards after hours venue/event promotion.
The baseline expectations reside in the creation of a high quality, accessible and performant interactive experience interface to facilitate the discovery of after hours happenings as an impetus for real life explorations. 

The goal was also to make the experience responsive to immersive mediums where appropriate and relevant to dovetail mobile/web based interaction flows.

Problem
‍

How can pre-existing event platforms be utilized to cultivate a streamlined user experience of marketing and consumer based avenues for targeted evening events/venues?

44

seconds average webpage perusal time
How can the interface of a new microsite be simplified and structured to amplify appeal and diversify user demographic reach especially for niche audiences such as locals and working professionals ?
The typical website user spends an average of 44 seconds per webpage visit and this stat underscores the vital importance of utilizing targeted, clear and simple navigational features especially for events platform websites.  

Upon auditing the Philadelphia visit site, the first notable insight I came across was the sense of being inundated with a mass of information and editorial about upcoming events with only basic classification schemes available to the user without taking the additional effort to drill down deeper into the site.

Also, the website primarily seems to be catered towards new visitors of the city with hotel deals and trip planning being placed front and center of the primary navigation.

44

seconds average webpage perusal time
How can the interface of a new microsite be simplified and structured to amplify appeal and diversify user demographic reach especially for niche audiences such as locals and working professionals ?

Opportunities/Value Touchpoints

How can pre-existing event platforms be utilized to cultivate a streamlined user experience of marketing and consumer based avenues for targeted evening events/venues?
Having a targeted after hours events microsite for locals could assist businesses, local organizations/institutions, parks or eateries who are seeking opportunities for augmentation of their consumer base via advertising discovery pathways.
People with careers or university students who are occupied working during the day would benefit from easy access to a platform which hosts a centralized aggregate of after hours events/venues for efficient access to new and varied fun things to do.
People are generally creatures of habit and may be more inclined to try out new experiences or locales if incentivized through awareness, review and sharing of the potential opportunities for delight.
People want to know what’s going on in the bustling urban center they inhabit but could use a targeted interface to parse the desirable signals of activity engagement from the noise.
A specialized microsite of this nature could assist in fostering the overall well-being of local communities, their economies through the stimulation of tourism and cultural exchange.

Prototype

- Desktop + Mobile + VR

Desktop UI

This demonstrates the animated sequence that quickly plays when the user loads the page for the first time.

Product Selection + AR Environmental View

TAB - Things to Do

Accessible tabbed browsing with nightlife curated content imbedded within each category selection

In the above figure, the only element that has been altered with this first tab is the populating content. Since the microsite is catered towards nightlife, events, having this content in this interface by default would make it easier for users to efficiently navigate towards desired offerings rather than taking the extra steps to filter if it were the main events platform.

Events Calendar Tab enables users to quickly select the desired date to find evening events of interest

This animation showcases the events for the specified date along with secondary filtering options at a greater level of granularity.

TAB - Social Media

Fun social media widget to share your travels and outings with your following and connections

This is a large social component embedded within event attendance as research as shown that nearly 80% of millennial event website users say that these venues make them feel a greater connectivity with the local scene and world. I added some fun animations to this widget because I wanted it highlight this shared connection crescendo point one of the main value attractors of event attendance.

(Source)

Featured Events - Slider

Menu - Home Page (Featured Venues)

This interaction demos the user's ability to slide scroll through some of the featured evening events.  When one is selection, more context information is invoked such as time and location if applicable, the weather forecast, subject keywords and a brief description which can be expanded to a detailed view via a modal pop-up window. Other interactive agencies include the ability to share as well as favorite. Here is the detailed view of one of the selections invoked. This includes more about the venue in the form of multimedia pictures and description.

Newsletter Signup

Increase user retention via newsletter signups to help people stay in the loop and receive reminders about the latest happenings.

Sign-up window sequence where users will be given the option in email to opt out of receiving this messages if desired at any time.

Mobile UI

This demonstrates the animated sequence that quickly plays when the user loads the page for the first time.

Homepage - Scroll Browse

Mobile version of the homepage scroll with highlighted featured events.

Menu - General + Search + Date Filter

General Menu for mobile.

Mobile Search.

Calendar filtering Mobile.

Menu - VR View

After invoking VR mode on either desktop or mobile, the user is then able to navigate the events site via the immersive perspective with an HMD of choice.

Virtual Reality UI

This is the the homepage scene in the VR environment.  It contains all the interactions of the mobile and desktop versions with the added functionality of  immersive event view.

VR - Interactions

VR - Calendar Filtering

Users can select a date with their VR reticle to filter events. Once the date is selected the environment become populated with events for that day.

VR - Search + Highlighted Events

Search module.

Things to do menu.

VR - Venue Explore Mode

Venue Entrance

Venue exploration with interactive information hotspots

Process

- Strategy + Design Development

Discover

| User Interviews

Qualitative user interviews were are documented here to further gauge consumer insights, values and needs for the microsite portal.

| User Interviews

Findings/Insights

Insights culled from several users surveyed during the informal user interview research process resulted in actionable UX Design considerations for the Afterlight interface.

Most users were foremost interested in venues dealing with either music or food or seasonally relevant outdoor locales. This revelation heavily weighted upon the prominent usage of the dining tab on the main navigation bar as well as an increased incidence of these veins of outings on the things to do as well as featured venues pop-outs.

Secondly, some of the users stated that they find out about most of their events through newsletters sent to their email, or even through their social connections. Taking this in account, it was important that this website featured a newsletter signup. And, I also wanted to leverage the power pre-existing platforms such as Meetups or Eventbrite to pull information about either meeting group or ticket booking opportunities about the locale on the information page of each venue.  The thinking here is that a user could type in a keyword search in reference to a group, social connection or outing/venue of interest that they are already familiar with and find one's similar to it in the vicinity as well.

Another aspect brought to light was to take into consideration culturally relevant event postings for the region.  One respondent noted that he particularly enjoyed Caribbean musical selections and expressed interest in event postings of this nature.  While most of the participants surveyed were single or even international transplants and interested in venues where they could meet others and get familiar with the surroundings. This highlights the need to conduct further demographic research about the region and who would be primarily visiting the Afterlight web portal to offer the most relevant and popular postings through the quick access featured events tabs to efficiently serve user interests and desires.

| Market Analysis

| Market Analysis

Here I identified products or services to be utilized mainly as solution space precedents and potential integrations with Afterlight.

| Affinity Mapping

After performing interviews and market research, affinity mapping was performed to generate groupings of subjects for product integration.

| Affinity Mapping

| Persona

|Persona

After culling knowledge from research, interviews as well as market synthesis touchpoints, I developed a  persona to enable empathetic insights and perspective about proposed user motivations and needs for this type of events microsite.

| Prioritization Matrix

After performing interviews and market research, affinity mapping was performed to generate groupings of subjects for product integration.

| Prioritization Matrix

Develop

| Information Architecture

I mapped out a general overview of the system architecture detailing the parent as well as child interactive elements for the Afterlight microsite.

| Information Architecture

| User Flow

| User Flow

| Style Guide

This style guide displays the fonts, logos, colors and main interactive buttons and components for Afterlight.

| Style Guide

| Wireframes - Desktop

| Wireframes - Desktop

| Wireframes - Mobile

Here I identified products or services to be utilized mainly as solution space precedents and potential integrations with Afterlight.

| Wireframes - Mobile

| Wireframes - Virtual Reality

| Wireframes - Virtual Reality

Main Scene - Homepage

Main Menu - Search + Events Calendar

Main Menu - Immersive Venue Environment

Deliver

| Usability Testing

I aim to investigate the user’s accessibility, affective response and perceived value of the Dressing Room fashion ecommerce portal.

| Usability Testing

| Reflection

| Reflection

Afterlight demonstrates how a specialized microsite offshoot of a main events website for a locale can be utilized to assist with efficient event discovery, cultural exchange/community building along with providing a business marketing boost by catering to select demographics.

While this use case is demonstrated for the city of Philadelphia, this is in effect a white label solution template that could be utilized for any urban center digital portal in similar subject veins.