Case Study
Fort Lauderdale Beach Activities: Landing Page
Problem / Objective:
The large world-wide sites don’t cover all the little local things people can do in Fort Lauderdale. The local Beach Activities needed a place for people to discover all they have to offer.
Ideation:
Created a user type profile, and “how might we help” statement. Briefly researched the competition for best use practices. Then brain-stormed with a mind map of ideas to help narrow down the best concepts for the problem and objective.
Sketches:
Created various wireframe sketch ideas, 4 different desktops, a tablet, a mobile design, and some logo ideas.
Mood Board & Photo Library:
Collected some imagery from Unsplash to use in a mood board. This was used to assist in brain storming activities and colors for a provisional style tile and a Photo Library for the site. I looked for images that were both related to the activities, and prominently using the colors of the beach. I also looked for activity images that were revitalizing and energizing, and some that were relaxing to enhance the feel and mood of the site.
Final Style Tile:
Using the colors from the mood board and the photo library, I created a color and font style for the site. I wanted a modern easy to read font for the site headings and body of the site. But decided to use a fun retro font for the logo title. I chose to use the colors of the sand as a base, and the sky as a main brand color. This allows the teal colors from the water imagery to compliment them. I Illustrated the logo to include the iconic beach wall with a moving rainbow light, then limited the colors to match my part of the spectrum. Finally collected some icons from The Noun Project; and edited a few to make them work with my menu item and colors.
Wire Frames:
Using the sketched wireframes, created low-fidelity wire frames with Figma. I created a couple different versions of the landing page and added some activity cards below. After creating a mobile version, which required me to think very differently, I decided to use the same style of activity card for the desktop version. This would allow the site activities to scale easier depending on the width available from one for mobile, two for tablets or three columns for desktop.
Final Hi-Fi:
I went through several iterations from the low-fi wireframes once I started creating the hi-fi versions. After receiving feedback from several people, I finalized a Desktop, Mobile & Tablet version of the landing page. And created an Activity page sample for both Desktop and Mobile, along with a pull-down menu for Mobile.
Final Thoughts:
At this point, I would want to build out a couple prototypes for testing. But I would also be willing to present the Final Hi-Fi versions to target users for feedback. To see how people may respond to my designs would allow me to iterate and improve.
Interested in a similar User Experience or Interface Web Design? Contact me today for a free quote: http://www.DuaneDehnert.com
