Vancouver
International
Film Festival
Mobile App Redesign
Sping 2019
As part of a 2-week design evaluation project, I redesigned the VIFF app by employing usability heuristics, as well as providing an experience more closely resembling VIFF's marketing collateral.
Responsibilities
Branding, UX Design, Prototyping
Tools
Sketches + Stickies, Figma, ProtoPie
Skills
Design Sprints, A/B Testing, Project Management
Responsibilities
Branding, UX Design, Prototyping
Tools
Sketches + Stickies, Figma, ProtoPie
Skills
Design Sprints, A/B Testing, Project Management
Discover
My team and I conducted a heuristic audit of the mobile app for the Vancouver International Film Festival. Following Nielsen's Heuristics, as well as through a number of user tests, I analyzed and diagnosed usability pitfalls and infractions
During the heuristic analysis, I found that the app's visuals were quite bland; it had a "default template" aesthetic. This was in stark contrast to the vivid colors and the bold typefaces used in VIFF's digital and print marketing collateral (designed by local agency ZAK). I saw this as an opportunity for a visual overhaul of the app, as well as solving the heuristic infractions that came up during our initial audit.
Image from wearezak.com
However, as project manager, I wanted to ensure that the project was not superficial. I really wanted to communicate the brand of VIFF through the screen and interaction design. For instance, since the festival runs three weeks out of the year, I knew a potential trap would be to raise awareness of VIFF's year-round screenings. I think design is as good as its constraints, and I made it clear at the outset that this is an experience design project, and not a marketing campaign.
Define
We began our design sprint by defining a persona for the VIFF's target audience: an enthusiast interested particularly in independent films, since a lot of her friends are students or makers of film.
We wanted the enthusiast to have motivation to be involved in the VIFF community from the outset, the roadblocks to which were encountered in the usability and joy-of-use issues of both, the iOS app as well as the website.
Subsequently, we affinity mapped our "how might we"s: ideating on ways to relieve the pain points faced by the persona and phrasing them as questions. This exercise helped us drive our process to diverge and possibly present opportunities beyond a quick fix to remedy usability issues, or a superficial facelift of the app.
Subsequently, we affinity mapped our "how might we"s: ideating on ways to relieve the pain points faced by the persona and phrasing them as questions. This exercise helped us drive our process to diverge and possibly present opportunities beyond a quick fix to remedy usability issues, or a superficial facelift of the app.
It became clear to me that a major overhaul of the information architecture was required; we needed an IA that more clearly communicated the membership requirements and put films first. The latter of those was a bit of a surprise: the first screen the user sees is a social network / discussion forum. This felt like a huge disconnect from the aforementioned marketing collateral, which beautifully celebrates films and filmmakers.
Develop
I began by sketching and information architecture beside a possible screen design. The IA had to be flat so that the mental model of the app was not lost during interactions.
Design doesn't happen in a vacuum. I researched precedents for such an architecture to get clues on interaction design. I determined the three buckets to be the main activity page, the membership / settings page, and a navigation.
We quickly found apps like Shazam and Snapchat to be applicable interaction models for our solution. Shazam in particular was of interest, since Snapchat's social network aspect made the app too complicated to study for our purposes (from a purely interaction design perspective).
We quickly found apps like Shazam and Snapchat to be applicable interaction models for our solution. Shazam in particular was of interest, since Snapchat's social network aspect made the app too complicated to study for our purposes (from a purely interaction design perspective).
Screenshots from Shazam for iOS
Shazam's use of color was also important to note, since VIFF has a strong styleguide of its own. And the use of type in the marketing collateral was the initial inspiration for the bolder UI design decisions. I wanted to ensure that the experience was driven by type, color, and images. My team assembled a rudimentary styleguide while I wireframed the screens and interactions.
Deliver
Color Continuity
A major pitfall of the original application was the hidden navigation. I used color to ensure that the user can maintain a sense of continuity between screens and interactions. In addition, having red-green colorblindness helped me ensure that the colors are distinct enough to avoid accessibility issues with most of the audience
A major pitfall of the original application was the hidden navigation. I used color to ensure that the user can maintain a sense of continuity between screens and interactions. In addition, having red-green colorblindness helped me ensure that the colors are distinct enough to avoid accessibility issues with most of the audience
Film First
I wanted to ensure from the outset that rather than the current version's emphasis on social integration, the films were paramount to the new experience. The film detail page tones down use of color to promote hero images and videos. However, the retaining the previous screen's color as an accent makes the navigational model easy to grasp.
I wanted to ensure from the outset that rather than the current version's emphasis on social integration, the films were paramount to the new experience. The film detail page tones down use of color to promote hero images and videos. However, the retaining the previous screen's color as an accent makes the navigational model easy to grasp.
Brand Forward
The VIFF brand is a valuable cornerstone of the arts community in Vancouver. The communication of this brand on the street is evocative, exciting, and alluring. The digital experience should at least mirror that, and at its best, amplify it. The app is what visitors use to make their way to and through screenings and events. To ensure that every touchpoint is equally serviced is to ensure that overall experience is cohesive and engaging.
The VIFF brand is a valuable cornerstone of the arts community in Vancouver. The communication of this brand on the street is evocative, exciting, and alluring. The digital experience should at least mirror that, and at its best, amplify it. The app is what visitors use to make their way to and through screenings and events. To ensure that every touchpoint is equally serviced is to ensure that overall experience is cohesive and engaging.