Case Study — The FLATS
Vancouver’s engine of economic, environmental sustainability and innovation.
Project Summary
The FLATS is an online platform for businesses and partners within the False Creek Flats area to collaborate and share ideas regarding environmental and economic issues affecting its industrial core. It provides clarity, transparency and open communication by showcasing strong case studies and allowing organizations to discuss topics of interest in an innovative user interface. My role was to research, design, and test the full UX and UI activities related to the project. I collaborated with two other UX Designers to design this product.
Timeframe
3 weeks
Client
Vancouver Economic Commission
Pietra Basilij, Sustainable Community Development
Task
Create an online platform/tool to improve collaboration amongst the community.
Platforms
Web (Desktop)
Collaborators
UX Designer: Bryan Leung (me)
UX Designer: Lara Hughes
UX Designer: Michael Lelli
Design Methods & Tools
Comparative Analysis, User Interviews, User Personas, User Scenarios, Site Map, User Stories, Mood Board, Paper Wireframes, User Testing, A/B Testing, Sketch (Mid and Hi-fidelity wireframes), InVision (prototype)
DEFINE
Introduction
The Vancouver Economic Commission (VEC) is the economic development agency for the City of Vancouver. They are a non-profit operating in the space between government and the private sector. Their primary goal is to position Vancouver as a globally significant city for innovative, creative, and sustainable businesses. The False Creek Flats is one of several ongoing economic development projects to demonstrate sustainability and innovation.
The Opportunity
In the last 2 years, the VEC has become much more targeted and ambitious towards the types of projects taken on. They have experienced nearly 30% in growth, now employing 19 full time staff, but have yet to build out the capacity to complement these changes with the appropriate digital tools for managing, tracking, and communicating the work they are doing.
The Challenge
To develop and activate an online tool that better facilitates groups of businesses in the Flats to self-organize and connect with each other, get to know their neighbours, share insights and more. The tool could ideally be used to identify and track interesting projects, communicate about some of the top-down policy changes happening in the area, and showcase the Flats to other cities looking to mimic our approach to transitioning the Flats from a traditional industrial area to an engine of innovation and sustainability for the city.
DISCOVER
Research and Planning
Even after our client kick-off meeting to clarify project requirements, our team still felt unsure exactly what solution was needed to satisfy both business and user goals. While the business goals were clearly outlined, we were dealing with a vast user group, whose goals we were unaware of. Additionally, our team was unfamiliar with how programs or initiatives ran end-to-end. Every project contained many moving parts, unique factors, and parties involved that would define it’s own structure. We were only vaguely familiar with some businesses within the False Creek Flats and it’s geographical location.
These were the business goals presented to our team:
- Share vision for the Flats
- Provide information on the Flats Economic Development Strategy
- Highlight live projects and ways to get involved / sign up
- Share information about the Flats and businesses in the area (metrics, spatial data, visual data, and stories)
- Share news, updates, and events.
Our client clarified that the top three (in bold) would be priority. Given our 3 week timeframe, our team focused on accomplishing those business goals.
We were provided with a list of contacts for businesses (within and outside the Flats), sustainability partners, and internal staff members from VEC. Our team agreed that the first thing we needed to understand was what our users thought about their community, what their needs and goals were, and how they interact with different parties. In order to collect this data, we began by brainstorming some of the questions we wanted to ask:
- What are your goals and values?
- Tell us about an experience you had interacting with another group in the area.
- Have you been a part an initiative? Can you walk us through the process?
- If there’s any bit of info you could have in the False Creek Flats community, what would it be and why?
- Have you participated in any initiatives or projects? How did you perceive them?
- What does a circular economy mean to you?
- What does a green economy mean to you?
- Tell us about sharing resources as a community?
Since most of these questions were open-ended, we determined that they would be best queried through user interviews. We secured nine, 30 minute interviews with a variety of users over a 24 hour period.
Our interviews yielded an abundance of data. We needed an effective, organized way to extrapolate all these data points, so we sorted the data using affinity diagrams. One key fact to note was that we initially began lumping all data together during our first sorting session. This proved ineffective, as we were unable to draw insights relating to a specific user group. As a result, we re-sorted the data, this time only grouping data points together for a specific user group, color coding them based on their user group (business/internal/partner).
Next, we looked for common themes amongst our 3 user groups to create a stronger data set, and understand what were the commonalities between our users. These were the core data sets that stood out:
- Case studies matter — everyone wants to know how initiatives were done, what resources were required, timeframe taken, who’s involved, success stories, what impact was made, etc.
- Lack of transparency/communication amongst user groups and how parties can help one another.
- Change is community driven, and that collaboration is necessary.
- User groups acknowledge that the VEC is an important catalyst to push growth and innovation in the community
- Businesses need incentives to contribute back to the community — self motivation for the greater good only goes so far
- Users generally have an aligned vision on a circular, green economy that the VEC is aiming to encourage.
Initially, it was not obvious to our team what this data meant. The information was valuable, but it did not immediately translate into what the users wanted, and what platform would be best to deliver a solution.
Out of all the categories formed from our affinity diagram exercise, case studies were the strongest. Fundamentally, we knew that our users wanted to know more data in the form of case studies. It wasn’t that the VEC website didn’t contain case study data, it was just that the case studies themselves weren’t optimized. That is, they were segregated to certain projects only, and they simply linked to the case studies published by their sustainability partners’ website, which would lack consistency between organizations.
Additionally, the case study data laid out on these websites were text heavy, and somewhat lacking in terms of what actions were taken with respect to the impact and results.
Defining the Users
From all the interview responses provided, we were able to determine four core groups of users:
- Businesses within/outside the Flats
- Sustainability Partners
- Academia Partners
- Internal VEC staff members
In breaking down the data, it eventually became clear that all groups interacted with businesses one way or another. Thus, it was critical that the False Creek Flats website would be designed for those users in mind. Using the various data points collected from user interviews, we constructed Derek, our primary user persona:
Collecting our insights, we gleaned the following user goals for Derek:
- Able to access evidence and results through case studies and data
- More open communication between businesses, partners and the community
- Collaborate in terms of getting involved, contributing, and getting support.
With our user goals laid out, we immediately found the happy medium between those and our client’s business goals:
- Share vision for the Flats.
- Provide information on Flats Economic Development Strategy.
- Highlight live projects and ways to get involved / sign up.
This was clear because our users consistently mentioned that they wanted to find ways to get involved, find out what sort of chatter was happening within the community, and voiced concern about a lack of communication on what other businesses in the community could offer.
Comparative Analysis
We knew that highlighting active projects and case studies were high up on the priority list. So we began a comparative analysis on similar organizations and their methods of showcasing them.
Current Projects
The Bay Area Council Economic Institute is a similar organization to the VEC, and had a clean way of highlighting projects. Our team felt that the clear-cut, grid structure was an effective way to showcase actively running projects.
Active Projects (Detail page)
BCTech association illustrates an actively running initiative in great detail. Sections were clearly outlined and defined, it was easy to identify which people and organizations were involved, and highlights a call-to-action for getting involved.
Case Study
ClimateSmart (one of VEC’s partners) highlights their case study on Neptune Terminals. The page is noticeably text heavy, with a lack of visuals to help illustrate impact and results, outside of several bullet points. Actions taken to achieve results were also highlighted. Data points are provided, which are great, but the numbers are pre-dated to 2011 and may not instill confidence in users hoping to find longer term/sustainable impact.
Getting Involved
Eco Innovation Oakland, an organization similar to VEC, takes a different approach at engaging their community. Their use of an interactive map gives users the ability to drop a pin in order to leave a comment or share an idea. This later provided us inspiration for our discussion board design.
Building IA and Feature Scoping
At this point, we worked out the information hierarchy per page and site map concurrently to breakdown which core pages would be necessary. Given that we only had 3 weeks for this project, we mapped out a full feature list with blue-sky thinking, and began to prioritize how to be most impactful and efficient in implementing these features with our limitations.
Our focus with this exercise was to determine our MVP — that is, the specific features required to satisfy user and business goals.
In order to reinforce which features would be needed to create our MVP, we decided to map out Derek’s user flow to explore what progression path would make the most sense for him to accomplish his goal. In our user flow below, Derek is concerned about his business’ financial spending and wants to find out what he can do about his situation.
Once our user flow and features were defined, we were able to reinforce our existing information architecture. Creating the following sitemap allowed us to better communicate to the client how the website could support growth in the future, and how they would be able to maintain projects or case studies.
DESIGN
Design and Testing
Our iterative design and testing process gave us insights early on and ensured that we were hitting both user and business goals. We also conducted testing with users that were not from Vancouver, so as to get a different perspective from a business that might have been considering moving into Vancouver, or another city looking to learn from VECs approach.
We approached our low fidelity wireframes with 5-minute design studio sessions between our team of 3 UX designers, basing our designs from the information architecture and user flow diagram. We iterated on our designs twice for each session before finalizing the structure, which we then converted into paper wireframes.
1st iteration
It was identified during interviews that case studies and data were important. To emphasize their importance, these items were brought up to the top core sections of the website. The data points highlighted would instill confidence in Derek’s key goals — financial savings, environmental impact, and knowing he will have security with his business in the Flats. During testing, we learned that the term “Dialogue” did not sit well with many users, as nobody was familiar with what the word really meant. It was not a word commonly found in top navigation sections. The label was changed to “Discussion” in our subsequent design.
2nd iteration
In our second iteration, we included an image of the False Creek Flats area to provide context. Noticeably lacking were the data/numbers. This resulted in users feeling the website might have been a tourism website, especially those that were not familiar with the city of Vancouver.
3rd iteration
We incorporated the feedback from testing and included VECs existing tag line along with a short description explaining the purpose of the website to further provide context for our user. The numbers that we included here were taken from VECs existing website, and did not particularly have a meaningful impact outside of sharing more “about” the area. This information needed to be more impactful, as per the user goals of our primary persona.
4th iteration
At this point, we started to tweak with the visual elements. Testing again, users felt that the navigation bar was too simple. This was a result of us grouping current projects and case studies under the same umbrella, simply labelled “Projects” on the navigation bar. Users found this oversimplification to be unintuitive, as we observed them heading straight for the “About” page due to a lack of understanding what would have been found behind “Projects”.
Case Study
Users reading our case study detail page weren’t able to walk away with any specific action items or take-aways, when we gave them the task of “finding ways to reduce your carbon footprint”. Our case studies were structured to include this information, but it was not clearly outlined for the user to easily digest.
5th iteration
Our 5th and final design was to primarily touch up the look and feel. We changed the data/numbers to ensure that the user found value rid of the secondary nav and expanded it
gave more context
simplify the purpose of this site
Discussion Board
With regards to the discussion page, the design deviated from what one might expect from a discussion forum. We took liberty in creating something more fluid and interactive. We ended up with the following two, vastly different approaches.
Left: Since the nature of topics being discussed would revolve around economy, sustainability, and innovation specifically in the Flats, the idea here was to create an interactive “map”-like design that essentially represented the area, particularly with the type of buildings depicting the industrial area. The taller the building, the more topics/conversations/comments were being posted. Users could click on each building to enter it’s thread to explore.
Right: Fluidity was the key concept here, utilizing oval-shaped 'bubbles' in varying sizes to indicate ‘the larger the circle the hotter the topic’. These bubbles would grow/shrink depending on the number of topics/conversations within each thread respectively. Another reason for this design was because our users indicated they wanted to know what the community was talking about, and also have a way to express an idea to gain traction. Hence, the ‘organic’, free flowing nature of using circles that grew in size made for a functional UI interface.
In both designs, the visual elements were created to serve as a starting point for exploring the discussion board. However, the primary goal is for the user to type in their thoughts/ideas/comments into the search box, which would help the user find relevant information, or allow them to post an idea and start a discussion.
We performed A/B testing to determine which design resonated with our users, and ultimately many users felt that our design on the right (oval-design)was an interesting and innovative way to illustrate our point.
Prototype
Feel free to explore the Invision prototype below:
https://invis.io/RCF7TAY6E#/272123767_MF-_Home
Future Considerations
In our 3 week time frame, we did not have sufficient bandwidth to complete the mobile wireframes, but this would be high on the priority list to be completed.
During organizational research on the existing online presence of False Creek Flats as well as the supporting resources available through the VEC website, noticeably lacking was a consistency in a subnav hierarchy, or bread crumb trails to help the user navigate. This makes sense, as we found during user interviews that many couldn’t find information on initiatives, projects or case study details regarding The Flats. This would require a partial or full content audit or heuristic analysis to help users navigate and find what they’re looking for.
Additional features that would add user value:
- Interactive map of business directory
- Better integration of the Flats Economic Development Plan
- Ability to follow progress of current projects
- Ensuring case studies are maintained/kept up-to-date with current data
- Ability to follow organizations, people, and projects
- Improved ranking system for discussion topics
