top of page

Creating My Own App

WannaGo Logo Large@2x.png

What do I want to do today? This is a question we commonly ask ourselves, and with our busy schedules it is increasingly difficult to plan activities. WannaGo is the solution to finding others who share the same interests and are eager to meet up with other like-minded individuals on the go.

​

The Team

  • Nick Whitamore 

The Scope

One Month Design Sprint​

Applications

  • Adobe XD 

  • InDesign

  • Photoshop

  • Zeplin 

  • Illustrator 

The Concept

The concept for this app developed while working on my Bumble BFF Concept Design project for General Assembly. While conducting research for this project I discovered a trend of potential users who believed that the best way to make friends was through small group activities with people that shared common interests.

 

The goal is to create an app that would allow people to connect on the go by creating a wide variety of activities engaging people within a specific area. What would make this app unique? The focus would be directed on creating activities on the go and engaging with others' plans effortlessly. The app's mission is to connect people through similar interests and to always find friends for any activity.  

My Role:

  • Conduct research to verify that others struggle with finding friends who share common interests.    

  • Define user personas.   

  • Develop user flows.     

  • Design Lo-Fi wireframe to test user flows.  

  • Conduct user testing. 

  • Develop a brand image that reflects the brands' goals. 

  • Design an iconic logo that relates to the brand's mission. 

  • Design a fully functional high fidelity prototype for proof of concept.

  •  Work with the development team to create a fully functional app. 

The Challenge: 

  • Discover potential users' pain points in finding friends who share the same interests.  

  • Define what potential users' would consider when meeting up with friends.  

  • Develop efficient solutions to connect like-minded individuals.    

  • Create an application that focuses on what people can do today.

  • Create user flows in the app that feels natural.

  • Create low fidelity wireframes for user testing and rapid iterations. 

  • Develop a brand image that reflects the brands' goals. 

  • Design an iconic logo that relates to the brand's mission. 

  • Design a fully functional high fidelity prototype for proof of concept.

  •  Handoff designs to the development team using a style guide in Zeplin. 

Competitive Analysis 

The first step in launching any brand is understanding the market. For us, social platforms that focus on bringing people together in real-world situations were our main focus. Through my research, I found three strong competitors in a similar market space; Facebook Events and MeetUp.     

Competive anylisi@3x.png

Research From Bumble BFF:

Working on the Bumble BFF Project led our team to do extensive research on how people create friendships. The information discovered through that research led me down the path to creating this application. Below is an excerpt from my Bumble BFF Project.   

Through social media and interviews, we asked questions that focused on the natural process of making new friends. 

 

Screen Shot 2019-09-03 at 1.37.56 PM.png
Screen Shot 2019-09-03 at 1.37.33 PM.png
Screen Shot 2019-09-03 at 1.37.07 PM.png

Analyzing countless social media responses led us to the conclusion that most people make new friendships doing activities that they love to do. We also gathered that people are actively looking for others that are interested in the same activities.  

Based on our research we developed two personas: 

Sara

Sara is a new mother. She represents the surprisingly high number of new mothers that emerged in our research. She represents a type of user that is beginning a new chapter in her life and is looking for people to whom she can relate to. 

"It would be nice to have a mom section to find other mothers. It's hard finding other mom friends"

sarah.jpg

Joshua

photo-1489913590284-9269438bb411.jpeg

Joshua represented the user type that we assumed we would find, a young professional who just moved to a new to a city looking for new friends and places to go. 

"Groups with shared interests makes a conversation easy and gives an excuse to follow up."

Research Extended 

When embarking on this project I knew that my research was only partially completed from my Bumble BFF Project. I wanted to learn more about what people do when they are bored and how they find friends and activites.

​

We asked our social media followings two simple questions:

 

When you have free time how do you find interesting activities?

​

What are some challenges you face when trying to plan a group activity?  

   

Group 3.png
Group 4.png
Group 2.png
Group 1.png

This first question verified my assumptions that people are social creatures. When planning activities their first impulse was to find out what other people are doing or to plan activities around others schedules.  

Group -2.png
Group 1.png
Group -1.png
Group -3.png

Question number two verified my second presumption that people had a hard time finding friends who were free at the same time who shared similar interests.

Envisioning The App  

After Working on the Bumble BFF project I had a pretty good idea of what I envisioned the app would accomplish but I needed to refine what the app needed to deliver the desired experience. I utilized the MSCW Method to define what features the app would need to reach our goal of creating a Minimum Viable Product.  

First I wrote down every feature the app could possibly have.

IMG_5042.JPG

Then I started to organize the features into four categories; must have, should have, could have, and won't have. By prioritizing the features that the app could have I was able to begin envisioning the WannaGo Minimum  Viable Product.   

IMG_6403.JPG

Creating a User Flows

Once I prioritized all of the features, I still couldn't fully envision how they would all connect and what each user flow would look like. I wanted to ideate what a couple of the user flow would look like before I started designing.

Web 1280 – 1.png
Web 1280 – 3.png

Home Page Design

From the conception of this project, I envisioned that the WannaGo home page would auto-populate with activities created by fellow users in the surrounding area. I envisioned each activity would be presented on an "Activity Card" which contained all of the pertinent information about each activity.    

 

To think through what each card would need, to effectively communicate information about the activity I opened up XD to create a series of different mockups. Through this, I was able to envision what information was needed on each card along with an effective layout to communicate the activities details.  

​

​

create_your_profile_–_15.png

This design featured most of the elements that each activity needed but it left out personal connection like who might attend the activity. 

create_your_profile_–_14.png

In my Bumble Bff project, our research discovered that many potential users need to be able to differentiate between being interested in an activity and committing to one. This design lacked the ability to "save" or "attend" an activity.     

create_your_profile_–_13.png

Finally, after playing around with the other two designs I came upon this design which checked all of the boxes I had thought of so far. It also clearly depicted what information was most important. 

My research uncovered that our user base would want to easily be able to change both the location and date for browsing activities. I created an intuitive filter feature that easily allowed users to change their location and date without leaving the home page.  

Designing a Lo-Fidelity Prototype 

Once I had designed the Lo-Fi Home page and activity card It was time to start building out the user flows. Each User flow I took a slightly different design approach to tackle how I wanted each page to look. Some pages I designed and redesigned in XD and others I mad rapid sketches of how I wanted each page to look. I was in a bit of a flow state designing most of the other pages of the prototype and did not save individual iterations for this case study. 

 

The prototype below Is what I created in conjunction with my business partner. We had multiple Zoom Check-ins during this aspect of the design process and worked out kinks as they came about. 

    

Click the mockup below to test out out Lo-Fi Prototype. 

iPhone-XR-Mockup Add Screen Here.png

Usability Testing and Rapid Iterations 

Once I finished a low fidelity prototype I began user testing to find any design flaws that would inhibit users from reaching their goals. I designed three challenges for users to test the app; create a new account, create an activity, and lookup details for a saved activity. I also asked users to describe to me what they saw on each page and their opinions of each of the features. Through this round of user testing, we discovered key areas for improvement and completely new feature recommendations.   

Creating a Profile

The first design change, we made based on the first round of user testing was to eliminate the user experience section of the user's profiles because of all of our testers commented about other users lying about their skill level or it simply would not applicable to some of the interests that users could select.  

create your profile.png
create your profile2.png
Fixing the Activity Cards

One of our users who tested our prototype inquired about sharing the activities with their existing friends. When this feature was brought up it was obvious that it needed to be included in the app so I created a simple way to share activities with friends both on and off the app. 

​

Another Glaring overlook on my part was that the activity cards did not share the profile of who created the Activity.

Home.png
Home2.png
Share 1.png

To share activities on your feed we added a share button to each activity card. When clicked you would be given two options to share with friends on the app along with friends who were not on the app yet.

Share 1 – 1.png

To share the activity with others, each activity would have a unique URL and the link could be shared via text facebook WhatsApp etc. Users could then view the activities, however, to attend each activity users would need to download the app and attend through the app.

People list – 2.png

Users could also share events in the app with other WannaGo users. 

Profile Design

Designing a profile page for users was a unique challenge because we wanted to allow users the freedom to showcase who they were to other users as well as check out users' profiles. 

Before Usertesting 
your profile.png
Others profile.png
After Usertesting 

When We asked users where they would look to find an upcoming activity that they had saved, many clicked on their profile icon before My Clander so we decided that when viewing your own profile the user should be able to see their upcoming events. This also could help users better understand other users' backgrounds by featuring past activities that a user has attended when viewing another user's profile. 

your profile.png
Others profile.png

After completing the user testing with low fidelity wireframes I was nearly ready to start designing a high fidelity wireframe. Before I could get started on a Hi-Fi wireframe It was imperative that I created our brand's identity.  

​

First was giving the app the name WannaGo, which came from the original concept of the app. We were constantly asking friends if they want to go...

​

Selecting a Color scheme 

Developing a comprehensive color scheme that matched up with our brand's mission was very important to me. I wanted something unique and iconic that would synonymous with WannaGo.

 

While looking on Instagram inspiration struck! While looking at my feed of travel and adventure the classic orange  teal tones that have become synonymies with adventure became my inspiration for our color pallet.  

IMG_1835.PNG
IMG_1833.PNG
IMG_1834.PNG

The reason that this orang and teal combination is appealing to the eye is because of the color contrast orange and teal create. They are complementary colors, on opposite sides of the color wheel which would grab the attention of a user's eyes making WannaGo's icon stand out.

Colors.png

Creating Something Iconic 

The most important part of designing a logo for an app is to create a memorable icon that captures the essence of the app.

​

To tackle such an important design challenge I opened up, illustrator created a long artboard and just started brainstorming ideas. Creating Icon after Icon until I had a deep inventory of options. 

 

Artboard – 2@2x.png

I then narrowed it down to my top five and then sent them individually to friends and fellow designers with a simple question. "This is an icon for an app that I am working on, what do you think this app would be used for?" 

 

Most of the icon drafts got a variety of different responses and guesses but there was one that stood out from the pack.  This icon gained replies such as; 

 "Probably something adventure related." and  "An app to rally friends to go do something.".

 

With theses on-point responses I knew this was the winner.  

GO Huge@2x.png
1539.png
WannaGo Logo Large@2x.png
1543.png

Creating A Modern UI

In my research phase of this project, I asked potential users if they used Meet-Up because they were probably our closest competitor and over and over again I heard people refer to Meet Up as boring and they felt like it was geared for a mellow older crowd. With more digging on what made these potential users feel this way, I started to see a trend of people referring to the "feel of the activities" or the "look of the app" and I knew that meant that I would really have to bring the heat with my UI design on this project and I would have to create something unique, sleek and modern to attract my Ideal user types.     

Home Page/Activity Cards

The low fidelity wireframe helped me figure out what information each activity card had to have but when it came to creating a HI-FI draft of them I wanted to make a few different ideations of activity cards.

iPhone XR-XS Max-11 – 1.png

The first draft that I made was basically just a higher fidelity version of Lo-Fi Wire Frame using the color pallet that I had decided on. It was close but it just felt a little bland.

iPhone XR-XS Max-11 – 4.png

In the next draft, I wanted to switch it up completely. On this design, I created something that was very eye-catching and unique but it was hard to read which would not be acceptable for users.

diff2.png

I really liked the look of this design but when I showed it to other friends and designers I received the complaint that the unlying photo presented some readability issues 

iPhone XR-XS Max-11 – 3.png

I went back to designing the original Lo-Fi layout and then after looking at it for a while, I had an idea...

Home Screen @2x.png
Group 31@2x.png

With thousands of app being added to the app store every day, it is increasingly difficult to stand out from the crowd. With WannaGo it was important that we created a unique UI that prioritized usability and readability. With the color pallet that I chose, neumorphism struck the perfect balance of providing usability and creating a modern interface.

 

Neumorphism is a three-dimensional design style where designs appear to protrude from the underlying background giving users a feeling of depth. The tactile like responses creates unique feedback letting users know when they completed a task.  

​

​

The home page of the app will auto-populate with all the activities in the user's distance range, ranking activities that share similar tags to the user's profile. This endless scrolling method will highlight activities that users would most likely be interested in while still allowing users to discover different activities that they might not have considered. 

​

​

Branding

Creating A Profile  

Create an Activity 

When designing the high fidelity user flow for creating an activity I took a different approach to create an activity than I did in the Lo-Fi wireframe. This to eliminate any confusion that users displayed in the Lo-Fi user testing along with increasing the overall usability of the app.    

create_your_profile_–_5@2x.png
Intrests – 1@2x.png

The Lo-Fi design had some problematic features such as the icons that represented interest categories that each activity would fall under, leaving question to what each icon represented.    

Create Event 1@3x.png

To address the confusion that stemmed from icons representing interest tags I changed icons to images with clear verbal tags that allow users to have no question to what tag they are selecting.  

create_your_profile_–_7@2x.png
create_your_profile_–_8@2x.png

The Next design flaw in the low fidelity wireframe was I created a simple 1-page form that users understood but it had limited usability and high chance of activating accidental touchpoints.

Create event 3 – 3@2x.png
Create event 3 – 8@2x.png
Create event 3@2x.png
Create event 3 – 5@2x.png
Create event 3 – 7@2x.png

By separating the form out to one or two inputs per page it was less likely to overwhelm a user along with increasing the speed at which users could correct any errors they might incur while filling out the form.  

Create an Activity Walk Through  

Test Out The Prototype 

This prototype was to serve two purposes, to facilitate a more accurate round of user testing, along with communicating the design and usability traits with developers.  Click the XD Icon to try it out for yourself.

download.png
In_group_message_–_3@3x.png

Now What?

Now we are currently Interviewing developers to join our team. We will then design an MVP that our team believes that we can start bata testing with our existing networks in 2 months' time. This beta version will most likely be just the homepage feed of activities where our networks can post about activities that they are doing. The goal of this initial version is two-fold, to test the concept of the application along with being able to use the proof of concept to begin raising our seed funding. 

 

 

bottom of page