Broccoli: An Exploratory Concept To Empower The Vegan Community In London

Design intervention to empower the London vegan community

• contextual inquiry
• invision prototyping
• low-fi/high-fi prototyping
• storyboarding
• surveys
• think-aloud
• user testing

From September to December 2017, I conducted secondary and primary research alongside a team of four. We explored digital interventions that focused on empowering and engaging the vegan London community. The paper, alongside with a conceptual video and presentation poster, was part of my MSc Human-Computer Interaction, Interactive Design (IxD) module, and a submission to the CHI Student Design Competition 2018.

This article summarises a University assignment paper. You can check the original paper with in depth analysis and references as PDF.

Figure 1: Main figure of Broccoli

Challenge

Broccoli is an exploratory concept which was designed as part of the CHI Student Design Competition 2018. Our challenge was to empower a community of our choice through technology. We chose the London vegan community because the number of people who opt for a vegan lifestyle and diet had a 360% increase in the UK in the past decade, representing 22% of the UK population. Despite the rapid adoption, veganism is still a novel concept for many, and it is ridden with stigma, which can indimitate new adopters of this lifestyle. We found a gap in technology in supporting the London vegan community. Our goal was to design a product that would enrich, empower and sustain the vegan lifestyle in London.

Working with 82 members of the community, we applied an iterative design approach, using methods such as: secondary research, contextual inquiry, surveys, low-fi/high-fi prototyping, invision prototyping, think aloud, user testing, to ensure our product fits the community needs through constant user feedback.

The original paper was written mainly by myself with feedback from the team. All illustrations represented on this page are created by me.

Abstract

As veganism in London expands, the need for a supportive network for vegan Londoners becomes increasingly vital. There are a few digital tools that help it achieve the level of exploration it requires and that are also compatible with their lifestyle choices. In this paper, we present Broccoli, a conceptual mobile application that connects its members through clear visibility to community-contributed content, such as social events, shops, restaurants, and announcements. Additionally we explore leveraging gamification by engaging the user via achievements and their avatar, and access community-reviewed information via tips and questions. Broccoli explores the advantages of augmented-reality (AR) to provide a real-world perception of the user’s contribution and environmental impact. By working closely with 82 members of the London vegan community, we created a product that is superior due to fulfilling the need of a unified and dedicated platform for the community to express itself.

Initial research

Veganism is "a way of living which seeks to exclude all forms of exploitation of, and cruelty to, animals for food, clothing or any other purpose".

Our initial research consisted of secondary research and working with existing sources. To collate our data, we created affinity diagrams, mind maps and proto-personas. From this, three main themes emerged: veganism, community and engagement.

Figure 2: Affinity diagram exploring the three emerging themes: veganism, engagement and community.

We found that we can leverage gamification such as implementing challenges or achievements to motivate the user to stay active, and technology such as augmented-reality (AR), customisable avatars and location-based interaction were proven to encourage engagement. We decided to explore these approaches and test these hypotheses with our target user group.

User research and findings

From surveying 70 participants during a vegan festival (VegFest London) in person, we found that the London vegans are mostly new to the vegan lifestyle and within the age range of 18-35.

We also conducted contextual inquiry to gain insight about how they use technology to engage with their lifestyle and community. Our research suggested that London vegans believed that ethical reasons for animal welfare was a strong reason for going vegan, followed by environmental impact and personal health reasons.

Furthermore, we learned that vegans relied on technology (i.e., apps, online platforms, social media) for finding food recommendations and also learning relevant information from community members. Many vegans felt primarily motivated to sustain a vegan lifestyle by seeing their impact on other living beings and also learning new ways to live ethically. Although the London vegan community used various means of technologies to engage, there was a need for a unified platform.

Initial design

Since a majority of our participants stated that their main motivation factors is seeing their impact to some capacity and learning new ways of living ethically, initial brainstorming centred on two particular notions: (1) the need for ubiquitous technology and unified platform of getting relevant information on demand, and (2) the visualisation of one’s impact (i.e., interacting with animals) as they engage with their lifestyle.

Because our studies showed that the vegan community relies heavily on technology to find information, a mobile app was most suitable as smartphones are ubiquitous in our day-to-day lives and the majority of our demographic can incorporate the application into their routines. We focused on three main features within our app:

• Exploratory View: we chose this as our centre of interaction where community-generated content will be displayed on a map based on current location or a searched area in London.
• Augmented Reality (AR): offers a real-world perception and interaction, allowing users to view a real environment with augmented objects, with research suggesting a huge potential in engaging people for concept-learning in education settings and visualising products for consumers.
• Avatar: to increase engagement and feeling of involvement, each user will have a customisable avatar representing an animal, vegetable or fruit whose mood changes depending on how much they engage with the community through the app (i.e., attending events, rating businesses).

Storyboarding

We created some storyboards to help our ideation process and to better visualise how our users could interact with our product.

Figure 3: Storyboarding

First row, from left to right:

1. Entering a vegan restaurant: The user arrives at a vegan location such as a restaurant
2. Getting notification with tips based on location: The user can get tips about the place they are visiting
3. Display tip on map: If the user opens the notification they can see the map and the tips available
4. Share: the user can now also share tips and reviews about that location

Second row, from left to right:

1. The user opens the app to search area
2. The user can see shared tips on maps and is able to open them by tapping on the author’s avatar
3. The user can also discover new places via location tags
4. The user can get directions to the location
5. The user can also use AR to find information about a place

AR Ideation

The biggest challenge was to test augmented reality (AR) with our users. As actual implementation was not possible, initially, sketching was used to get quick feedback. Some of my sketches with example features are found below.

Figure 4: AR ideation sketches

From left to right:

1. AR Challenge Concept: a member of the community can set challenges which the user can get based on location. A challenge can turn into personal goals and when achieved, a new animal will be rescued.
2. Stats view in AR: it was important for the community to have more visibility to their environmental impact. As such, we introduced statistics which are displayed at a location. The user can take a photo and share it with the community.
3. Share with AR: the user can share the animals rescued from the AR by taking a picture. They can also add text, and location is added automatically. Once they tap share, the new post is on the exploration map.

Expert evaluations

I created a few wireframes of our mobile app views from sketches to more high-fidelity user interfaces. As a team, we conducted heuristic evaluation and cognitive walkthrough to assess them.

Figure 5: Rough sketches of mobile wireframes

Following expert evaluation, I changed the tutorial on the first page to a preview of the app and added the tutorial at the end of the first login action, which the user can skip and resume from the app later. I added better spacing and grouping to the input fields for visual clarity and color and underline for links for accessibility.

Figure 6: High fidelity mobile wireframes, created in Sketch

User evaluation

Applying low-fidelity techniques for rapid prototyping, we built a paper-prototype. Six participants were recruited at a vegan market and asked to navigate the different views and add posts. We encouraged participants to think-aloud as we wanted to gain immediate thoughts and concerns of specific areas of the application. We wanted to achieve the following:

• Evaluate clarity of overall design
• Assess the ease of performing core tasks (i.e., select a point of interest from the map and interact with the functionality)
• Decide on whether the usage of AR is effective in displaying the user’s visual impact

Although this reinforced our main features, it helped establish what in particular is important to the users and what should be further addressed:

Firstly, we added more focus and priority to improving the AR functionality and generally making it more functional by adding a stats perspective where users’ surroundings are populated with facts about their environmental impact.

Secondly, we changed the point-based rating system from 0 to 5, because we do not want businesses or users to feel competitive in a negative way. We developed the idea of a verified icon that appears if the business/brand on the map has received more than 100 users’ feedback. This will also discourage users from abusing the rating system.

Finally, the main performance of the users will be based on engagement and the rewards given to self-accomplishing a set number of chosen activities to improve their community experience. The user’s lifestyle impact is shown in the evolution or state of the AR animals and their avatar. For example, the higher the user engagement with posting content and attending events in the London community, the higher the positive impact will be reflected in the AR camera view (animals and environment statistics).

High-fidelity prototype & user test

To address the changes above, I created a high-fidelity prototype by programming a mobile app, using Ionic and InVision, that would simulate the main features. This provided users with a more interactive experience by receiving a better look and feel of the app. I separated the main functionalities of our app in three tabs at the bottom of the screen to replicate the mobile platform specific design guidelines.

View on inVision

Exploratory View

The users are presented with a map containing all user content based on the location and a small preview of the user post, following our heuristic evaluation. The user can view more details about a post by tapping on the small preview card at the bottom: as mentioned above the post can be about a business (restaurant/brands), an event, a meetup, a question or an announcement.

The user can save a post by tapping the heart icon. They can filter the type of post by tapping the top right button and can add a post themselves by tapping the top left one. The camera button at the top center would open the camera for AR view.

Saved View

This view is divided into post categories. For the purpose of the demo, we divided them into tips, events and questions. Here, they can view posts that they have saved for future reference and also remove them if no longer needed.

Profile View

Upon clicking the profile tab, users will be able to customise and see their own avatar as well as stats about their activity.

We recruited 6 members from the UCL Vegan Society to conduct a usability test and focus group to get feedback about our final product. Similar to our low-fidelity prototype testing, we wanted to know how the participants feel about our product and the implementation of the features. We asked participants to add a post, save a post, view a post and search on the map. We again encouraged them to think-aloud while exploring the prototype. Furthermore, we conducted a focus group to get their ideas on the AR functionality. Some feedback below:

"The AR function seemed quite fun and engaging, and the other functions quite easy to use."

"Pleasantly surprised! I didn’t know what to expect frankly, but I think it offers something different to the current social media apps."

"I liked the AR! And the fact that the app gives you points when you eat vegan food."

"I would love to see a beta version of the app to be able to give more detailed feedback about it."

"I like the visualisations and unlocking achievements."