Lara Hughes
RED Academy
Published in
10 min readJan 2, 2017

--

The Flats — Vancouver Economic Comission

UX Team | Strategy | Website

We were challenged by the Vancouver Economic Commission to create a web platform for their initiative The Flats, that needed to facilitate collaboration, communicate projects, and showcase economic and sustainable initiatives for business community, in three weeks.

THE TEAM

With instructor Jason at the helm, excited to take on this challenge were fellow UX design students Bryan and Michael. With a graphic design background my role also included applying mid/high-fidelity UI.

Team: From left — Instructor Jason Keen, UX designers Bryan Leung, Michael Lelli and Lara Hughes (me)

About the Vancouver Economic Commission (VEC)

The Vancouver Economic Commission (VEC) is a non-profit economic development agency for the City of Vancouver. Their mission is to position Vancouver as a globally significant city for innovative, creative, and sustainable business.

ABOUT THE FLATS

The Flats is a business area defined by Main St and Clark Drive (East/West), as well as Prior St and Great Northern Way (North/South). It has been a developing mixed business district since 1915.

The Flats geographic area (Photo Source: VEC)

The Flats is an initiative of the VEC and its aim is for it to become the example of how central industrial areas can become engines of economic sustainability and innovation. Through the development of a 15 year economic action plan, the vision for The Flats is to:

  • showcases and supports innovation
  • feature green buildings and infrastructure
  • supports the shift to a circular economy, and
  • pioneers new models for efficiently moving goods throughout the city

In the last 2 years, the VEC have become much more targeted and ambitious and have grown by nearly 30%. Due to the The Flats growth, the VEC current websites — The Flats and VEC.com/the flats were unable to support its goals or community needs. The new website needed to be able to grow with the business ambitions and its community initiatives.

1. Communicate, manage & track initiative projects

2. Facilitating businesses to connect and participate in initiatives

3. Support & Encourage community collaboration

4. Showcase The Flats to the community and other cities

We started off the project with the awareness that there were many knowledge gaps. Provided with three user groups, we interview nine in total (three businesses — 2 exiting businesses in The Flats & 1 potential, three VEC Staff and three Partners.

User Interview groups

As the user groups were vastly different we asked open ended like:

What are your goals and values? Did their personal and business goals aligned with the community? Why were they motivated to being part of The Flats initiative? What made this area desirable to them / their business? And what did they care about in the community.

“I have got the ability to get involved with environmental and social projects that may not make economical sense in short term, but do in the long term.”

Landsea Tours | Business

Tell us about an experience you had interacting with another group (business, VEC, partner) in the area. How did each group communicated and what were their frustrations / obstacles when doing so? And how successful was the communication — how much did they know about the community — did they know their neighbours?

“Empowering to hear what people were doing to improve their businesses in terms of sustainability, and also to see how the companies were sharing and to improve their customer engagement”

Expressotec | Business

Have you been a part an initiative? Can you walk us through the process? This question was key to identify from each group what worked well and what were their frustrations were.

“For me, it’s mostly just knowing who is involved; we just send it to VEC, not sure if there’s a newsletter sent out? It just went out to the group.”

Climate Smart | Partner

If there’s any bit of info you could have in the False Creek Flats community, what would it be and why? This question was crucial to discovery what was not being communicated and what were their biggest fears of the area.

“Biggest fear: the change forces out a number of businesses who have been happily doing business for decades; hearing LESS about this. ”

VEC | Internal

RESULTS

With an abundance of data, we first divided it into each user group (businesses, internal and partners) to identified commonalities. We next connected common themes across each group to form cohesive insights.

Sorting the data with Affinity Diagrams to gain insights

We learned several important things that our users cared about the most.

  1. Provide Evidence & Results — highlight case studies and data
  2. More Open Communication & Transparency is needed between VEC, businesses & partners
  3. Community Collaboration — the ability to participate, contribute and support is a must
Four Identified user groups (Academic being very minor)

PRIMARY PERSONA

From the four user groups, we identified that core user of The Flats initiative was the current businesses/potential businesses. All user groups also interacted with the businesses and relied on them for engagement with the initiative.

Derek is an environmentally conscious entrepreneur focusing in developing and manufacturing efficient, mobile lighting systems. He has been in the lighting business for 10 years and has a passion for sustainability.

User & Business Goals Alignment

From our research it became evident that there was an alignment with the VEC on the need to focus on communication, involvement of current projects and showcasing projects and results.

ORGANISATIONAL RESEARCH

To identify whether Derek’s goals, frustrations and goals were currently being met by the VEC we started our research with the organisation.

Although both provided a more clear idea of the vision their was not of huge immediate value provided to businesses i.e data, actions. They were either lost in reports or linked to external websites. There was no way for the business community to understand what was happening in the area and although their were some project highlights — it was hidden.

COMPARATIVE ANALYSIS

We looked at similar organisations from who had initiatives for business districts and how they they were communicating and engaging their community.

http://www.wearebctech.com/growth/fintechprogram

PROJECT DETAIL

BCtech Association successfully illustrated a current running initiative by highlighting key features, showcasing partnering business (with logos) and who was involved/supporting the project (people). It had a clear CTA which made it easy to participate or support.

https://climatesmartbusiness.com/case-studies/frogbox/

CASE STUDY HIGHLIGHTS

ClimateSmart, currently a case study for Flats Climate Action Program — although very text heavy and limited visual support, made it easy to see the results by pulling them out into bullet points.

COMMUNITY ENGAGEMENT

Eco Innovation Oakland showed an innovative way to illustrate and showcase ideas by using an interactive map with geotagged comments, clearly demonstrated an active community and an engaging way to get involved.

In order to meet Derek’s and VEC goals we mapped out the features based on difficulty vs impact and what could be achieved in the timeframe and our limitations.

Feature priotization using Impact Matrix & Must Have / Nice to Have / Not Needed Buckets

We then colour coded the features based on the four matrix categories and further sorted into three buckets to determined the MVP needed to accomplish Derek and VEC’s goals. Through these tools we were able to determine how we could meet Derek’s and VEC goals was by focusing on three key features.

  1. Case Studies
  2. Active Projects
  3. CTAs for engagement

User Flow

User Flow of Derek’s goal to save money (Image Credit: Michael)

Our persona — Derek’s, goal is to find resources and initiatives that could help him with his business. The user flow highlighted that the website had to enable Derek to take an action towards achieving his goal at any point of his journey, if he determined that there was no relevant information. We adjusted the design to enable Derek to be able engage with either the VEC, projects or the community.

IA and Site Map

Rough site map — to final site map

Visual Design

From VEC the design brief was to find a visual design that was a balance between corporate (to appeal to partners) and grass roots (to appeal to the community and businesses). Throughout our research a key fear of the current businesses in the area was loosing the industrial zoning. With a rich history of being an mixed light-industrial area since 1915, it was an important and unique part of the cultural of the community to highlight. To represent this history and strength of the business community we took inspiration from steel beams and the colour of rust.

What made this area attractive to potential business was its location to downtown Vancouver. To represented this we took inspiration from the area close proximity to water which also tied directly to the environmental nature of the initiative.

Style Tile
  • To tie it back to the VEC branding but without looking too ‘green’ we used the teal from the VEC iconography to balance out the palette.
  • To communicate this as a innovative active community, the hero image was altered give it a bright blue & orange, futuristic look.
  • To further strike a balance between corporate and grassroots I used a combination of hard edges with soft curves.

Design & Testing

The design process for this project was initiative to ensure we focusing on meeting Derek’s and VEC goals. We tested with all level of fidelity with remote international users — who knew nothing about location or the initiative. This gave us perspective on how new businesses and existing business would see the site for the first time and whether it was clear in its communication on how it could meet Derek’s and the VEC goals.

Bring key information forward

In order to identify with Derek’s goals data must be relevant, contextual and easy to find. We added context with close proximity of the case studies to the vision, and made key pages accessible directly from the home page.

Detail of case study results section before & after testing

Pull out actionable steps & results

After testing with a current business from The Flats, it became evident that the key actionable takeaways and their results were being lost content. The visual design of the CTA was adjusted to make it easier to identify.

A/B testing showed design A communicate to the user that it was dynamic & interactive (Credit Design A: Bryan, Design B: Jason)

Imply interaction through design

Through A/B testing it revealed that Design A - looked like a geographic map of The Flats and testers could not relate or understand how bigger buildings = hot topics. Design B showed that to the users the circles design implied that it was interactive and that the size demonstrated popularity.

VIEW PROTOTYPE

Client Feedback

“I am so pleased with the prototype that Bryan, Michael and Lara came up with and can’t wait to get it fully built out. The work they did to help me navigate the complexity of communicating about our work in The Flats and engaging with our many stakeholders online.” Pietra | VEC

Future Considerations

In the timeline we were able to design the foundations for the proposed website. The next steps to bring this project further towards launch would be:

  • Add interactivity to the website for the following pages:
    – business directory / interactive business directory map
    – flats economic strategy
    – progress of current projects
    – follow up on the case studies (current data)
    – follow an active project
  • Mobile Design
    – We designed the website in a grid format ready to be responsive to mobile and next steps are to optimise it for mobile
  • Identified opportunities to improve VEC website
    – there were a number of pages which were buried and difficult to find including The Flats initiative
    – sub navigation was not consistent and some pages did not have bread crumbs
    – This would require a partial or full content audit or heuristic analysis to help users navigate and find what they’re looking for.
  • Further develop the brand & communication language

Acknowledgements

We would like the opportunity to thank our community project partner from the VEC, Pieta. We would of not be able to do this project without her passion and enthusiasm. Thank you Pietra.

Michael, me (Lara), Pietra (VEC project partner), Bryan & Jason (instructor)

--

--