Overview

|  Summary

A design that shows my understanding of how to create an attention grabbing landing page.

|  Project Scope

Beyoncè and bowl project scope

|  Problem

A bowling alley needed a landing page to promote a live Beyoncè performance.

|  Solution

Designed an enticing, simplistic, and modern landing page that utilized color psychology and microcopy.

Research

|  Who are the Users?

My research helped me to determine that the majority of Beyoncè fans are between the ages of 25-40 years old. This allowed me to start brainstorming the aesthetic of the landing page. Since this event would be for an older crowd, I wanted to convey romance and maturity.

|  What do They Want?

This event is a once in a lifetime opportunity (imagine being this close to your favorite musician). The users want to be able to easily scan important information on the landing page. They also want to know where to click in order to buy tickets immediately.

Design

|  Color Psychology

The primary color I selected for this design was pink. Pink was the best option for this concept because it symbolizes passion, nostalgia, and creates urgency. I also was inspired to use pink to create a sense of familiarity because Beyoncè's "Formation Tour" incorporated pink as a brand color.

color pink and hex code

|  Font Style

I decided to use Staatliches as my header font. This was because it's a font with strong bold letters that are easy to read.Likewise, I used Overpass as my body font because of readability. Since this font is san-serif, users are able to read and comprehend information faster.

staatliches and overpass font styles

|  Iteration #1

I started my design process by sketching and writing ideas. I began to think about how I wanted my header text to look. I decided to go with a neon theme because throughout this project I kept thinking about galaxy bowling. I also began to sketch my landing page layout. I wanted to have a scrollable web page that contained three sections. For each one of these sections, my plan was to create vector drawings that would direct the user's attention to call-to-action buttons and important text.

concept 1 sketches

|  Iteration #1 Wireframes

After sketching, I decided to create a few low fidelity wireframes to get a better idea of how I wanted to layout each section.

concept 1 process wireframes

I then began to play with font concepts and finalized vector drawings.

Concept 1 fonts and vector

|  Iteration #1 High Fidelity

This is the first iteration of the landing page design. The page has three sections.Section one contains the venue name, date, and minimum age for entrance. The second section offers a call-to-action for users to buy tickets. The last section offers users the ability to subscribe to the bowling alley's weekly newsletter.

Concept 1 final

|  Iteration #1 Feedback

The feedback I received for my first iteration was to condense information into just one section to limit scrolling. After thinking more about the user, I realized they don't care about information that doesn't discuss Beyoncè.

Concept 1 feedback

|  Iteration #2

For the second iteration of the landing page design, I decided to focus on condensing information. After that, I added depth to my design by placing text behind Beyoncè's head. Finally, I adjusted the shape and size of my call-to-action button.

Concept 2 process

|  Iteration #2 Feedback

Concept 1 feedback

|  Final Design

Concept 1 process
Top