Case study: Mobile app for YES! Vancouver

In weeks 4 to 6 at RED Academy we worked in a team of five on our first Community Partner project. Our Community Partner was YES! Vancouver, a networking group for professional women that provides financial support to Dress for Success Vancouver program. Our task was to create a mobile app for members of YES! Vancouver.

Our team was made up of three UX designers, including myself, and two UI designers. Together with my three teammates, I was responsible for all the stages of the UX process, including domain research, organisational research, comparative/competitive analysis, user interviews, planning and testing, as well as creating mid-fidelity digital wireframes and a high-fidelity clickable prototype.

What exactly is YES! Vancouver?

YES! Vancouver is a membership-based networking group for professional women in Vancouver. For a $100 annual donation, members get access to member-only networking events, discounts for open events and other benefits. All donations and funds raised at the events go to the Dress for Success Vancouver program.

Recent YES! Vancouver events (from YES! Vancouver website)

Perks program

As a part of their membership privileges, YES! members get discounts from different perks partners across Vancouver. These include spas and beauty salons, educational institutions, workspace hubs and more. Currently YES! Vancouver members claim their discounts by showing a simple key fob to the vendor. The fob is not an ideal solution; it is easy to lose, does not have a chip or a barcode to automate the process, nor the member’s name or photo to serve as a form of ID. There is also no way to distinguish ex-members (who are not eligible for the discount anymore, but haven’t turned in the fob) from current members.

Research

Understanding our client

Before our kick-off meeting, YES! Vancouver prepared a list of things that they would like the mobile app to achieve:

  1. Engage with member base, Perks Partners, sponsors, attract new members.
  2. Improve communication/updates to members, showcase partners and sponsors, improve Perks Partners program.
  3. Provide a more holistic service in one platform.

In the meeting, the YES! Vancouver representative, Ciara, and our design team discussed these goals together, prioritised them and determined that our main focus for this project should be the perks program. We were also interested in the networking aspect of YES! Vancouver, as it is reflected in the mission.

Understanding our user

We conducted phone and in-person interviews with six YES! Vancouver members. The following issues came up repeatedly in our conversations:

1. Perks program? What perks program?

“No, I don’t use the perks. I think I lost my fob; it’s probably in my car somewhere…” — From a user interview

There was surprisingly little awareness of the perks program among YES! Vancouver members. Some of the people we spoke to had never heard of it. Others had a vague idea of the perks, but they were not sure if they included any offers they could be interested in. The fob, rarely used, non-informative and easily misplaced, did not help the matters.

2. What’s-her-face

“I met this startup founder at the last event, and we had a wonderful conversation, but then I lost her business card.” — From a user interview

Among things most valued about YES!, all interviewed members unanimously named networking and building meaningful connections. Most of our interviewees did not have much trouble connecting with others during or after the event. However, some mentioned that they had missed networking opportunities because they had lost the business card (or forgot to ask for it in the first place).

3. Upcoming events

“I usually hear about YES! events accidentally, if they bubble up on my Facebook feed.”— From a user interview

To find out about future events, most people relied on word of mouth or social media. None of our interviewees visited the website specifically to find out when the next YES! event was happening. So they could potentially miss out on some events if the notifications happened to be buried under other posts.

4. Dress for Success

“It’s incredibly inspiring to hear the stories of Dress for Success graduates.”— From a user interview

A few members mentioned that they found it very valuable to hear from women who they are fundraising for — the clients of Dress for Success.

Understanding the perks partners

YES! perks providers come from a variety of backgrounds; some of them only have a brick-and-mortar store, while others usually accept payments online. In some cases, the registration can be made over the phone. Therefore, we aimed for a solution that would also make it easier for perks partners to apply the discount.

Based on our conversations with YES! perks partners, the most common ways for processing the discount were scanning a barcode or entering the discount amount manually (at a physical store), or applying a discount code (at an online store). Other methods (e.g., when registering for a workshop over the phone) were less common and usually required the perks partner verifying the list of YES! Vancouver members.

Understanding the competition

We examined some other apps, websites and organisations that handled events (Eventbrite, Meetup, Picatic), networking and messaging (Facebook and Messenger, LinkedIn) and discounts or vendors (SPC, Pacific Centre mall). The goal of our competitive/comparative analysis was to identify industry conventions and most useful features.

Below is an example of a feature-based competitive/comparative analysis we did for event managing apps. It looks at most common or most important functions, with the right column designated for the potential YES! Vancouver app:

Planning

User persona

From the information we gathered during our user interviews, we summarised the most prominent trends and patterns into a user persona:

We also came up with some user stories to reflect our user’s main goals and motivations:

Epic user story

“As a busy professional, I want all the information related to YES to be easily accessible from my phone, so that I don’t have to search the website and social networks for it.”

Perks Program

“As a YES member, I want to be more informed about the perks program, so that I can take advantage of deals and offers.”

Events

“As a YES member, I want to be informed of upcoming YES events, so that I can attend the ones I am interested in.”

The full list of user stories can be found here (opens in Google Doc).

Structure

Based on our research, we determined five main elements that the YES! Vancouver app should have:

  • List of upcoming and past events
  • List of perks partners and offers available to members
  • Up-to-date information on YES! Vancouver and Dress for Success
  • Messaging to other YES! members (in particular, the ones who attended the same networking events)
  • Profile to check membership status and extend annual membership

We also determined user flows for each of the components; as an example, the Perks flow can be seen here (opens in Google Drive).

Testing

After the planning stage was completed, we drafted our first paper prototype and tested it with some users, including YES! Vancouver members. There were five testing sessions at this stage; based on our observations and feedback we got from our users, we introduced changes to our prototype after each session.

After the first round of testing, we worked with our UI designer teammates to create mid-fidelity and high-fidelity prototypes. These were tested by our users as well, with revisions happening throughout the process as we uncovered pain points and desired features.

The Perks Partners list (below) underwent some of the most dramatic changes throughout the testing. Filter options from the paper prototype had been modified a couple of times, and eventually were replaced by tabs in the mid-fidelity version. We also added a Favourites category, which was not a part of the original design, but came up repeatedly in our user tests.

The Offer screen (below) also saw a few modifications. Initially this screen included a photo of the YES! member (something that perks partner representatives found useful). However, YES! members themselves were confused by it, so we removed the photo from the design. We also made the instructions on redeeming the offer more explicit and clear.

Final prototype

Three weeks after our kick-off meeting, we presented the final high-fidelity prototype to YES! Vancouver, and it was very warmly received. The app is currently being developed; as for the prototype, you can interact with it here:

Future considerations

Due to our three week time limit, we were not able to test the entire prototype, focusing on the main flows (logging in/creating an account, registering for an event, redeeming perks). Other parts of the app, in particular, the messaging functionality, would still need to be tested.

Another idea that we played with was allowing non-members use the app as well with limited functionality (without access to perks or messaging, but with ability to register for events and purchase a membership). The Profile screens in the prototype show different states for members and non-members, but the flow has not been tested, either.

Reflections

As our first “real client” project and first team project, it was more challenging than the previous RED Academy challenges. However, we worked smoothly as a team, stayed focused on the goals, and it helped us design a mobile app from scratch in just three weeks. Not only it was a great learning experience, but we were actually able to produce something that will potentially be used by our client.