aito-heroaito-hero

Role - Lead Designer

Client - Venture Niagara

Agency - Form & Affect

Engaging with audiences to promote Niagara's various artworks, and adding significance to the civic spaces they inhabit.

Established in 1985, Venture Niagara is a not-for-profit organization that focusses on community economic development, business advisory services, and small business lending.

Seeking to create a new tourism feature, Venture Niagara asked Form & Affect to create an application that would act as a creative link between Niagara’s communities by promoting Niagara's various outdoor artworks along with the public spaces they inhabited.

With 400+ pieces of outdoor artwork spread across Niagara's 12 municipalities, there wasn’t a visual tool to celebrate those artworks or a comprehensive data base that housed their information.

02. Solution

Develop a mobile application that appropriately showcased the appearance, location, and extended information about these various artworks, and encourage users to visit their locations.

[unex_ce_button id="content_qt57ck4od,column_content_5bywabw8d" button_text_color="#ffffff" button_font="regular" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#ff4c5e" button_padding="5px 16px" button_border_width="0px" button_border_color="#ff4c5e" button_border_radius="25px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#ff4c5e" button_border_hover_color="#ff4c5e" button_link="" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]1[/ce_button]

Merge several databases from different sources into a single location, and organize, as well as cross-reference, the information and data provided.

[unex_ce_button id="content_qt57ck4od,column_content_r0cocq0k6" button_text_color="#ffffff" button_font="regular" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#ff4c5e" button_padding="5px 16px" button_border_width="0px" button_border_color="#ff4c5e" button_border_radius="25px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#ff4c5e" button_border_hover_color="#ff4c5e" button_link="" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]2[/ce_button]

Connect with, and inform, the Niagara community about its rich artistic heritage by providing instant access to the library of Niagara’s outdoor artworks.

[unex_ce_button id="content_qt57ck4od,column_content_gt4eewsyb" button_text_color="#ffffff" button_font="regular" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#ff4c5e" button_padding="5px 16px" button_border_width="0px" button_border_color="#ff4c5e" button_border_radius="25px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#ff4c5e" button_border_hover_color="#ff4c5e" button_link="" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]3[/ce_button]

Utilize user’s mobile device behaviours and create informative, yet, simple interactions with the artworks via the app.

03. Users & Audience

It was important to better understand the audience, and gauge how people envisioned using this app. Which is why before we came together as a team and presented my initial assumptions on how the app should flow, I conducted stakeholder interviews and sent out user surveys to help me gain some insight into users' motivations. The research conducted led me to making sure the experience was as frictionless as possible.

04. Structure & Flow

Having determined the core audience and project goals, I then took a top‐down approach to defining the overall structure of the experience. I kept the user flows and information hierarchy as straightforward and flat as possible so users could focus on the content rather than the process of finding it.

 

Creating user flows forced me to consider the multi-device touch points throughout the experience. I was able to adjust and iterate certain aspects within the entire experience with a more wholistic point of view. In the end, due to budget and project timeline, some key features had to be nixed.

Initial User Flow + Wireframes

Refined User flow + Wireframes

05. Iterative Process

Once the main flows were fleshed out, I then generated stacks of ideas about the arrangement of the interface, functional and data elements, as well as interactive behaviours, via sketching, storyboarding, and wireframes. The app went through a few iterations before landing at its final design. These initial concepts focused around a very condensed view of the content via a small tab. The problem with this solution was there wasn't enough visual content being shown, and it resulted in a subpar experience.

 

We then decided to begin formulating the overall aesthetics of the app by styling only the preview card. By doing that, it allowed those results to drive the design of the remaining screens. The short amount of time invested up front by working through these iterations was very helpful because it let us to set the tone and visual style for the rest of app.

 

By starting broad and at a high‐level, my vision began to evolve into something tangible. The design language, interactions, and the app's overall anatomy began to slowly come together.

06. Interface Design

The overall brand aesthetic and marketing strategy for this app were already established before I joined this project. Since the app was map centric, and also used as a content management system, I opted to use a lighter coloured theme to increase legibility in outdoor conditions, and layered the vibrant brand colours as accents.

 

The design is intended to be uncluttered, clean, and well spaced. The touch points throughout the app are meant to strike a balance between both touch based and gesture based interactions because it had to feel modern and young, to fit this younger demographic. The transitions between the cards reinforced each of their different contexts, and created an engaging and compelling interface.

07. Final Screens

Design Details

08. Closing Thoughts

I spent quite a bit of time researching how users interacted with current mapping services and various social apps and documenting what each one did well, where they missed the mark, and how I could possibly incorporate some features while differentiating the end product to avoid being just another map with markers.

 

That's why Snapchat was a big influence during the initial stage of the design process, since part of it’s main demographic is who we were aiming to educate and inform. Not only did it need to cater to the users that grew up using cell phones and social networks, it needed to cater to the ones that didn't. I wanted the app to embrace a young and care-free perspective because no matter what the experience was like, it was all about the content. It needed to feel social, but not too social.

 

 Unfortunetly, I left Form & Affect before this project launched.

[unex_ce_button id="content_rbfawm66t,column_content_x76o40qj1" button_text_color="#884cff" button_font="bold" button_font_size="14px" button_width="content_width" button_alignment="center" button_text_spacing="1px" button_bg_color="transparent" button_padding="15px 60px" button_border_width="2px" button_border_color="#884cff" button_border_radius="50px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#884cff" button_border_hover_color="#884cff" button_link="https://projects.invisionapp.com/prototype/cjmu0dnjf00cvqq018iqra612/play" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]VIEW PROTOTYPE[/ce_button]