bureau // 2019

I designed a refreshing and modern site that offers multiple ways for users to envision Bureau's products in their office space.

01 // background

Bureau is an office furniture company that strives to make it easy for teams of every size to create offices they love. From ordering and assembly to space planning and pickup, they take care of furniture so their clients can sit down and get to work. They need an exciting and responsive website that is inviting to a range of users and is fun and fresh while inspiring confidence and professionalism.

02 // discovery

03 // synthesis

Market Research

Though "open concept" office spaces have been incredibly popular in recent years, the pendulum is swinging back in the opposite direction. Employees are looking for a little more privacy and products like telephone booth offices, flexible working nooks, and privacy screens are becoming more common.

Shared or "open" work spaces are a convenient, low-cost way to invest in an office and is a tool often used by small businesses and startups. Conference rooms with large designated meeting tables can help break up common areas and provide a quiet spot to break out from the group.

Bureau is in the unique position of offering a small range of office furniture, with only one product per category (one chair, one standing desk, one conference table, etc.). This gives them an advantage with customers who may be suffering from decision fatigue and need to furnish their office quickly without having to choose from endless customization options.

User Interviews

In order to get a sense of what potential users would expect when browsing Bureau's website, I interviewed two members of a space and design branch, whose job is centered around creating new office spaces and renovating existing ones. I also interviewed the CEO of a small startup, who has one employee. I got a good sense of typical pain points people encounter when furnishing an office.

  • During each interview, participants interacted with Bureau's existing website in order to complete a series of tasks.
  • Each interviewee was able to add furniture to their cart to furnish a two-person office, but they all were less than fully confident that the furniture would fit based on the inconsistent way measurements were listed on the site.

During one interview, Bureau updated the format of their product page. Since we were using the live site, we were able to compare and contrast the old and new layouts in real time (after making sure we weren't going crazy imagining that the page had changed!)

Personas & empathy maps

Bureau provided me with descriptions of the two main types of users they found were using their site - a CEO of a small company or startup, and an office manager or space and design employee specifically in charge of furnishing spaces at a larger company. I used this information and data from my user interviews to create robust personas for each archetype.

Persona card for Rebecca, a 37-yo office manager from NYCPersona card for Rob, a 30-yo startup CEO from Washington, DC

Card Sorting & Site Map

Bureau's website was already organized in a semi-logical structure, so instead of a traditional card sorting exercise, I used observations from my user interviews to clean up some sections, and to rename the existing navigational categories that caused confusion. The existing categories were Furniture, Concierge, and Learn. I implemented more navigational categories, and named them Furniture, About Bureau, Visit Our Showroom, and Build Your Office. I also created a few pages I thought were missing from their sitemap, like account pages and a page dedicated to explaining their flex program, which they claim is one of their standout features.

Sitemap for bureauwork.com

Wireframes

I submitted wireframes of two different homepage options for Bureau to consider. The first option (on the left) was clean and simple, but with interesting structural elements to keep the user engaged. The second option was more playful, with the unique shape of the "r" in Bureau's logo repeated as a background design element throughout the homepage. Both options offered clear calls to action, and organized the information from Bureau's existing homepage in a more easily digestible format.

Two wireframes depicting different options for the structure of the home page

Bureau selected the second option, so I made some minor improvements to the structure and designed the rest of the site to fit logically and aesthetically with the homepage. I carried on the visual motif of the "r" shape, which helped to break up content-heavy pages and add a feeling of contained whimsy due to the monochromatic color palette.

Three wireframes, one each for Home, About, and a product page

UI Kit

UI Kit for bureau work.com, including colors, typography, logo, button styles, and navigation patterns

Prototype & Test

Once I finished the high-fidelity mockups for each of the pages in my user flow, I linked them together in a prototype using Figma. I recruited 5 people to participate in a test of the site, giving them each the same tasks from the initial user interviews. Using the same tasks allowed me to directly compare the effectiveness of both designs. Two users had participated in the initial interviews, and three had never seen the site before.

Final Designs

Final Designs & Prototype