Website Design

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.

Client

Catchlight Studios

Role

UI/UX designer, visual designer & illustrator

Team

7 stakeholders, 1 UI/UX designer, 1 developer

Tools

Figma, Adobe XD, Adobe Illustrator, Adobe Photoshop

Location

Los Angeles, CA

Date

6, 2019 - 8, 2019

Goals & Challenges

The goal was that my clients wanted an easy-to-navigate, simple, and clean website to showcase their new production studio.

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

Problem Soving

Before taking on this project, the developer created a rough version of the website, which allowed me to troubleshoot before the redesign.

The landing page had only a large logo, making it look empty.
The second page consisted of a navigation menu on top of the landing page with little content underneath.
Clicking on the team page required multiple clicks.
Additionally, it was difficult to return to other pages after clicking on the navigation menu.
The website had a black and white color scheme throughout, including the business owners' photos which they felt resembled obituaries. Despite this, they did not want to use colored photos.

To communicate with clients who do not have a design background, I found some well-designed websites to show them for design direction.

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

Put the logo and navigation menu together on the landing page.
I also included a hamburger menu icon on the top corner of each page for easy navigation.
The navigation menu categories are separated around the landing page because there aren't many categories.
Change the business partners' photo to a different background color but keep the portrait in black and white.

I had planned to design scroll-down pages for easy updates later on, but my clients strongly preferred to keep the pages static. Therefore, I created the sitemap below.

Sitemap

There are only two pages that need to be scrolled down for easy updates: news and projects. All the other pages will remain static. Additionally, we tested the paper sitemap with a few people, and they confirmed that it is very easy to navigate every page using the hamburger menu.

Sketches - Low Fidelity Wireframes

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

High Fidelity Prototypes

Option 1

I was inspired by the video camera screen to design the layout. The navigation bar has the same layout as the video camera screen, and it stays still when scrolling up or down the page. The red dot acts as a recording note (it can be made to flash as an option) to indicate which page you are browsing.

Feedback: My clients really love this design, but it's difficult to update news or add more categories later on.

Check out the interactive prototypes

Option 2

I moved the navigation bar to the left and right sides, which makes it easy to add more categories later on. I also placed the hamburger menu in the top left corner to help users navigate to any page, regardless of which page they are on.

However, my clients love the colors and styles of this design, so they have chosen to continue building their website with it.

Check out the interactive prototyes

UI Kit

Having established the high-fidelity prototypes, I developed a style guide to ensure consistency in design elements. This living document can be continually updated as the website evolves, helping to maintain a cohesive style and branding throughout the site.

Next Steps

I would like to further develop the "PRESS" and "PROJECTS" pages, but the developer was quite busy while collaborating with me on making the website. Therefore, he created simple versions of the two pages and did not have time to update the logo and other elements on the live website. It has been challenging to collaborate with the developer while working remotely. However, my clients are happy with the final design and plan to hire more people to update the website in the near future.

Back