We’ve all been there: thinking of the perfect meme to describe a situation, unable to recall where or when you’ve seen it or how to access it, rendering you unable to share it. A great opportunity to demonstrate your sense of humor, made impossible by the abundance of content on the internet and the limitations of human memory.

After a few sessions of topic mapping, brainstorming and discussing several ideas with my teammates Lucas and Sam, we landed on an opportunity statement to fix this problem: “We will improve the experience of storing and organizing memes for anyone who shares memes among friends/family. The user struggles today because memes are often stored alongside photos and finding a specific one is tedious and time-consuming.”

With our opportunity statement in mind, we started looking at potential competitors. We looked at competitors on a range of function-oriented to content oriented and general to specialized. Content oriented applications are ones such as Instagram, Pinterest, Facebook, which are mainly used for user-generated content sharing, while applications such as the iOS Photos App, Google Photos and Flickr are focused more on functions such as storage and organization of personal content. We considered applications that can include any type of content as “general” and more specific types of content (such as just memes or just photos) as more “specialized”. Below is our initial competitive matrix.

We have identified our platform of choice as an iOS native mobile app. We chose this platform over a responsive website for the following reasons:

● A native mobile app for iOS allows for easier integration with other iOS applications such as Messages or Instagram, compared to a responsive website. By connecting MemeBox to the Messages app, the process of choosing and sending a meme could be simplified.

● Most people store and organize their photos/content on their mobile devices and prefer the easiest and fastest access possible to their content. An app provides a faster way of accessing content compared to a responsive web application, which requires the use of intermediary browsers such as Safari or Google Chrome.

● Since this is a meme organization app, it does not require an internet connection besides the sharing aspect. Therefore, the app could be used regardless of the presence of a wireless or cellular data connection.

The next step of our project requirements was to select a potential partner brand whose mission aligns with our idea, with the ultimate goal of partnering with them in the future. Initially, my team decided that Facebook would be a great partner for our product because of its market position and enormous audience, similar mission to our product of creating social connection through shared content and by allowing cross-platform file storage and access since Facebook also owns Instagram and Whatsapp. We also believed that Facebook would benefit from this partnership by facilitating content sharing and increasing user interaction.

However, during our Project Pin-Up, our team received feedback regarding the partnership that a partner with more connection to a younger audience would make more sense. Therefore we took some more time to think about a different partner. We considered potential partners, with younger audiences, such as: Giphy, TikTok, Snapchat and 9GAG and finally landed on 9GAGas our proposed partner. We decided on 9GAG due to reasons similar to why we had originally chosen Facebook. Similar to Facebook, 9GAG also has a mission that is aligned to ours which is to create social connection through share content, specifically memes. 9GAG is an online platform and social media site that allows users to upload and share user generated content. It originally launched as a platform for collections of internet memes and still the majority of content of 9GAG is memes. Therefore, a partnership with 9GAG made a lot of sense for our product.

The initial stages of our Research Process consisted of a Screener Survey, User Interviews and Affinity Mapping. A screener survey was used to select interview participants who indicate that they use memes to communicate with people. Among 20+ survey participants, we selected 5users to inteview. During the user interviews, we aimed to understand users’ general communication habits, likes, dislikes, behaviors, pain points, goals and needs. We tried to steer away from leading questions and let the users talk about their experiences with saving, organizing and sharing the humorous content and memes on their phone. Following our user interviews, we collected our notes in post-it notes on a Miro board and grouped similar notes together to identify similar themes and patterns in our users’ behaviors. As a result of this affinity mapping, we arrived at these 5 insights:

  • Users need a better way of saving memes
  • Users need a better way of sharing memes
  • Users need a better way of organizing memes
  • Users need a better way of finding specific memes
  • Users wan to be able to discover new memes.

In order to always remember these insights throughout our design process, we created a persona: Jim. By creating this persona, we were able to always prioritize our design decisions based on Jim’s needs, goals, pain points and behaviors. Below is a summary of Jim:

As a result of our research, we concluded with a Problem Statement to guide us through our design process:

When people save memes on their phones, they don’t take the time to organize them. Jim has trouble finding memes he has saved on his phone because his camera roll is unorganized. How might we help Jim organize his memes in a way that allows him to share them instantly?

In the beginning of our Design Process, we started with a Competitive/Comparative Feature Analysis. Below is a summary of the features we initially looked for in our competitors (Instagram and Google Photos) and comparator (Giphy):

We realized that none of our competitors include all of the features we decide to include in our application. With MemeBox, our vision was to create an application that lets users search through their own saved content using tags that they assign to the memes they save on the app, as well as allow them to discover new memes, all in one application. This vision originated as a result of all our user research and our insights. Noticing that there is no other application out there that is currently offering the exact same solution that we were envisioning, through this competitive/comparative analysis was helpful and gave us the encouragement to keep progressing with our project.

After the competitive/comparative analysis, we used the MoSCoW Method for Feature Prioritization. For the design of our product, we mainly wanted to focus on the features that are High Impact and Low Effort. Below is our MoSCoW Map. The green highlighted features are the main ones we decided to focus on. We believed that features such as a Keyboard Plug-in and Smart Recognition (for instance the app recognizing animals and people in memes and auto-organizing them based on who or what is in them) would be very cool and high-impact features however would be very difficult to implement with the time and technology resources we have available to us at the moment.

MoSCoW Map: Must, Should, Could, Would Have

Next in our Design Process was the Design Studio. As a team, we conducted a design studio session where we came up with very low-fidelity versions of our individual designs including the features we agreed upon during feature prioritization. Each of us sketched out 6 to 8 ideas and had time to explain and receive feedback on our paper sketches. Afterwards, we each designed 1 final version of our idea and explained and received feedback on this design as well. Finally, we combined all of our 3 designs into 1 master design, which was used as our low-fidelity paper sketch example of what we would use to build out our mid-fidelity prototype. Below are some sketches from our design studio:

Design Studio Sketches

Our Design Studio sketches included 3 main screens: The home page, the specific meme page and the “Discover” page. We decided during Design Studio that the Discover page would be in a similar format to the dating app “Tinder”, where the user is presented with a random meme from any category and the user has the option to swipe right to save the meme and swipe left to discard it. We also decided to include the “Add Tag” functionality on the specific meme’s page to allow the user to tag the meme the way they want to, in order to be able to quickly find it later when they need it.

After our paper sketch was ready, we moved on to create our mid-fidelity prototype. Here is a link to our mid-fidelity prototype, in case you are interested in seeing our initial design: https://projects.invisionapp.com/share/UTX6OWH4YE9#/screens/416684930_Home_Page_1

As a result of our mid-fidelity prototype Usability Testing, we realized that the feature most users had difficulty with was our “Discover” feature. The reasons for the confusion around this feature were:

  • Users not associating “Discovery” with the Globe icon.
  • Users not understanding that the required action is to “swipe” right or left and what swiping right or left would lead to.
  • Users who tested on a computer are not as familiar with the “swiping” action on a trackpad, as they are on the mobile interface. Simply, this was due to the limitations of having to test in a remote environment and the limitations of the inVision prototype.

To address these issues we:

  • Tested 3 different icons for the “Discover” function as well as adding a banner (Hi-Fi version 1) and a tooltip (Hi-Fi version 2) on the homescreen. The tooltip has proven to be the only solution to fix the issue.
  • Included an “onboarding” screen on the discover feature (in our Hi-Fi version 1 prototype), which includes instructions on what the user should do in order to save or delete a meme.

Below is a summary of our mid-fidelity usability testing results:

For our initial usability testing, we tested 5 different tasks with the users, to test 5 different features we prioritized to include in our application.

1- We tested the users’ ability to upload a meme saved on the Photos App into the MemeBox App. For this task, users were expected to tap the “+” icon to add an image from their photos. 5/5 successfully completed this task. 1 user initially didn’t see the + (add) button but indicated that, this was due to the black and white nature of the mid-fi prototype. However, during our high-fidelity prototype, we decided to move the add button to the main bottom navigation toolbar, to avoid any confusion with the add button at all.

2- We tested users’ ability to add a tag to a photo they save on the MemeBox app. For this task, users were expected to tap on “Add Tag” and type: “lol” on the keyboard. 5/5 users successfully completed this task. 1 user mentioned confusion due to the blank tag, which led us to remove any blank tags on our high-fidelity prototype.

3- We tested the users’ ability to share the meme. For this task, users were expected to tap the “Share” icon at the bottom of the screen. 5/5 users successfully completed this task.

4- We tested the users’ ability to find more memes related to “puppies”. For this task the users were expected to search “puppy” on the search bar. 5/5 users successfully completed this task. 1 user tried clicking on the “puppy” tag to find more puppy memes, which led us to link the tags to the search results in our high-fidelity prototype.

5- We tested the users’ ability to discover new, random memes on our application. For this task, we expected the users to tap the “Globe” icon. 4/5 users had an indirect success finding the discover function. The main confusion was due to users not associating the “globe” icon with a discovery function. For our high-fidelity design, we decided to test a “magnifying glass” icon to represent the discovery function instead and decided to include a banner on the homepage, notifying the user of the function of the discover page.

With the insights from our mid-fidelity usability testing, we created our high-fidelity wireframes on Sketch and the prototype on inVision. We conducted 2 usability testings of high fidelity prototypes because after the first hi-fi usability testing, users were still confused about the “magnifying glass” icon and the discover function. Some users also didn’t notice the banner on the homepage. Below are our initial hi-fi usability testing results. Many users indicated confusion around the existence of both a “Search bar” and a “magnifying glass” icon which they associate with a “search” function.

Therefore, in our final hi-fi design, we decided to include a “Tooltip” to explain the function of the discover feature and tested the feature this way instead. For the icon, we decided to use a “box”, inspired by the name of our application, MemeBox. With the inclusion of a tooltip on top of the box and our new icon, our usability test results improved significantly. Below is a table summarizing our final hi-fi usability testing results. As can be seen, all users tapped on the new “box” icon to access the Discover page, although 1 user still had confusion around the task of swiping after arriving on the Discover Page, mainly due to the wording of the task and limitations of the prototype. In order to address these concerns, we decided that as “Next Steps” we would consider improving our onboarding and test on a higher fidelity prototype that enables smooth left/right swiping.

The homepage of our final prototype now looks like this, with the tooltip hovering over the box icon, representing the Discover Page.

Additionally, after our mid-fidelity usability testing, we included this onboarding page for the “Discover” page, with instructions, in order to help users understand how they can save or discard memes on this page.

In our final hi-fi design we also decided to include a “quick add” function, based on user feedback on the “upload” task. Users indicated that they weren’t sure where or whether the image was saved on the app. With the “Quick Add” function, user is able to quickly select a folder to save their meme in and get a feedback from the system notifying them that their meme has been saved. You may see these screens below:

Additionally, we included a “toggle” on the Search results page, to distinguish between “My Memes” (memes stored in MemeBox by the user) and “Discover” (memes not yet saved in MemeBox by the user). This solution was also built as a result of user feedback during our initial high fidelity usability testing. Users raised questions about whether the search results were their own memes that they’ve already saved or if they were new ones. To allow users access to both, while indicating the difference between the two, we included this toggle. In our final hi-fi usability testing we tested this new feature and all users were able to use the toggle to switch between memes tagged “puppies” that they stored vs. new memes tagged “puppies”.

To sum up, as a result of 3 rounds of usability testing we were able to create a product that solves Jim’s problem of organizing his memes in a way that allows him to share them instantly.

  • With MemeBox users are allowed to “Add” a meme that they have saved on their Photos app on their phones, into a folder that they’ve personally created within the MemeBox app. This allows them to have quicker access to a meme related to a specific topic, when they might need quick access to it sometime in the future.
  • With MemeBox, users are allowed to “Add a Tag” to any meme they are storing within MemeBox, which will allow them to find that meme quickly by searching for that specific tag on the search bar.
  • With MemeBox, users are allowed to “Share” quickly using the share icon.
  • With MemeBox users are allowed to discover new memes on the Homepage (by category) or on the Discover page (randomly). The content on these pages would be provided by 9GAG, if our proposed company partnership is approved by our agency stakeholders.
  • 100% (15/15) of our usability testing participants have found the application useful and all of our research and design efforts have resulted in a product that helps Jim save, organize, share, find and discover new memes quickly and efficiently.

As for Next Steps, as briefly mentioned previously, we would like to:

  • Design, implement and test Onboarding for our users. Even though the Discover function includes a page of “onboarding” with instructions, our final usability testing still indicated the need of providing further clarification for users.
  • Design, implement and test micro-interactions. Since this is an app to be used primarily for entertainment purposes, we would like our users to get the most delight out of it as possible. We would like to include additional micro-interactions in our application to add further delight to the user experience.
  • Consider creating a community. So far, MemeBox is an app that is mainly focused on the “personal” experience with memes of personal storage, organization, discovery and sharing with one’s personal network. However, MemeBox has the potential to grow into an application with a community built around it, similar to applications such as Facebook, Instagram and 9GAG. For this aspect of the application, further research, design and testing would be required.

You may see our final prototype using this link: https://lucaszambelli303696.invisionapp.com/public/share/7V155KK44Z#/screens/477875166

UX Designer at Bank of America