Join Up App Design

During the semester I was tasked with creating an app idea, creating user surveys, doing user testing, and creating a low fidelity tappable prototype

Problem Being solved

College students get bored doing the same things on campus and with Covid more people are spending time alone. Join Up gives the user activities and events to meet new people and have fun on campus.



Competitive Analysis

After getting an understanding of what my target audience was looking for in an app to meet new people around campus in fun and interesting ways I looked to the competition for ideas on what works and what doesn’t. 

I created competitive analysis for the following apps

  • Yik Yak: A message board app used mostly on college campuses
  • Facebook: I looked at their event creation system
  • Meetup:
  • Snap chat:
  • Yubo:

During my research I was able to find

  • Pain points of users
  • Design Principles that drew the user to make the interaction desired
  • A better understanding of how users may interact with my app

Wireframe Sketches

The next step for my design process is sketching out ideas. It is a fast and easy way to get ideas and plans down to try them out. 

After a bit of researching and doing competitive analysis for a few apps that are in the same social app space I came up with a few key screens that I needed to achieve my goal. 

The screens I started with are 

  • Message board
  • Game or event information page
  • Friend list
  • Explore page for users to find nearby events
    • Search function for the Explore page
  • Profile Page

During my wireframing time I was able to discover

  • Types of interactions I wanted in the app and how to highlight them for the users
  • Information Architecture plans to ensure the users know all the information needed as easily as possible

Low Fidelity Wireframes

Taking the best aspects of my wireframe sketches I moved to digital creation of the app. 

While creating my low fidelity wireframes in Figma I was able to 

  • Design the content on the various pages
  • Design a chip for the events
  • Decide what information is important for the user on the event screen

The next step was to create all the pages I needed to move onto my next milestone of a tappable prototype. As well as adjust

  • spacing
  • typography
  • colors

Tappable Prototyping

After another couple rounds of iteration on my low fidelity mockup of the app I was able to create a tappable prototype that facilitated possible ways for users to interact with the app. 

The users would be able to go through the motions of

  • Creating an event 
  • Joining an event
  • Messaging on the message board
  • Finding friends
  • Filtering possible events 

User Testing

After creating the tappable prototype I was able to do user testing with my target audience. 

During the test I started by giving the user an overview of what the app is.

Next I gave them 5 tasks to complete within the prototype.

  • Please navigate to the explore page and join an event that interests you
  • Navigate to your friends list and open Ricks profile page.
    • What is Ricks favorite color?
  • Post a message on the message board
  • Find an event that one of your friends is signed up for
  • Navigate to Direct Messages and tell me what Tylers last message to you was


After the user completed each task I noted if I had to help them and any pain points they experienced during the test.

I asked the following debrief questions to each user after the test was complete.

  • How did you find the flow of the app?
  • Did you have any misclicks on the buttons during your test?
  • What are your thoughts on the style and appearance of the app?
  • If you could change 1 thing about the experience, what would it be?