The Inspire Project

by Team Wakanda

The project/app’s value proposition

Introduction

We are C8 Team Wakanda (Chanchev, Ryan, Stephen, and I), and we will be an introduce you to our mobile app: “Inspire”. Inspire is a central hub for performers of all crafts and talents — music, dance, acting, visual arts, juggling, you name it. Connect with a diverse network of performers, livestream your act with a global audience, view the works of other talents, and be inspired. The rest of this post will go over our entire design process, from the activities and decisions we made to arrive at our final product.

Our value proposition is to let your voice be heard and let your art be seen. The high-level problem we are trying to solve is the lack of opportunity amateur artists face in an entertainment industry dominated by celebrities and already established artists. This is a common reality for many up-and-coming performers. Most of them struggle to get their foot out the door, and because of this, they eventually give up their goals under mental pressure, financial pressure, or both. It happens all too often to artists who possess the inherent talent and would otherwise make meaningful contributions to their art if given the right opportunity.

Our app aims to satisfy amateurs’ need for publicity and supporting their demonstration of artistic talent.

Empathize & Define

Personas

Initiating the design process started with understanding our users. To empathize with our users, we developed user personas to represent our target demographics. Our demographic consists of two segments: performers and fans. For performers, we created Drew Bernard, a 30-year-old recreational guitar player working as a salesman at a Staples corporate office from urban Philadelphia.

The Persona and Empathy Map of a performer, Drew Bernard

For fans, we created Rishi Judy, a 17-year-old high school student with a diverse music taste as a hidden music enthusiast.

The Persona and Empathy Map of a music/arts enthusiast, Rishi Judy.

We kept these personas in mind as we worked through the entire design process.

Exploratory Studies

To further understand our users, we also conducted interviews with both performer-based and fan-based participants. All of our performers expressed their frustration of having difficulty in gaining a fanbase, as our platform hopes to address. Some of our other learnings from these interviews:

- Audience engagement makes the performance experience much more memorable.

- After enjoying a performer’s acts/works the first time, fans are much more likely to engage with them regularly in the future.

- Current virtual livestream technology is not as good as in-person performances for engaging the audience.

- Fans typically won’t go out of their way (i.e. buy tickets, travel) to support new artists.

With these findings, we proceeded to the define stage to analyze our user’s needs and understand the process users would follow to complete their desired goals. To analyze the findings of the empathize stage, an affinity diagram was used. To understand the tasks user’s complete to achieve their goals, a hierarchical task analysis (HTA) was used for four tasks user’s complete within that problem space.

Affinity Diagram

An affinity diagram was used to cluster the data found from the interviews and observations. By writing down points on sticky notes, information was grouped into meaningful units. This allowed us to find common issues that users face.

Affinity Diagram Constructed from User Interviews.

From the affinity diagram, there were two points of views that had to be considered for the product: the amateur performer and the audience. When considering the performance artists it was evident that the method of sharing their work was the most important topic. Mediums such as social media and small live performances were the primary methods of showcasing their work. Furthermore, it was noted that many of these artists spoke about their ideal wants and concerns in regards to their performance careers. It was evident that these individuals wanted to get their work known but also do so in an environment where they were supported and not exploited.

From the audience’s point of view, we were able to cluster ideas into a few main categories. The most important being watching live performances, interacting with the artists, and discovering new artists. From the findings, it was clear that not many people would go out of their way to travel and see new artists they didn’t know perform live. This showed that one of the main issues that needed to be overcome was creating rapport between the performer and the audience.

Hierarchical Task Analysis

With the findings from the affinity diagrams, a task analysis was done for essential tasks within this problem domain. The four tasks discussed below were chosen as they encompass, at a high level, tasks that involve the different types of users of the product.

Audience attending a scheduled event of an Amateur Artist Performing/Showcasing Art

The first task is the audience member attending an event of an amateur artist. The individual first needs to be exposed to the event. Next, they need to plan for attending the event. To do so they need to be provided the necessary information about the show. Afterwards, most people decide on a group of other individuals to go to the show with. Many audience members enjoy being able to interact with the artists. During the event, the audience will experience the show. Afterwards, they will exit the venue, and based on how the audience enjoyed the show, their future interactions with the artist will vary.

The second task is from amateur artists and whom showcase their work at an event.

Amateur Artist Performing/Showcasing Art at an Event or Scheduled Performance

Before the show, there is a great deal of planning involved. The artist needs to perfect their craft which varies depending on their craft. The artists will also have to create demo videos so that organizers know what they’re signing up for. Finding a venue and promoting the event go hand in hand. The final step is the actual performance. This step is fairly self-explanatory.

Organizers setting up a small performance venue

The third task is for a user to experience a digital performance and event. First, the user must browse through possible performances. As the performance time draws near the user might be given the chance to socialize and interact with the performer. In some cases, user’s can pay extra to receive bonus features like a one on one call. Once the show starts, there can be various means of interaction like a fan cam, chat, or polls. Once the performance is done, there are options for the user to leave comments, follow, or interact with the performer.

Audiences watching performances virtually through phone/laptop

The final task examined in this domain is the organizer setting up a small performance venue. To do this, the organizer needs to generate contact with possible artists. Once candidates have been identified they can be screened through an interview process to determine if they’re the right fit for the performance. After the candidates have been interviewed a decision on who the performers are can be determined. Next, an event location has to be determined. Then, the organizer needs to reach out to property owners, negotiate a deal, and book the venue. This step can be skipped in the scenario where the organizer owns a venue. Next, the organizer needs to book a crew and rent equipment for the event. If the event organizer already has access to the equipment and operators it’s a manner of organizing and allocating resources.

Ideate

After completing the previous exploratory activities which involved user interviews and user tasks, our team started coming up with ideas for the application’s features. We used the Miro Board to brainstorm ideas, then we each picked one idea to further explore.

These four features are:

  1. Live Performances
  2. Visual Arts Portfolio
  3. Integration with other livestreaming entertainment platforms
  4. Social features (friends, messaging, coordinating events)

Design arguments, user stories, and user epics were then created for each of those features. The four user stories (corresponding to the feature ideas above) are:

User Story 1: As an amateur artist, I want to perform in front of an audience so that I can grow my fanbase.

User Story 2: As an artist, I want to display my portfolio and also explore new art pieces from my contemporaries so that I can be inspired.

User Story 3: As a fan, I want to be able to live stream my favourite artists on the platform that I’m most comfortable with (whether that is Twitch, Youtube, etc.) so that I don’t have to spend time getting accustomed to new platforms.

User Story 4: As a fan, I want to coordinate attending concerts/events with my friends and also meet others with similar artistic tastes so that I can develop a social circle of like-minded people.

We then created storyboards that describes the users’ problems and perspectives regarding the features described above. One storyboard was created for each user story.

Storyboards for the user stories.

After storyboarding, a better perspective of the users’ thoughts was gained. This was a good activity to ideate how each feature can be implemented and used efficiently. Then, each member of the team selected one feature to do a ‘Crazy 8s’ brainstorming activity, keeping in mind the user stories and the storyboards created. The activity was very hectic, yet fun and rewarding.

After the brainstorming activity. the team then collectively decided on the two screen layouts created from the activity that best represented each feature. Each team member would then decide the set of screens needed to implement each feature, and then sketch out the screens’ layout and structure.

We then connected each set of screens with user flows. The hierarchical task analysis done in the previously assisted us with what common tasks users would like to do specifically in these user flows. We added as much detail as each feature needed to make it understandable.

User flow — Live Performances feature

The first user flow above demonstrates how any audience member can watch an artist’s live stream virtual performance and feel like a ‘real’ one by seeing other audience members as well. The performer can be using the Inspire app on their phone to live stream, which includes capabilities to connect to external recording devices.

User flow Visual Arts Portfolio feature

This next user flow shows how a user can explore different visual arts and artists, as well as get recommendations for works of art that they may enjoy. It is also possible to explore different types of arts, such as music and dance through consuming audio or video files instead of images.

User flow — Integration with other live streaming platforms feature

The user flow above shows how a fan can stream their favorite artists’ performances on the Inspire app, or any third-party platform, and be notified using Inspire. The third-party platform can be embedded within a specific Inspire app page.

User flow — Social features (friends, messaging, coordinating events) feature

The final user flow above illustrates how friends can book concerts together and/or coordinate attending events with friends, as well as connecting with other users who attended similar events. For privacy, the user will have the option of whether to share their location (events attended) or not.

Overall, the user screens flows finally gave our team a full visualization of what the app will feel and look at first glance. We know that these screens and flows will likely be the backbone of what our app should do, but they can undergo a lot of changes based on feedback! The prototype stage is next, and it will be very exciting since we will finally be able to see our ideas come to fruition!

Design Iteration

Throughout the ideate design process, we were very lucky to receive a lot of valuable feedback from our peers and evaluators and iterate on it. One important critical feedback point that we received during this step was having a consistent amount of detail for each of our user flows, as well as improving the description and explanations of said diagrams. We were able to do this by providing clear and concise descriptions for our current future work and used this feedback to guide our approach for our prototype diagrams (explained in the following section of this post).

Prototype and Test

In the prototype and test stage, the design of the app, which was decided on in the Ideate stage, was implemented first into low-fidelity “paper” prototypes on Miro, then into high-fidelity prototypes that were interactable on Figma. Two of the app’s core features were prototyped.

Paper Prototypes

Feature 1: Watching a live stream performance

Feature 1 involves viewing a live streamed performance on the app. The user logs in, navigates to the profile page, views upcoming shows, joins a show that is in progress or soon to begin, and watches the show. Additional features include an audience cam, or fan cam, and live chat, which the user can both view and message.

Feature 2: Exploring an artist’s work of art

Feature 2 involves viewing an artist’s art previews. The user logs in, navigates to the explore page, searches for art, navigates to an artist’s profile page, and enlarges a preview.

Both features were relatively contained in scope. The eventual high-fidelity prototype builds upon these to create a comprehensive final prototype.

Paper Prototype Evaluations

The paper prototypes were evaluated through interviews with participants who were not familiar with the app. Participants were asked to follow a list of steps for both features. During and after each evaluation, they were also asked questions about certain aspects of the app.

The paper prototypes more or less captured each feature the way the participants expected. However, there were a few specific areas that could be improved. One common idea was that the home page and explore page were too similar. Also, the search bar did not have filter functionality. Other suggestions included watching a performance in landscape and sharing a performance with the user’s friends. Additions to Feature 2, such as liking or bookmarking art previews, were also suggested. Participants expected more detail on each page of the prototype. The performance page was especially unintuitive to them.

High-Fidelity Prototypes

Paper prototype evaluations were considered when creating Inspire’s high-fidelity prototype. A screenshot of the prototype on Figma is shown below.

The high

The app name was finalized as “Inspire” and the logo is shown below:

Inspire App logo

It was chosen to be a shooting star as a metaphor for amateur artists eventually becoming well-known stars.

The prototype was still built around the two core features used in the paper prototypes but additional functionality was also included. Users could log in to the app using different accounts from different platforms (such as Google), so the app was more integrated. The explore page icon was also changed to a telescope icon. Each page was more detailed as well. For example, the profile page for a user of the app was different from another artist that the user views. The “Upcoming Performances” page had a more attractive design, with pictures below each performance. Performances could be viewed in both portrait and landscape mode, and a share icon was also added. The layout of the explore page was changed and the search bar allowed filtering. Liking or bookmarking art and searching for art were also added to give the user a more intuitive experience.

High-Fidelity Prototype Evaluations

To evaluate the high-fidelity prototypes, both heuristic evaluations and cognitive walkthroughs were carried out on three high-level tasks that tested the two main features.

The feedback was mainly positive. There were, however, some changes that could be beneficial to the app. One was to modify posts on the explore page to contain more information, such as the title of the post. Another suggestion was to blur the background when images were enlarged. For the performance page, one suggestion was to change the fan cam and live chat backgrounds to be translucent, since the original orange background was too distractive.

The Evolving Design

From the high-fidelity prototype evaluations, the prototype was updated to create the final prototype. A screenshot of the final prototype on Figma is shown below.

Final High-Fidelity Prototype

The background for fan cam and live chat was changed from solid orange to a translucent grey. The posts on the explore page have more information than before. When images are enlarged, the background blurs to focus user attention on the image.

This final prototype concludes the last step of the design process. A demo video of the final prototype in action is shown below, and may clarify any possibly unclear explanations.

[embed demo video]

Conclusion

Our team learned a great deal about design while working through this iterative design process. Our most valuable lesson was that external user feedback is extremely valuable in the UI design process. Even with the 4 minds that constitute our team, there were so many times where we were presented with UI considerations by our external users that we never thought about. It is hard to fully predict a user’s actions and thoughts, and external UI feedback is incredibly helpful for capturing at least some of this variability and solving it with improved UI layouts.

In the future, we would hope to work together with partner apps like Spotify and Twitch to increase the outreach of our platform to aspiring talent all over the world, as well as create new integrations and features. In an ideal setting, we hope that Inspire will develop a global, vibrant community of artists, including musicians, painters, singers, dancers, musicians, art enthusiasts, and more. We imagine that our app can create an environment where any artist who has the passion and motivation in their craft can fully commit to it and get feedback and well-deserved recognition and appreciation.

Thanks for reading!

As a bonus (and motivation from the Inspire app), amateur artist/team member Troy Williams (Stanley) and Channy (Chanchev) collaborated on the song ‘Sky Vibes’ (streaming on all platforms!). This song is featured on one of the final high-fidelity prototype screens.

Sky Vibes song by Troy Williams featuring Channy

--

--

--

Team projects in CS 449/649 — Human Computer Interaction — at the University of Waterloo

Recommended from Medium

The Domain Names Coupons Awards: The Best, Worst, and Weirdest Things We've Seen

An Introduction to Microcopies from Different Perspectives

microcopies

Interview with Mitch Noakes

The Interaction Problems That a Scroll Bar Solves

Wentee: on product design and management.

How Would We Redesign That? | Foundry

Simplicity is prerequisite for reliability and less cognitive load in user experience.

An awesome list of the Best Online UI Design courses

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Stanley Wongus

Stanley Wongus

Quinoa

More from Medium

Acknowledging Fear — Blog 2

3 reasons to delay your home construction

Introduction to The Cassandra Project

Emerging Settings in Athletic Training: International Missionary & Athletic Trainer