SUMMARY

I was asked to redesign an antiquated and disorganized website for a start-up in Commercial Real Estate tech, and here are the results. It is fully responsive and also serves as a portal to their web-app.

GOALS & OBJECTIVES

• Rework the Information Architecture based on 3 key Personas
• Design a User Experience that doesn’t suck
• Flexible CMS

MY ROLE

• Concepted, sketched, wireframed and designed final UI
• Created foundation for Marketing rebrand–new Design patterns, colors, fonts, etc
• Manage Design contractors and outside Dev vendor

CHALLENGES

• No internal Project Manager or Design helpers
• No existing style guide or UI to leverage
• Tight timeline, like all projects in the world

HISTORY

The original site had been left for dead for about 6 months, though the company was changing its product offerings. When a new VP of Marketing came in, we quickly joined forces to get it prioritized and knocked out.

RESEARCH

Marketing leveraged Google Analytics to get a baseline of current web state which showed high bounce rates and low Return Users. Also, we had extensive research on industry Personas and documented them along the way.

APPROACH

The old site did not cater to the unique Personas–Tenant Broker (Seeker), Listing Broker (Lister) and Data Purchaser and we felt like this was a missed opportunity. The new workflows allowed us to tell a “solution” story instead of a Product catch-all story, with Persona-specific messaging.

PROCESS

Persona Research, Requirements, Sketches, Wireframes, Final UI, Development (I hosted a Design hand-off with an outside vendor for development). More details on each of these steps below.

FINAL SOLUTION

DEFINING PERSONAS & THEIR FLOW

As I worked through Personas for this project, I documented them in Gitbook and ended up making some Posters for the office, so everyone can stay focused on our core Users/Customers. I also did a prezo to the company on what Personas are, why they are important and how to use them to in their various departments.

SITEMAP

Created this quick-reference site map with key information architecture that the Marketing Team could use to guide content needs.

SKETCHES & WHITEBOARDING

There were lots of working sessions to keep this project rolling in collaboration with stakeholders and Marketing. Marketing was ok with sketches and low-fi wires in most cases.

NEW BRAND STYLES & PATTERNS

This project was also an exercise in creating the base brand style guidelines. We focused on lighter and brighter images and whitespace to help differentiate ourselves from competitors. We also wanted to communicate that RealMassive is data-driven and modern. I updated the fonts and colors to be more specific to this particular brand, but also to differentiate us from competitors and leverage existing brand equity.

WIRES TO UI

A few examples of wires and UI, though much of the low-fi wires were simply sketched, since stakeholders were ok with that.

OUTCOME

• 15% decrease in bounce rate
• 20% increase in User time on site
• With SEO optimization, the highest return and volume of Users in the company’s 4 year history.

REFLECTION

Doing better up front helps. Getting on the same page with the VP of Marketing and understanding the needs and asks and the WHY very early in the project, really helped propel it in a uniform direction. Which in turn, made us pretty efficient.

+1

As development took over the project, I finally got a break so i designed a few stickies for everyone’s desk to get the company excited about the new website. I also drew some window art with a countdown on our big windows.