Dexter Ferguson's Portfolio

Trap Events

 
logo-header-11.png
 
 

TrapEvents

A Design Sprint 

I'm part of a team of designers and developers. We all live in different cities, but have a shared interest in trap music and events. During one of our weekly brainstorming calls we expressed frustration with the challenges of finding these events in our area. We decided to host a design sprint one weekend. We divided our duties amongst 3 teams: Marketing, Engineering, & Design. I will detail how TrapEvents.com was designed.


Client

Lomlou

 

Skills

UI/UX, HTML, CSS, Bootstrap, Product Design

 
 
 
hero-macbook-mock.png
 
 

Challenges

In search of events related to trap music, the challenges around this experience quickly became clear :

  • There are many platforms to share events, therefore requiring the user to independently search each one to find them
  • Unclear what the appropriate search terms are when searching on general event sites (facebook, eventbrite, etc) that lack context 

Primary Objective

Design a website that is the hub for all trap events – removing the friction associated with finding these specific type of events


Goals

What we were hoping to achieve by developing TrapEvents.com was an improved experience for those in search of these type of events, and be the cultural hub for a trap lifestyle. This would prevent someone from having to search multiple sites, improve event awareness and interest for hosts,   

 
trap-events.jpg
 

User Flows

During our build session we were able to identify all of the problems that we were trying to solve. This helped me better understand the user and subsequently drove the decisions behind the user flow. Adding features adds UX complexities. Building out these user flows helped me identify these complexities. We initially wanted to include all of the features at launch, but ultimately decided to take a more agile approach and launch one key feature at a time. 

 
 
user-flow.png
 
 
 

Wireframes

Low-Fidelity

By creating low fidelity wireframes with all of the features we were able to better visualize problematic areas that needed further exploration prior to launch. This made it easier to design a launch version that had less functionality, while still maintaining a good user experience.

 
 
Screen Shot 2017-08-30 at 12.54.44 PM.png
 
 
 

Hi-Fidelity

We also built the high-fidelity wireframes with the understanding that not all the features would be included at launch. This helped us visualize the final site design and prioritize which feature(s) to develop first.

 
 

Development Process

Progress

TrapEvents.com was built using Bootstrap. A design sprint requires rapid progress and using bootstrap allowed us to develop quickly. I was responsible for all of the front-end development and worked closely with a member of our team who is a master at back-end. The following will show you how we went from a default Bootstrap site to the fully customized version that it is now.

Early versions of the site had a search bar that was very large, lacked a search button, and had a lot of drop shadow. Based on user feedback its appearance was confusing and wasn't immediately recognizable as a search bar. We addressed this issue in the most recent version of the site by reducing the overall size, adding a proper search button, and reducing the heavy drop shadow.

 
 

Development Challenges

Throughout the whole building process there were a number of development obstacles that needed to be tackled. Often times it wasn't until the deployment of the live site that I noticed critical ui/ux issues.

 

This walkthrough demonstrates the new hover state for the details buttons and responsiveness of the events feed.

 

Next Steps

  • User testing

  • Build out the filter function

  • Build the 'add event' process