top of page

WEBSITE UI/UX DESIGN - CATCHLIGHT STUDIOS

logo_cathlight studios.png

Founded in Los Angeles in December 2019. It's an independent production company of five very experienced producers. It's a start up company with a small group of people. I work with a developer and the business partners.

Service

Website

Role

Research, wireframe, prototype, visual design, illustration

Client

Catchlight Studios

Tools

Figma, Adobe Xd, Adobe Illustrator, Adobe Photoshop

Location

Los Angeles, CA

Date

6, 2019 - 8, 2019

catchlight_logo on index page.png

GOALS & CHALLENGES

My clients wanted an easy to navigate, simple and clean website to showcase their new production studio.

The challenge was to present it in colorful, fun and unified brand that reflected Catchlight’s mission to create four quadrants, all audience entertainment for a worldwide audience using the limited content available as the company had just launched and did not have much content available yet to showcase.

PROBLEM SOLVING

Before I took this project, the developer did a rough version of the website. This allowed me to troubleshoot before the redesign of the website:

  • There was only a big logo on the landing page which looked empty.

  • The second page was the navigation menu on top of the landing page without much content underneath.

  • There were many clicks on the team page.

  • It was hard to go back to other pages once you clicked on the navigation menu.

  • There was only a black and white color scheme throughout the whole website (each business owner’s photo was black and white as well that they said the photo looked like obituaries lol, but they didn’t want to use colored photo either).

For communicating with my customers with non-design backgrounds, I found some well-designed websites to show them for design direction.

I discussed the solutions with my clients and then shared what we agreed upon with the developer:

  • Change the business partners' photo to different background color but still keep the portrait to black and white color.

  • Put the logo and navigation menu on the landing page together.

  • I also had a hamburger menu icon on the top corner of each page for easy navigation.

  • The navigation menu category is separated around of the landing page, because the navigation menu didn’t have many categories.

  • I planned to design scroll down pages for easy updates later on, but my customers strongly preferred to keep the pages still. Therefore, I did the sitemap below.

SITEMAP

There are only 2 pages that have to be scroll down for easy updates: news and projects. All other pages will keep still. We also tested the paper sitemap with a few people, and they said it is very easy to navigate every page with the hamburger menu.

Sitemap_Catchlight Studios.png

SKETCHES - LOW FIDELITY WIREFRAMES

After we confirmed the design direction and sitemap. I started to sketch some wireframes. I ended up with 2 options.

Sketches wireframe_Catchlight.png

HIGH FIDELITY WIREFRAMES

Option 1: I got inspired by the video camera screen to designed the layout. The navigation bar as the video camera screen layout. It stays still when scrolling down or up of the page as well. The red dot as the recording note (can makes it flashing as an option) indicate which page you are browsing.

Feedbacks: My customers really love this design, but it's hard to update news or add more categories later on.

Option 2: I moved the navigation bar on left and right sides which is easy to add more categories later on. I put the hamburger menu on the top left corner to help users easily navigate to any page no matter which page they are browsing.

Problems: My customers love the colors and styles, so they chose this design to continue build their website.

UI KIT

Finally, with the high-fidelity wireframes in place, I created a style guide to serve as a guide for the elements utilized designs. This is a living AI document that can continue to be updated as the website is further developed in order to ensure that the style and branding are consistent across the site.

UI Kit_Catchlight.png

NEXT STEPS

I would like to further develop the "PRESS" and "PROJECTS" pages, but the developer was pretty busy while collaborated with me making the website. So he did simple versions of the 2 pages and didn't have time to update the logo and other elements on the live website. It's a big challenge to collaborate with the developer while work remotely. However, my clients are happy with the final design. They will find a new developer to update the website in the near future.

  • LinkedIn
  • Instagram
  • Dribbble
  • Grey Vimeo Icon
  • gmail
bottom of page