KELLER WILLIAMS
Creative Director / Product Designer
the
PROJECT
The Warmack Group’s technological prowess has made them the state's most successful Keller Williams brokerage. Always an innovator in the industry, they distinguished themselves in the Seattle housing boom. To stay on top of the competitive landscape, they needed top agents and pertinent industry data on demand. True to their commitment, The Warmack Group tapped us to make analytics approachable and data customizable to anyone in the brokerage. They also wanted a mobile app to readily source desirable talent in the real estate industry.
Research & Discovery
Brand Development
Product Development
Interaction Design
Visual Design
Communications
my
ROLE
I partnered with two project managers, ours and Keller Williams', to streamline content and translate concepts into features that addressed the client's brokerage specific needs.
I directly managed an internal creative team of an experience designer, a visual designer, and a production artist.
Adobe XD CC
Adobe Photoshop CC
Adobe Illustrator CC
Microsoft Office 365
Microsoft Power BI
Zeplin
Responsibilities: Creative direction for live product support and user experience, interface design, visual design, wireframing, prototyping and people management.
color
PALETTE
Primary
brand colors
Neutral
brand colors
Secondary
brand colors
HEX # B40101
RGB 180/1/1
HEX # FFFFFF
RGB 255/255/255
HEX # 0B893E
RGB 11/137/62
brand
TYPOGRAPHY
Aa
HEX # 04BCA8
RGB 4/188/168
HEX # EAEAEA
RGB 234/234/234
HEX # FF9F08
RGB 255/159/8
HEX # 062230
RGB 6/34/48
HEX # CCCCCC
RGB 204/204/204
HEX # B40101
RGB 180/1/1
HEX # 1A94D6
RGB 26/148/214
HEX # 767676
RGB 118/118/118
HEX # 505050
RGB 80/80/80
Helvetica Neue LT Standard LIGHT
Aa
Helvetica Neue LT Standard HEAVY
Aa
Helvetica Neue LT Standard THIN
SECTION TITLE
42pt
SUBHEADER
36pt
BUTTON TITLE
Text Field
Paragraph Title
Body Copy
24pt
24pt
24pt
18pt
custom
ICONS
I crafted a custom set of icons for the Keller Williams application in the style of the ones used within the Warmack Group website. Not only did they ensure brand consistency, but they helped identify key features and carry the story across the new app.
application
ICONOGRAPHY
brand
INPUTS
ux
DESIGN
The requirements for The Warmack Group's "GO Hire" mobile app were pretty straightforward, however due to the complexity of the back-end and data displayed, it helps to establish the app's foundation and structure before moving on to applying the brand. That's why we developed high-fidelity wireframes to determine the complete story. Once approved, moving ahead with the visual design was easy.
app
MAP
KW-TWG_welcome
Microsoft Power BI
real-estate metrics
dashboard link
KW_dashboard
KW-TWG_home
Warmack brokerage - default page
KW-TWG_home
PNW market overview
KW-TWG_agent_search
Agent search and filtering page
KW-TWG_agent_sort
Agent sorting page
KW-TWG_agent_detail
Describe your image.
Describe your image.
Describe your image.
Describe your image.
metrics
DASHBOARD
Sifting through Excel sheets, SQL queries, mobile apps, databases and sales reports requires a ton of work that takes brokerage owners and recruiters away from netting the talent. Enter Microsoft Power BI (Business Intelligence) - a powerful analytics tool that sources, correlates, and displays data from various sources into neat, customizable dashboards for non-techies to digest. We developed a comprehensive dashboard (branded to The Warmack Group) to analyze the data; the simple visual interface instantly grants the user access through nothing but a few clicks.
Select the button below (the one that reads "Power BI", in the big, off-brand yellow bar) to see the Keller Williams metrics dashboard design in action!
