︎

SOM Website Redesign


I led a redesign of SOM's website to express the company’s design ethos and provide a flexible, enduring platform for its content. This would help drive new business and recruit top talent.

All images courtesy SOM and AREA 17


The Challenge


SOM’s website needed a better structure to effectively tell the company’s story.

Flat, rigid page templates were preventing my teammates from creating an engaging narrative experience that could attract clients and talent to SOM. On top of that, the website’s homogeneity was disorienting users, and its lack of hierarchy was overwhelming them with options.

We needed to create a website that would not only resolve the issues of the existing product, but also reflect SOM's ethos as a design firm. That meant creating a website that would be ambitious, forward-thinking, clear, legible, sustainable, and enduring.
som.com, circa January 2017


A Plan of Action


Before the project began, I surveyed staff and collated prior feedback on the website to gather requirements and create a vision for a redesign. This was turned into a memo to support our proposal and budget for the project.

With our plan approved, I wrote an RFP that we issued to a small group of digital product agencies. I reviewed agency proposals and helped SOM select and hire AREA 17, negotiating the project’s scope, budget, and schedule with their team.

I became SOM’s project manager for the redesign, working to build teams and define staff roles before the project started. Later on, I continued shaping the vision for the product, provided detailed feedback on deliverables, ran meetings, negotiated differences between SOM and the agency, and signed off on agency work.


Designing the Solution


At the outset of the project, we confirmed the website’s objectives: to attract new business, recruit top talent, strengthen SOM’s leadership in the design industry, and establish a sustainable and enduring digital platform for the company. We also confirmed our target audiences: prospective clients and employees, people and businesses in the industry, and SOM’s current employees.

To achieve our objectives with SOM’s target audiences, we figured that the website would need to 1) surface relevant work, 2) promote our ideas, 3) express our culture and values, 4) showcase what we’ve been doing recently, and 5) provide clear points of contact. Then, for each of these five tasks, we generated hypotheses to test through the architecture and design of the site. For example, to surface relevant work, we thought that the website should:

  • Use Work to organize Expertise and Project pages, and lead with curated content to encourage discovery.
  • Enable discovery by presenting related content on Work, Expertise, and Project pages.
  • Have a focused project list on Expertise pages, with the ability to cross-filter results.
  • Have a more robust search tool.


Project Archive: Hypotheses, Wireframes, and Designs


Below is a selection of key pages that illustrate our approach to the website redesign.

Navigation and Sitemap

  • Limit navigation to five entry points.
  • Create a Work section, add it to the navigation, and put Expertise and Projects under that section.
  • Add a Careers entry point to the navigation.
  • Organize Ideas around topics.
  • Add a dedicated Events filter under News.
  • Add Office landing and detail pages under About.
  • Add a newsletter sign-up entry point to the footer.
  • Add Contact, News, Press, and Careers links to the footer.





Home

  • Lead with a statement about SOM.
  • Remove project carousel and expose curated content.
  • Provide a clear distinction between curated content, Latest News and Upcoming Events.




Home – Intro

Home – Landing




Work

  • Use Expertise as an organizational principle for Projects.
  • Expose Expertise navigational entry points.
  • Provide quick access to Project and Client Story index through “Browse All Work” pane.
  • Include filtering options for “Browse All Work” pane, and an index view for better scanability.




Work – Landing

Work – "Browse All Work" pane




Expertise Detail

  • Lead with Expertise-specific curated content, including projects, case studies, quotes, initiatives and other highlights.
  • Include Expertise-specific “Browse All Work” pane.
  • Add Expertise-specific contact module.




Expertise Detail

Expertise Detail – “Browse All Work” pane




Project Detail

  • Remove image carousel and accordion menu to expose content.
  • Create an immersive narrative experience using different content types (images, videos, quotes, metrics, awards, and news).
  • Enable discovery by presenting related content.




Project Detail

Project Detail – Chapter Navigation




Search

  • Create a more robust search tool.
  • Provide suggested results as user types.
  • Add filter by content type for search results.
  • Add supporting visuals for search results.




Search – Autocomplete


Search – Results