Party On The Weekend

Promotional website
for an early stage events discovery app

The Problem // Context

Party on the Weekend will soon be launching a mobile app for finding music related events and venues based on music taste and listening history. They need a website to promote this product to potential users.

At kickoff we were given:

Details on problem space
Competitive analysis
Current app screens
User info & personas

Goals

1) Generate interest in this app and it's features

2) Collect emails to gauge interest, and send notifications upon launch

Team

3 UX/UI Designers

1 Client / Stakeholder

Timeline

4 Week,

short-term contract

Methods

User Stories, Persona Building, Project Planning, Sketching, Wireframe, High Fidelity, Responsive Design, Prototyping

User Insights

Week 1 of 4

Creating User Stories from the 4 Personas
to better understand users wants and needs

*Insights created from personas that were provided by POTW
(Summarized to show main points)

PARTY ANIMALS

Always looking for the next party

High energy music
Crowded venues
Dancing & socializing
EDM, Hip-hop, pop
Vibrant places, energetic music, lively crowd

AS A PARTY ANIMAL:

I want to find a vibrant atmosphere

so that I can have an unforgettable, high energy night out.

I want to see reviews, ratings and info for venues

so that I can choose a place to go to that has a lively crowd and energetic music.

MUSIC ENTHUSIASTS

Love the vibes

Passionate (about music) discovering artists and venues
Wide range of tastes - exploring niche or underground scenes
More intimate venues
Jazz clubs, speakeasies, acoustic cafes

AS A MUSIC ENTHUSIAST:

I want to find gigs, open mic nights and other niche music events

so that I can cater my hangout spots to my eclectic music taste.

I want to find hidden gems in the music scene near me

so that I can connect with other musicians and music enthusiasts that have similar interests to me.

SOCIAL BUTTERFLY

They know everyone

Enjoy meeting people
More interested in the atmosphere and people
Love high energy places
Are always on the hunt for new opportunities
Want to be in the know

AS A SOCIAL BUTTERFLY:

I want to have real time updates on events, gatherings and parties nearby

so that I can be in the know for new opportunities for socializing.

I want to see info about the crowd // demographics at different venues

so that I can meet like-minded individuals & have memorable experiences.

I want to invite friends to join me at suggested venues through the app

so that I can easily coordinate social gatherings.

I want to be able to make group reservations at venues

so that I can easily plan gatherings with large groups of friends

FITNESS LOVER

Work hard so they can play hard

Combine fitness (activity) and music
Fitness classes, dance studios, yoga studios, or outdoor fitness venues
Hunting energetic music to stay motivated during workouts

AS A FITNESS LOVER:

I want to find fitness activities with music (like dance studios)

so that I can be active while enjoying music that I like.

I want to find places that have healthy food and drink options

so that I can enjoy music while refueling with nutritious choices.

I want to discover fitness studios // classes with energetic music playlists

so that I can stay motivated during my workouts.

Week 1 of 4

App Enhancement & Scalable Website

We created 2 mood boards
1) Feedback on current visual design and functionality of the app
2) Website ideation - - - needs to be scalable alongside app evolution

Before:
Website before our redesign, highlighting UI of the app

1) UI Feedback

Current feel is very utilitarian and lacks party-centric personality needed to reach target user
Advocated for dark mode to suit nightlife context and enhance user experience
Suggested adding a vibrant secondary color for a lively, party-oriented feel

Screenshot from mood board:
Suggesting secondary color and dark elements

2) Website Ideation

Designed a layout where sections highlight different app features, adaptable to future app updates
Provided options for possible email capture/CTA locations for user engagement and data collection
Suggested at the end of our 4 weeks leaving them with a plan and designs for A/B testing

Week 2 of 4

Visual Ideas

Scrappy hi fi design sketches
- meant to cast a big net to define preferences for visual design direction

3 Designers iterated ideas of possible designs for each of the site pages

(Designer) McCain focused primarily on the blog and creating a header and footer that was responsive across all devices.

Header / Footer & CTA

(Other Designer) Michelle and I primarily focused on generating different visual directions for the home page. Here is one of her directions on sections for the main page:

Visual Iterations

In addition to the home page, I also came up with options for the blog. Here is one of my main page directions and one option we ended up iterating on later for the blog:

Blog

Week 2

Feedback from Party On The Weekend:

We received comprehensive feedback from the founder and two guest UX designers - these are some main points:

Less device mockups (1-2 max)
More imagery that captures personality of users and the journey of using the app
Loved copy - “Find Your Weekend”
Prefer CTA/email capture at top and bottom of page versus every section
For blog - no trending column yet (1-3 featured posts with a search/filter)

They loved major themes within each of our work:
McCain's brutalist style, minimalism, and the black and white design created a vintage feel
Michelle's images captured the overall story of the users and also the story of the app.
For my design they liked the idea of less device mockups, the over all layout and usability.

...The hard part would be creating cohesiveness and blending all three...

Week 3 of 4

Iterating & Creating Cohesion

The most difficult of the project

Iterative Design Process

POTW team appreciated unique aspects from each of the different visual approaches from our varied designs

Despite individual design differences, the team had to find a way to collaboratively adopt elements from each design to create a cohesive outcome

Given such varied approaches, there was a need for strategic task delegation and coordination to integrate diverse aesthetics into the final design

Challenges // Learning
(Team Based):

The week team members were dealt unruly life events, highlighting the need for adaptability and flexibility in managing project dynamics.
The above challenge served as a valuable learning experience - emphasizing the importance of communication, empathy, and flexibility in project environments.

Challenges // Learning
(Personal):

Because there was a delay in ability to collaboratively work together, I started to design aiming for a more
party-centric aesthetic.
I struggled to showcase app features without relying on apps screens. We didn't have access to any assets and it was a overwhelming coming up with content without much direction.

I realized is the importance of highlighting the variety of venus someone could find through the app - this led me to try and find inclusive imagery of different kinds of environments (not just bars and clubs, but depicting brass instruments, pianos, etc.)

Contact and Blog Page
(Collaboration - McCain and I)

McCain tweaked the contact page to embrace some similar graphics and also softened up some of the edges throughout the design.
We were also both double teaming the blog page design and working together to make things responsive

Collaboration
(Michelle and I)

In the later part of the week we overcame some of the delays

Michelle and I were responsible for collaborating on the main page design, and with scheduling delays it started to get a little stressful

However, towards the end of the week Michelle created custom vector graphics that effectively represented the apps essence

These new assets injected enthusiasm and momentum into the project

Constraints

With consideration for creating a fully responsive design, our time constraints for this weeks deliverables, and the goal for an MVP that can be reiterated later - we needed to carefully manage design iterations (even though were were having a lot of fun!)

Because of this we we documented and organized unused designs, ideas, and assets - preserving them for future use

Week 3

Feedback from Party On The Weekend:

"MUSIC IS YOUR COMPASS" is strong copy - It explains the journey of finding the weekend with the music taste being the guiding factor
These iterations feel more party-centric
Interactions are modern and standard and the user would be able to find their way around
want to see more copy ideas for main page sections
Blog updates were successful, but would love to see more option/filter ideas

Week 4 of 4

Final Deliverables / Handoff

Final design handoff and other resources turned in:

I primarily worked on copy iterations and organizing the design graveyard (all our iterations, assets, and other ideas)
McCain went through and simplified things for responsiveness and for the developers, as well as leaving thorough notes of our design intentions and extra ideas for POTW and their developers
We wrote out a few ideas for A/B testing and gave plenty of options for different designs and possible copy changes
The blog's search got cleaned up and we added a tagging system to be able to better filter subjuects

Full prototype below

Party On The Weekend

Promotional website for an early stage events discovery app

The Problem // Context

Goals

Team

Timeline

Methods

User Insights

Week 1 of 4

Creating User Stories from the 4 Personas to better understand users wants and needs

*Insights created from personas that were provided by POTW (Summarized to show main points)

Week 1 of 4

App Enhancement & Scalable Website

We created 2 mood boards 1) Feedback on current visual design and functionality of the app 2) Website ideation - - - needs to be scalable alongside app evolution

Before: Website before our redesign, highlighting UI of the app

1) UI Feedback

Current feel is very utilitarian and lacks party-centric personality needed to reach target user

Advocated for dark mode to suit nightlife context and enhance user experience

Suggested adding a vibrant secondary color for a lively, party-oriented feel

Screenshot from mood board: Suggesting secondary color and dark elements

2) Website Ideation

Designed a layout where sections highlight different app features, adaptable to future app updates

Provided options for possible email capture/CTA locations for user engagement and data collection

Suggested at the end of our 4 weeks leaving them with a plan and designs for A/B testing

Week 2 of 4

Visual Ideas

Scrappy hi fi design sketches - meant to cast a big net to define preferences for visual design direction 3 Designers iterated ideas of possible designs for each of the site pages

(Designer) McCain focused primarily on the blog and creating a header and footer that was responsive across all devices.

Header / Footer & CTA

(Other Designer) Michelle and I primarily focused on generating different visual directions for the home page. Here is one of her directions on sections for the main page:

Visual Iterations

In addition to the home page, I also came up with options for the blog. Here is one of my main page directions and one option we ended up iterating on later for the blog:

Blog

Week 2

Feedback from Party On The Weekend:

We received comprehensive feedback from the founder and two guest UX designers - these are some main points:

Less device mockups (1-2 max)

More imagery that captures personality of users and the journey of using the app

Loved copy - “Find Your Weekend”

Prefer CTA/email capture at top and bottom of page versus every section

For blog - no trending column yet (1-3 featured posts with a search/filter)

Week 3 of 4

Iterating & Creating Cohesion

The most difficult of the project

Iterative Design Process

​​POTW team appreciated unique aspects from each of the different visual approaches from our varied designs

​

Despite individual design differences, the team had to find a way to collaboratively adopt elements from each design to create a cohesive outcome

​

​Given such varied approaches, there was a need for strategic task delegation and coordination to integrate diverse aesthetics into the final design

Challenges // Learning (Team Based):

The week team members were dealt unruly life events, highlighting the need for adaptability and flexibility in managing project dynamics.

The above challenge served as a valuable learning experience - emphasizing the importance of communication, empathy, and flexibility in project environments.

Challenges // Learning (Personal):

Because there was a delay in ability to collaboratively work together, I started to design aiming for a more party-centric aesthetic.

I struggled to showcase app features without relying on apps screens. We didn't have access to any assets and it was a overwhelming coming up with content without much direction.

​

I realized is the importance of highlighting the variety of venus someone could find through the app - this led me to try and find inclusive imagery of different kinds of environments (not just bars and clubs, but depicting brass instruments, pianos, etc.)

​

​

Contact and Blog Page (Collaboration - McCain and I)

McCain tweaked the contact page to embrace some similar graphics and also softened up some of the edges throughout the design.

We were also both double teaming the blog page design and working together to make things responsive

Collaboration (Michelle and I)

In the later part of the week we overcame some of the delays

​

Michelle and I were responsible for collaborating on the main page design, and with scheduling delays it started to get a little stressful

​

However, towards the end of the week Michelle created custom vector graphics that effectively represented the apps essence

​

These new assets injected enthusiasm and momentum into the project

Constraints

With consideration for creating a fully responsive design, our time constraints for this weeks deliverables, and the goal for an MVP that can be reiterated later - we needed to carefully manage design iterations (even though were were having a lot of fun!)

​

Because of this we we documented and organized unused designs, ideas, and assets​ - preserving them for future use

Week 3

Feedback from Party On The Weekend:

"MUSIC IS YOUR COMPASS" is strong copy - It explains the journey of finding the weekend with the music taste being the guiding factor

These iterations feel more party-centric

Interactions are modern and standard and the user would be able to find their way around

Promotional website
for an early stage events discovery app

Creating User Stories from the 4 Personas
to better understand users wants and needs

*Insights created from personas that were provided by POTW
(Summarized to show main points)

We created 2 mood boards
1) Feedback on current visual design and functionality of the app
2) Website ideation - - - needs to be scalable alongside app evolution

Before:
Website before our redesign, highlighting UI of the app

Screenshot from mood board:
Suggesting secondary color and dark elements

Scrappy hi fi design sketches
- meant to cast a big net to define preferences for visual design direction

3 Designers iterated ideas of possible designs for each of the site pages

POTW team appreciated unique aspects from each of the different visual approaches from our varied designs

Given such varied approaches, there was a need for strategic task delegation and coordination to integrate diverse aesthetics into the final design

Challenges // Learning
(Team Based):

Challenges // Learning
(Personal):

Because there was a delay in ability to collaboratively work together, I started to design aiming for a more
party-centric aesthetic.

Contact and Blog Page
(Collaboration - McCain and I)

Collaboration
(Michelle and I)

Because of this we we documented and organized unused designs, ideas, and assets - preserving them for future use