UX/UI Web Design: Hollywood Offices

WEBSITE AUDIT

The current web experience

I conducted a website audit to examine the information architecture, web page content, functionality, and design aesthetic. I noted some usability issues related to the sizing, spacing, accessibility, and usefulness of various page elements. From there, I began to draft questions to help frame the direction of the redesign.

Redlined screenshots of the current website home and product pages

RESEARCH

Discovery

The first step was to get an understanding of the problem space through the perspectives of the business and the user. I also examined how competitors display writers’ rooms on their websites.

Business Research: What value does the business provide content creators that competitors cannot? At the end of the day, who are the business’s biggest threats?

Competitor Research: What sets Hollywood Offices apart from other commercial real estate companies, co-working spaces, and entertainment production studios in the business of leasing office space?

User Research: How do prospective tenants in the content creation industry search for office space? What is their criteria? How much time do they spend searching? What are their challenges? How do they decide what will be a good fit?

RESEARCH INSIGHTS

Major findings

Research revealed that a dynamic shift in the content creation business model directly influenced user behavior. The traditional “Pilot Model” produces TV shows seasonally over the course of one year. By contrast, the new “Script-to-Series Model” produces TV shows all year by incubating ideas in writers’ rooms for 1-3 months.

BUSINESS STRENGTHS

Hollywood Offices' products and services are compatible with the needs of the content creation industry.
As a small business, they have been able to tailor leases to the unique needs of each writers’ room.

COMPETITOR WEAKNESSES

For larger real estate companies, 1-3 months is too short to accommodate.
Co-working spaces that offer month-to-month leases offer little privacy for confidential ideas.

USER BEHAVIORS

Once a show is greenlit, producers have as soon as 2 weeks to find and secure a writers' room, so they must work fast.
Most website visitors are male millennials on a mobile device.

USER PERSONA

Identifying the user

The person(s) assigned to finding office space options varies from project to project. Titles include showrunner, associate producer, and production coordinator. Users with fewer industry connections are more likely to supplement their efforts with a Google search. The following persona embodies a user with a limited network tasked with quickly narrowing the search to a few viable options.

User persona of a young production coordinator who needs to find a writers' room fast

IDEATION

Identifying solutions

Most of the user’s pain points were easy to address. For the most part, Hollywood Offices’ business model was aligned with the users’ basic needs; their compatibility simply needed to be communicated more clearly.

Pain Point #1: Finding space is a challenging process. In order to narrow down a few options, users first have to know where they can look for space, learn what is available, and find out if the space meets their basic needs.

Solution #1: Communicate how Hollywood Offices makes leasing an easy process. Make sought-after information easy to find and readily available.

Pain Point #2: Teams have some minimum requirements. Short lease terms, parking, on-site security, access to a private kitchen, space to mount white boards, and nearby restaurants are highly preferred.

Solution #2: Communicate how Hollywood Offices meets those minimum requirements. Organize services and amenities with bullet points and iconography.

Pain Point #3: Nice, clean office space can be hard to find. It can be a standard for top writers.

Solution #3: Include more photos. Capture space that is clean, furnished, and naturally lit.

Pain Point #4: Leasing is an unfamiliar space. Real estate jargon can be confusing.

Solution #4. Simplify word choice. Make sure the language is easy to understand.

CONCEPTUALIZATION

Designing early mockups

Early versions of the designs incorporate high-impact solutions to the users’ pain points. Since Google Analytics indicated that most visitors accessed the website from a mobile device, we took a mobile-first approach and later user tested the prototype on mobile.

The structure of the landing page fits within the framework for long-form landing page best practices: hero, product section, benefits, social proof (testimonials, client logos), and call to action.

High-fidelity desktop and mobile mockups for the landing page, redlined with improvements

High-fidelity desktop and mobile mockups for the product page, redlined with improvements

VISUAL DESIGN

Updating the Visual Style

Some adjustments were made to the existing style guide to reflect a more reliable, accommodating, and experienced tone. We desaturated the original colors and established a clean, modern photographic style.

USABILITY TESTING

Process, Feedback, & Iteration

Users were recruited to test the website for comprehension and to see if the website addressed users' anticipated questions and concerns. Users were excited for this industry-specific web solution and responded positively to the company logos. However, they also wanted to see more images of the space and to know what to expect if they filled out the contact form.

1. Recruiting

5 users who work in the target industry were recruited to test the mobile prototype.

2. Testing

Can you describe what this website offers?
How do you feel about this company?
Have you heard of the term "turnkey"? If so, what does it mean to you?

3. Feedback

Users wanted to see more photos and floorplans.
Users misunderstood the leasing term, "turnkey."
Users expressed concern about filling out a form and not knowing when to receive a response.
Users wanted to browse current availabilities.

Landing Page Changes:

Added a section to introduce the business
Moved client logos higher up on the page to show social proof sooner
Filled each product card with an image to incorporate more visuals
Include a form success modal to help manage response expectations

Product Page Changes:

Added an introduction with a short, informative description and bulleted specs that are easy to scan
Added more high quality images of the space including private kitchenettes
Added more social proof to display what shows have been successfully created at Hollywood Offices

CONCLUSION

Reflection & takeaway

Figma is a great collaboration tool. Mid-way through the project, I transferred the work space from Sketch to Figma so that both the client and myself could make edits simultaneously. This new dynamic was a game-changer for our workflow.

Stay focused on the MVP. A lot of time was spent redesigning each screen to accommodate new features. I learned it’s more effective to establish and focus on the primary solutions that the design offers the user before building more onto the design.