Greenlight Creative
Brief — Build a website that shows users the power of event lighting to create emotional experiences
R O L E
Project Lead
S K I L L S
UX/UI Design, Visual Design
D A T E
Jan. 2018 - Nov. 2018
T E A M
Jess Leftault (Designer)
Becky Solomon (Developer)
Context
Greenlight Creative is a Portland based event lighting company that works with a broad audience. President and Creative Director Dwayne Thomas approached me in 2018 to redesign his Wordpress website, originally designed in 2008.
It was clunky by today’s standards and failed to showcase the amazing photography he had from the thousands of events Greenlight had worked over the years. The best way to display the photography became central to how we approached the redesign.
Questions
How do we make it easy for users to sort through hundreds of images?
How do we make the site usable for a wide variety of clients who are looking for different information?
How do we make the site more than a portfolio?
Analyzing the User
Our user’s knowledge base is the best scale to understand them. Some of our users are well-versed in event production while others are coming to the process for the first time.
User Flows
One thing is typically true of our users:
They know the type of event they are planning when they arrive at the site.
To filter users, they are presented with four possible answers to the question:
“What kind of event are you planning?”
This takes them to a curated portfolio of Greenlight’s past work most relevant to their event type.
Typography
The content of Dwayne’s site was full of elegant and impeccably lit spaces and he is proudly verbose when he writes about his company. While we were able to edit his verbiage down, we also needed a clear and simple font that was easy to read.
To bring the elegance and the wordiness together, I paired two fonts.
Quincy CF is a playful serif with delicate swashes and rounded edges. It makes the site feel a little bit soft and plays off the elegance of the images.
Montserrat’s simplicity was a perfect contrast to the elegance of Quincy CF. It paired well with the logo font, chosen by another designer.
Typography Samples. Click for larger view.
Color
With an established logo, we started the process with the only color in the brand’s palette, a brilliant and loud lime green.
While the green would work great for highlights, it was hard to read white text on it and we lacked some neutral tones.
I added in a playful purple to pull the viewer’s eye to a button or call to action and a dark and light grey that could be used over large swaths of the canvas.
Wireframes
The homepage would serve as a gateway to all of the amazing content we had to showcase.
In our high fidelity wireframes, I used a large circle to imitate a spotlight to compartmentalize and organize content.
Icons
Giving our users cues to move through the site was crucial to our plan. Event lighting is a pretty niche field, so custom icons had to be designed.
Envision It
The Envision page is the highlight of the whole site. This interactive page allows users to sort through hundreds of images using the specific details of their event.
Answers
Users are first sorted by a trait they likely share: they know what type of event they are planning when arriving at the site.
Users can get to the content they need right from the homepage. Unique icons and a punchy color palette lead them to the content we want them to see.
The Envision page allows users to filter their images by specific criteria that matches their event. They can look at examples in any color palette, aesthetic style, and emotional response. They can learn about the fixtures in Greenlight’s collection or see how light has been used in their venue.