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
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,
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.
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.
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