Art Director & UX Designer
INTRO colors2.jpg

The BKG - product design

Branding and product design for The Brooklyn Grove

Created at The Seventh Art

After creating the branding of this Brooklyn condominium as an Art Director, I produced with my team the web site and we made sure the brand story came across well on all the digital assets.
 

Roles

Art Director
I created the brand identity and was involved with the client and all the partners early on. Designing the logotype, picking the brand colors and fonts, selecting the brand imagery and art directing the photoshoots; I was able to create a consistent brand. Style guidelines were created.

Web Designer
We translated our brand story to a digital product that would give users an idea of the neighborhood they would live in.

Visual Designer
I created a UI kit to make sure the brand would stay consistent on its digital applications.

Methods

Research
Brand strategy
Target audience

Design & Prototype
Mid-fidelity wireframes
High-fidelity mockups
Clickable prototype

Tools

Design & Prototype tools
Sketch
InVision
Marvel app
Photoshop
InDesign
Illustrator
Lightroom

People

Users
Sales agents
Potential buyers

Collaboration with experts
Architect
Brand Strategists
Copy Writers
Designers
Photographer
Motion Designer
Web Programmers

Stakeholders
Real estate developer (client)
Brokers (client)
Sales team (client)

One of my role was to be the web designer. We translated our brand story to a digital product that would give users an idea of the neighborhood they would live in.
 

Feature prioritization

Navigation map

Group focused meetings with stakeholders helped finding what to prioritize in the navigation through showing mockups with Marvel app. The point was to respect both the brand story and to give the user ways to get to his goal as quickly as possible.

One of the main user goal communicated by the sales team was the ability to go to the availability section and download a floor plan quickly from the home page.

 

Prototypes, tests & findings

Testing the prototype we built on Marvel App, we were able to collect insights on how users reacted to it and made several changes in the structure of the website, specially on mobile.

 

Visual design

A UI kit was created to be sure the brand stays consistent on the digital platforms, specially before handling it off to the sales team and social media team who will keep on building collateral for the brand.


Desktop website

 
 

Mobile website

 

β€œIt really feels like going through your day in Brooklyn. Our potential buyers can really see where they would live.”
— Sales agent
 

To be done

  • Conducts usability testing on the website to get insights on how users reach their goals and if they get what they need from the product.

  • Get analytics on where users go first when they land on the website. Do they get right away to the availability section as the sales team is expecting them to?


To be improved

  • Make the responsive aspect of the website more efficient on small screens. Some tablets and mobile screen sizes feel a bit clunky.

  • Add a preview of the floor plans without having to download them.

  • Make some of the buttons/CTA bigger and more visible.

What I learned

  • Prototyping with tools like Marvel app helps the client to understand the concept but also helps programmers to get how the design has to be developed on the web and how it should flow.

  • Designing a separate mobile version is sometimes better than to expect a responsive website to work well on mobile.