GreenbergFarrow

GreenbergFarrow is an architecture, development, and engineering firm that works on a variety of commercial, residential, and public projects. I worked with Type/Code to redesign their portfolio site.

 

My Deliverables

  • Wireframes

  • Content Model

  • QA

Timeline

  • 8 weeks

Problem

5 years before this project, Type/Code designed and developed the previous version of this site. Since then, GreenbergFarrow’s service offering has expanded to include a greater focus on international projects, development, and engineering services they offer in addition to architecture. The new site needs to showcase their updated strategy in addition to their architecture services.

Project Summary

I was brought onto this project after most of the discovery and planning had been completed. The majority of my time was spent wireframing. I also created a content model for the development team and completed annotations for handoff to UI designers and developers.

 

Kickoff + Getting Up To Speed

I was brought on after most of the discovery process had been completed. I took notes for a day of stakeholder interviews on site and helped gather sites for a competitive analysis. A sitemap was created by another designer on my team and I was given the responsibility of mocking up wireframes for each page type.

Before jumping into design, I spent time reviewing the research that had been completed. Here’s what I learned:

 

What are the problems with the current site?

  • Does not showcase the international capabilities of the firm.

  • Does not articulate the breadth of services the firm offers

  • Does not show which services are available in specific countries/regions.

  • Does not show the multiple 20+ year engagements the firm has completed with some clients.

User Needs

  • Potential Clients (primary)

    • See projects with a similar scope

    • Identify whether or not GreenbergFarrow can provide the services they require for their project.

    • GreenbergFarrow contact info

  • Potential Employees (primary)

    • Open positions

    • Office locations

    • Why should they want to work at GFN?

  • Press (secondary)

    • Info about a specific project

    • Firm history/GFN bio

    • How to get in contact

  • Enthusiasts (secondary)

    • Projects

    • Process

Sketching

I began by sketching ideas for each page type identified within the IA. I then reviewed with my UX Manager before moving forward with wireframing.

Wireframing

The wireframing process consisted of 3 sprints (1 week each). During the 3rd sprint, I annotated each screen in preparation of handoff to UI designers and developers.

  • Round 1 - During this round, at least 1 template was presented for each page type and we got approval for services, projects, programs, and case studies pages. 

  • Round 2 - Between round 1 and round 2, refinements were made on the index pages for each page type that received approval in round 1. Further design iterations were completed for all additional page types with News receiving approval and most other page types requiring only small revisions.

  • Round 3 - After my final design presentation, all page types received approval and wireframes were handed off to UI designers. See my final wireframes below.

 
GF wireframes preview.png

Content Modelling

I created a site content model for setting up the CMS that was used internally by the development team. For this project, this deliverable identified every field within the CMS that an admin would need to populate each page type with content.

QA

As development neared completion, I worked with the development team to create QA scenarios and logged bugs in JIRA.

Product Launch

Unfortunately, I don’t have access to analytics to find details on traffic or engagement, but the client was pleased with the finished product. The site launched in 2018.

Previous
Previous

Velocity (Crypto Exchange Design)

Next
Next

Champions Design (Discovery Research)