West Hollywood Vision 2050

While working with the creative agency Boundary Digital, I led design for West Hollywood's Vision 2050 project. Vision 2050 showcases the city's plans for urban and community development over the next 30 years.

West Hollywood has always been a beacon of freedom and individuality. As an LA native, it was an honor to work with such an iconic client. I knew that the visual design would need to reflect the city's colorful and inclusive identity.

ROLES

UI/UX, Branding

TOOLS

Sketch, Adobe, Zeplin

DELIVERABLES

Desktop/Mobile Mockups

INTRODUCTION

Getting to know the project.

Project Brief

  • Design a mobile-responsive website that includes a landing page, about page, contact page, and links to important sites such as West Hollywood's Flickr gallery.
  • The project also required mockups for a main blog and blog detail page.
  • Problems

  • How can we educate people on the Vision 2050 project in a clear and visual way?
  • What is the best type of imagery to use to reflect an inclusive and diverse demographic?
  • How can we direct people to subscribe to the newsletter and submit feedback?
  • Solution

  • The solution is a visual design that reflects the future of the city but is also aligned with the existing West Hollywood brand.
  • The imagery used throughout the site represents the diverse WeHo population, and was vetted by internal stakeholders.
  • Calls to action take the user further within the Vision 2050 experience.
  • Landing Page

    KEY DATA

    WeHo by the Numbers

    The City provided us with their West Hollywood Today Report 2019 - this report allowed us to get a snapshot into the people, economy, and civic society of West Hollywood.

    Key Takeaways

  • The City is a beacon for LGBT policies and services within Los Angeles - the imagery within the Vision 2050 site should reflect this.
  • West Hollywood is an entertainment and nightlife destination. The color and typography used in the final design should align with a fun and friendly brand.
  • Given the wide variety of people who interact with the city - workers, residents, tourists - the site will need an easy way to capture feedback from these different groups.
  • INITIAL DESIGNS

    Where did the design begin?

    Always Start With Options

  • Since the timeline from visual design to development was very short, I had to move right into visual design.
  • To get started, I found 4-5 sites that I wanted to use as visual inspiration in terms of their layout, color scheme, and use of graphics.
  • From these samples, I created two distinct directions for the Vision 2050 project: one that is darker and more modern, and another that is more lighthearted and playful.
  • I presented these options to internal stakeholders, and they felt the darker version was more in line with the Vision brand.
  • Option 1

    Option 2

    SELECTED SCREENS

    The Next Round of Visual Design

    Mobile Views

  • We used a full-bleed width to emphasize the images on mobile.
  • As I stated in the research, we took a lot of time and consideration in selecting the images to represent the Flickr gallery. These needed to show a wide variety of people and cultural events in the city.
  • The timeline shows key events in the Vision 2050 project, and flips to a vertical view on mobile.
  • Sample of Mobile Screens

    About Page

  • The About Page features a collage of imagery and a full-width banner that directs visitors to a survey.
  • Below the Flickr and "Submit a Document" links, there are banners that link to Instagram and the Vision 2050 blog.
  • About Page

    Vision 2050 Blog

  • The blog is where the Vision 2050 team will be able to communicate updates in the project to the community.
  • We put a green banner at the bottom that links users to the survey with a nice pop of color.
  • Blog

    Contact Form

  • The contact form is important because it allows people to send feedback and receive more details about the project.
  • We used playful copy that aligns with the fun and friendly West Hollywood brand.
  • Users are able to select from a dropdown whether they live, work, or play in West Hollywood. Visitors can also subscribe to the Vision newsletter.
  • Contact Form with Dropdown

    CONCLUSION

    Reflecting on the Project

    What Did I Learn?

  • Sometimes, simple is best. I struggled with finding a graphic for the hero section of the landing page. We decided on the 2050 watermark in the background.
  • Providing two different directions was an important step in the creative process, and allowed the team to choose the design aspects that they preferred in each option.
  • Agency: Boundary Digital

    Creative Director: George Renfro

    Return Home

    Honeybee Health

    UI/UX, COPY