The Flats

The Flats

Vancouver's engine of economic, environmental sustainability and innovation.


Vancouver's engine of economic, environmental sustainability and innovation.


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 it’s 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 showcase this product.


Interested in an in-depth breakdown of the design process?


UX | UI | IA | Web

UX | UI | IA | Web


3 weeks


Web (Desktop)


UX Designer: Bryan Leung (me)
UX Designer: Lara Hughes
UX Designer: Michael Lelli


Create an online platform/tool to improve collaboration amongst the community.

Design Tools / Methods Used:

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)




Screen Shot 2017-03-08 at 11.22.46 PM.png


User Interviews were conducted in order to determine the core features of the website. Interviews were conducted with three primary user groups, across nine different parties. Testimonies from the user interviews were directly used to inform the design decisions, particularly in creating the Case Studies detail pages, where we managed to effectively incorporate both user and business goals through various design choices.

Derek Flow.png


User Flows were created in order to reinforce the overall information architecture of the web platform. Once the primary user persona was defined based on user research, the necessary content and features were concurrently mapped out in order to resolve the frustrations and fulfill the goals of our users. 

usability testing.png


User Testing was conducted in order to solidify design choices. In particular, A/B testing was performed with two significantly different design execution styles for the Discussions section. Specific criteria was defined to pre-screen the appropriate users, prior to providing them a task to find information and participate in discussions using a prototype.


Interested in reading more about my design process?