UX/Interaction Designer
Cover page_edited.jpg

GNW Creative Community

Interactive app to showcase the potential vibrancy of a real estate space.

App Design & Development  |  Java; Processing  |  Role: UX Designer, Developer  |  2017

 

Media presentation for PCI Developments Corp

PCI, a Vancouver based real estate developer & investor, approached the Centre for Digital Media to develop a digital solution to convey information to the general public regarding the Great Northern Way Campus site’s development. For three months, I worked with a team of five on this project, taking on the role of UX Designer and Developer. Besides myself, there was a Project Manager, two other Developers and a UI Designer.

 

The Challenge

The Great Northern Way (GNW) Campus is an area that is undergoing development. The scale and form of its future is still being shaped. Our client, as one of the land developers, has its vision for GNW - that of a vibrant, energetic creative community. They tasked us to come up with an innovative way to convey this vision to the public, for use in showcases and open houses, and for general marketing purposes.

 

User Research

personas-2-744x963.jpg
personas-8-744x963.jpg

We wanted to build a media presentation that would leave a deep impression of the creative, exciting place that GNW could become. To do this, the presentation had to resonate with the target audience. We first considered and analyzed their interests and potential concerns. After categorizing the relevant stakeholders, we created persona sheets and empathy maps for them, to represent these considerations.

To verify any assumptions we had made, we interviewed people who were involved in public relations for GNW. With a better understanding of the audience, we mapped out the features of GNW that would be of most interest to them.

 

Conceptualizing Our Product

Our client wanted an interactive and innovative product in line with their vision of a space that encouraged creatives and technologists to work, live and play in. Therefore, we drew inspiration not just from presentations in the field of architecture, but also museum exhibitions, games and experimental media artworks. We involved our client in the discussion and selected three concepts that were most suitable, and built low-fidelity versions of them for user testing.

2.png

By observing the users' responses to the prototypes, we narrowed our choices down to two. The first concept allowed users to create their own version of GNW by customizing spaces, and the second followed the life of a person as he or she grew up in GNW. At this point, our client decided that they wanted to convey the positive impact of having a mix of land uses on GNW. Thus, the first concept was chosen.

"We want to showcase how different mixes of uses in GNW can make this area a much more exciting place."

Screen Shot 2017-05-05 at 4.18.21 PM.png

After the selection of the concept, we initially researched on the possibility of a physical product, using either mounted cameras or RFID tags. This setup would allow many people to interact with the product at the same time. However, taking into consideration the low portability of a physical setup and the risk of breakage, we also came up with an alternative digital solution that was more robust. We presented the cost-risk analysis to our client, and they decided to go for the digital solution: a tablet application.

The tablet would be limited to one person at a time, but the tablet screen can be projected onto a larger display, allowing multiple people to join in on the experience. It was also highly portable, and easy to maintain.

 

Production & Iterations

With a clear concept, I worked on a storyboard in order to visualize how users would interact with the app, and the steps that they would go through. This helped to shape the app's interface and interactions.

It took a couple of weeks and several iterations to build a prototype that would be ready for a full-fledged user testing session. During this period, the development and UI pipelines proceeded separately. As we wanted to show our client the feel of the app as soon as possible, I chipped in to design the map of GNW. Many mini-user tests were conducted for the interface, in order to ensure that each detail was designed in the most intuitive way for users. Such tests involved providing options for elements like layout, colour and font sizes.

 

Flow Animation

Our client was mainly interested to see how the people flow was designed and whether it would be able to convey their message. I took up the role of designing the flow. Making use of my skillsets in both animation and programming, I worked directly in code for the design, so as to ensure that our proposed animation worked as good as it looked.

An important consideration was that the flow had to run smoothly on a tablet, which had lower processing power than a computer.

Several versions of the flow were shown to users, and was improved on iteratively until it was obvious that it represented people.

i3.gif

Throughout the project, I worked closely with the client to determine the logic behind the flow animation. I devised a matrix that would control the flow from one building use to another. Together with our client, I refined the matrix and the flow logic a number of times, keeping in mind the aim of showing a higher volume of flow when building uses were mixed. I worked closely with the other developers in the team to integrate the flow animation and logic into the code written for the interface. The matrix was then created as a text file so that the client could easily make changes to it when necessary, even after the conclusion of the project. The look of the flow was also improved by using colours to represent different types of people, making it more interesting.

 

Importance Of Affordances

The intuitiveness of the app was another area we focused on. In our user tests, we found that many users preferred to try out how the app worked before looking at the instructions. Therefore, we had to design the app to be intuitive enough to use on its own. Details were carefully designed and added, such as having a blank background for customizable blocks and a coloured dot to denote added uses, a finger swiping symbol to show that the map can be scrolled horizontally, and a cross symbol on icons to show that they can be removed by tapping. 

As the screen estate was very limited on a tablet, we had to think carefully on how to make best use of the space to convey information, without cluttering up the interface.

 

Results

Our client was impressed when we presented the final product to them. It was an app that they could use immediately, and had successfully met their needs.

"ARCH was a pleasure to work with to develop the GNW Community planning tool. The app’s ability to clearly and flexibly demonstrate PCI’s vision and the many land use scenarios in the new community has been – and continues to be – well-received when presented to local stakeholders. The successful reception and the immediate engagement with this interactive visioning technology was made possible through the combination of creativity, innovation, technical expertise and focused project management that ARCH brought to the project. We are proud of what ARCH delivered."
 
- Christina Chan, PCI Developments Corp.
 
 

What I have learnt

Designing and developing for a mobile device is not easy. Elements have to be considered very deliberately due to their limited screen space and power. As such, constantly thinking about how to convey information in the most concise manner visually and user testing these methods paved the way for our success. 

It was also important to engage the client, and involve him or her in the design process in order to ensure that the product was in line with what they needed. At the same time, it is imperative to constantly refer to the goal that we are aiming for, and analyze if the direction that we are going in serves to meet this goal. We need to open our minds to throw away ideas that don't contribute to the goal, and embrace ideas that may come from unexpected avenues.

Finally, I have learnt how to split development work among multiple developers, portioning out the parts of the app to work on separately, as well as version control through GitHub to minimize conflicts and simplify the merging of code.

 

For more in-depth details, you can read the week-to-week log of our project's process in our team blog.