Introduction:

Many people own a bike but never ride it. Why is that? Maybe they're busy, or don't have the time to leisurely ride around all willy-nilly. Or perhaps they want to ride, but have no one to share it with. That's exacatly why Bike Social was created.


Bike Social is an app that allows casual cyclists to connect within their local community!”



Research:


Main Goals:


  1. Social Media App for Biking Community.
  2. All other bike apps are super serious, show many athletic stats, and are not exactly designed for the casual cyclist.
  3. Mostly used for finding a riding buddy/group.

Competition: Bike Apps


    STRAVA
  1. Good: They are an all-in-one athletic app; they track your progress, you can meet up with people, and you can even tell people where you are with their Beacon technology.
  2. Bad: Feels more professional rather than causal. Not specifically for bike riders.

  3. Ride Social
  4. Good: Cyclists can connect through this cool app and ride in cool places and it seems pretty alright.
  5. Bad: It’s a little jib-jobby, because it is a sub-site from another site and not it's own thing. Also, it's only for UK riders, so it is not accessible by the USA.

Competition: Social Apps


    Peach
  1. Good: Simple interface and cuteness to it. Very relaxed community. Really trendy.
  2. Bad: Appearance seems to be focused on the cute element which seems to draw only a particular audience to the app.

  3. Yik Yak
  4. Good: Post messages and receive comments from a local community of people. People see your interests can network with you to form friendships.
  5. Bad: Very teal… ? Bad reputation?

Inspiration

Analysis:

How the app should function, user personas, and scenarios that feature typical uses of the app.


Functions:

Critical Functions:


  1. Ability to post local bike ride information with commenting on these posts to show their ride status (can go on the ride/can't go on the ride).
  2. App pairs with Google Maps to show route data such as traffic or closed roads. The user can also map out their riding route and include it in their post about riding.
  3. Category option that lets the user pick which bike they are riding for their route. Cyclist profile to include important information about the cyclist (how many years of experience, ride level, etc.).
  4. Something for weather conditions...
  5. Chat function, primarily to discuss ride details in private, or connect with cyclists outside of riding.

Nice to Have Functions:


  1. Shows enviroment details on a cyclist's profile such as Urban, Suburban, and Rural.
  2. Link to information detailing simple bike fixes (what to do when your chain is dislocated, how to fix a flat tire, first aid, etc.).

Personas:



Mariana


  1. Has a nine to five job working in marketing, making an average salary. Recently hired out of college. Enjoys the outdoors and tricking out their mountain bike.
  1. Has an intense desire to ride their bike and is looking for someone who shares the same riding enthusiasm as them.


Silvia


  1. 60 year old who enjoys a variety of exercising, including spinning. Is retired from being a professional salesperson. Loves nature and the environment.
  1. Recently purchased a bike in an effort to combine their love of being outdoors with their passion for spinning. Looking for a friend to join them on the road.


Gustav


  1. Has a part time job working at a coffee shop in a small town. Currently a sophomore in college. Greatly enjoys meeting new people and sharing stories.
  1. Because of their busy schedule, they struggle to find time to get involved in the cycling community. They currently own a single speed.


Valarie


  1. Brooklyn native, owner of a bike shop, and has calves of steel. They specialize in bike repair and brewing the perfect cup of herbal tea. Constantly on the go and occasionally visits customers to diagnose bike problems.
  1. Always on the road, but always alone. Is beginning to feel depressed and wished there was a friendlier way they could connect with their customers.


Luciano


  1. Experienced professional in the field of archeology. Part time professor at a university, and frequently funded by the state to conduct excavations in local and international areas. Taught their son how to ride a bike.
  1. Has owned a bike since they were in college, but doesn't ride as much as they used to. Looking for an excuse to ride their bike longer distances and in the company of others.

Senarios:

Persona 1 - Mariana


  1. Connects with cyclists who share their love of mountain biking. Would use Google Maps to plan trail rides with her new, local friend (whom they met through the app).

Persona 2 - Silvia


  1. Has made many friends through the app while inquiring about the bike they recently purchased. Saw multiple bike routes planned around their area and has even gone on a few rides with others.

Persona 3 - Gustav


  1. Is able to plan rides around their schedule based on others who are riding at the similar or the same routes as they do. Occasionally posts about events at the coffee shop, which has boosted business.

Persona 4 - Valarie


  1. Used the app to post updates on new stock in the shop. Occasionally answers bike repair questions, and posts sales at the shop. Has built a stronger network with their customers.

Persona 5 - Luciano


  1. Was introduced to the app through their son. Currently introduced the app to his colleagues, and together, they ride local routes whenever they are on long digs.

Process Flow

Below is a visual of all the interaction steps necessary for one to process and navigate the app. After the Process Flow was created, the Site Map was made, which mapped out the different pages of the app. It was later decided that the log-in feature was not necessary unless you really wanted to make an account.


Process Map



Site Map


Wireframes

Paper Wireframes were created and edited to show the visual design of each page of the app. These wireframes were revised a few times, and created in quick, timely manner.


Paper Wireframes


Testing Part 1

The Paper Wireframes were then digitized and brought into UXPin. A series of usability questions, known as the Usability Script, were formulated to test the functionality of app. Below are a few results from the testing.

(The app's original name was going to be PEDAL, but it was later changed to Bike Social.)


Clickable Wireframe


Usability Script:


  1. You are a current user of the app, schwin2win. Congrats. Say something nice to the people.
  2. Chat up your pal, riderofbikes.
  3. You don't have a profile photo, do you?
  4. You were out riding your bike and just got a flat tire! How can you fix your tire if you don't know how?!
  5. Oh no! You scraped your knee and don't know what to do! How can you fix yourself if you don't know how?!
  6. You've just been invited to join a ride with your biking buddies! Go see the details and make a decision!
  7. Post a photo of that Zebra you once saw while riding your bike…
  8. Bianchi_babe said something cool in the news feed. Let them know it was cool of them to say such a thing.
  9. It's your turn to plan a ride around the neighborhood! Don't forget to invite some friends!
  10. DOMINATOR seems pretty cool (I mean, you both met the same zebra and all…). Why not be their friend?

Results:


  1. Users were successful here.
  2. One user believed that the chat symbol was too round, making it hard to understand its intended function. And another had trouble finding the chat symbol.
  3. One user pointed out that the profile picture should be clickable, rather than have the icon to edit the image off to the side.
  4. Multiple users agreed that a change of the help icon was needed. When clicking the information to get rid of the side nav, most users prefered swiping it away, rather than clicking.
  5. Users were successful here.
  6. This question was complex for most everyone. One user recommended a notification icon on all areas leading to the event page. Some felt the final button in the event accepting process was redundant. (Made some users mad.) I was advised to replace the final button with non-clickable text.
  7. Users were successful here.
  8. Users were successful here.
  9. One user suggested to rename Events to Ride or Plan a Ride.
  10. Another user recommended making a link to the post and having a clickable icon to take oneself to the other person's profile. It was also added, that a button be added in order to add friends, located below the bio of a person on their profile.

Testing Part 2

Revisions to the wireframes were made, and legit mockups of the app were created. Another round of testing was done, and below are the results. The Usability Script was kept the same, but some words were changed to assist the user.


Clickable Mockup


Invision Mockup


Usability Script:


  1. You are a current user of the app, schwin2win. Congrats. Say something nice to the community.
  2. Chat up your pal, riderofbikes.
  3. You don't have a profile photo, do you?
  4. You were out riding your bike and just got a flat tire! How can you fix your tire if you don't know how?!
  5. Oh no! You scraped your knee and don't know what to do! How can you fix yourself if you don't know how?!
  6. You've just been invited to join a ride! Go see the details and make a decision!
  7. Remember that cool photo you snapped today? Why not share the pic with the community?
  8. Bianchi_babe said something cool in the feed. Let them know it was so cool~
  9. It's your turn to plan a ride around the neighborhood! Don't forget to invite some friends!
  10. trekkd_out seems pretty cool… Why not be their friend?


Invision User Test


Results:


  1. Users were very successful here. Little to no changes were noted. Very successful testing.

Conclusion

The app mockups functioned successfully and became easy for users to navigate. The icons were adjusted to be understandable and clear to users. The input during testing was insightful and essential to the overall creation of the app.