Role
Studio Corbeau, a multi-disciplinary design studio based in Los Angeles, hired me to design and build their gallery website.
Challenge
As a new and growing design studio, and in order to compete in a crowded space and grow consultations, they needed a web presence that displayed their beautiful commercial and residential spaces front and center, with easy access to contact information.
Process
I worked closely with the business owners to gain discovery and insight into their vision for the site. I then conducted user research, drew inspiration from ideas and feedback, designed, developed, tested, and launched the website.
Goals
User: Design and build a website that is engaging and simple so that customers can immediately relate to the studio's work.
Business: Grow web traffic and increase consultations.
Timeline
January 2019 - Present
"Dan was incredibly detailed and thorough in communicating ideas. It's so nice working with him and love our site."
David Corbin, Founder, Studio Corbeau
Discovery and Strategy
Purpose and Themes
I worked closely with the studio to define a vision for the new site. Its purpose was to showcase the photography and projects while maximizing their visibility across mediums. They sent me a few other brands and sites to draw inspiration from and themes emerged:
- Art gallery and slideshow look and feel
- Photography speaks and typography supports
- Structured and rigid layout; not a lot of variance
- Use white space as a framer
Site Strategy
I came up with two different strategies on how to build the site:
- Use Wordpress/site building templates to construct the site. This would give my client control to update the site on their own.
- Build it using my own custom framework. My client would need to reach out to me for updates on a less frequent basis.
After discussing the pros and cons of each, we went with the second strategy because the amount of updates for the site would be minimal and infrequent.
Goals
User: Design and build a website that is engaging and simple so that customers can immediately relate to the studio's work.
Business: Grow web traffic and increase consultations.
Form Hypothesis
I put together a clear hypothesis statement:
I believe growing customer engagement will be achieved by designing a focused, simple, and portraying web presence.
Understand the Customer
Persona
I needed to understand the type of customers that would be interested in this studio and visit the site. After intervies and examining my client's work, I put together a persona:
Demographic
- 30-60 years old
- Based primarily in Los Angeles and some domestic/international cities
- Business/retail and home owners
- High income and profile
Needs
- Space and interior design consultation and planning
- Custom home furniture and decor
- Inspiration and direction
Behaviors
- Cautious spenders
- Local and community influenced
- Searches for design consultation, usually from personal or professional reference
- Expanding creative outlets
Come Up with Solutions and Prototype
Information Architecture and Sketches
With initial inspiration, themes, client and user intent in mind, I started sketching out base views. Around this time, my client had 15 projects to showcase with photography staged, so I had a pretty clear picture on how to organize and structure the layout. I broke it down into various sections and then used that to built information architecture.
High Fidelity Prototypes
I started designing views in Adobe XD and exporting them as mobile and desktop click-through prototypes for review. This type of work gave my client a very clear picture of what to expect with the UX and interactions.
View Desktop PrototypeFeedback
After reviewing a Version 1, I got the following feedback and requests:
- Minimize the titles and iconography substantially
- Try out the left hand navigation instead of top
- Different font face, serif for the titles and sans-serif for the text
- Have all photography contained in a carousel and not in a gallery view
- Add a map to the contact page
Version 1 of the site.
Develop the Site, Test, and Launch
Approach
After initial feedback was incorporated and a final design settled on, I used framework Bootstrap 4 as a starting point for developing the site. Some key aspects and components I focused on:
- Left-hand navigation: Always exposed and collapsible on mobile
- Grid and gallery: 3-column
- Showcase: Large photography taking up most of the space
- Hover: Reveal more details on hover states
- Container: Activate whitespace while keeping the content focused
Build Elements
I then broke views down into clusters of elements:
- Navigation sidebar and mobile menu
- Gallery photography cells
- Carousels
- Google Map embed and location API
- Typography: titles and body/paragraph
- Section navigators/chevrons
Coming to Life
I approached each page as groups of elements, making everything visually consistent and easy to understand from a coding standpoint.
The Outcome
After several rounds of internal testing and stakeholder feedback, we launched the site.
View Site
