Link To Prototype

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 34

OVERVIEW

The following brief outlines the updated research and design for the iBaller location-based iPhone application that I have been working on since presenting my concept to the midpoint comittee at the end of Summer 2010. The brief includes a link to a finalhigh fidelity prototype as well as more detailed design specifications that were flushed out by conducting a more thorough competitive research, usability testing, and user feedback.

DESIGN BRIEF CONTENTS


Purpose Positioning Statement Target Audience Competitive Overview Moodboard Information Architecture Use Case Scenarios 01 - 02 03 - 04 05 - 12 13 - 14 15 - 16 17 - 18 19 - 32 Usability Test Summary Visual Walkthroughs Award System Milestones Technical Specifications Summary of Features Project Timeline 33 - 34 35 - 58 59 - 60 61 62 63 - 64

02

PURPOSE
iBaller is a real world, location-based iPhone application that helps pick-up/street basketball players find players, games, and courts in order to increase their level of competition and foster an environment of competitive fun.

04

POSITIONING STATEMENT
The goal of this application is to create a social platform that not only helps basketball players find competition, games and courts, but promotes an atmosphere of competitive fun, community, and self progression. Using the iPhones built-in GPS capability, users will be able to check into courts in order to let people know when and where they are playing, as well as receive real time search results of all the players that have checked in nearby which can be filtered by time, distance, voting stats, and/or skill level. The system features an awards system that allows players to earn medals and trophies for reaching certain milestones for receiving votes, voting for and referring other players, and checking into courts. This system is meant to encourage application usage as well as game performance on the basketball court.

06

TARGET AUDIENCE
This iBaller application is for players who love playing basketball but might not find it convenient to look for quality players and games because of other life obligations and priorities. This application is for players who are looking for a convenient, easy and fun way to find, keep track of, and network with their competition.

08
USER WALKTHROUGHS 019

JOE.
When it comes to things that I am passionate about, my friendliness disappears.
[ Marital Status ] [ Age ] [ Height ] [ Experience ] Single 24 6ft. 4in. Old School Ballers

Problem ] Solution ]

A graduate student with no time to be looking for quality games Filtered search feature. Notification system.

10

Jerome.
It would be worth the drive, if I knew there would be good players
[ Marital Status ] [ Age ] [ Height ] [ Experience ] Single 23 6ft. HS

Problem ] Solution ]

He is a competitor who is budget conscious and doesnt like wasting time. Check in Feature. Tracking Feature.

12

Me.
I like to have fun on the court. The real fun is in the competition.
[ Marital Status ] [ Age ] [ Height ] [ Experience ] Single 28 6ft. 2in. D1 Scrimmage

Problem ] Solution ]

I find it inconvenient to find good competition. Voting System. Player Stats View.

13

COMPETITIVE OVERVIEW
My competitors have served as an excellent resource for developing the design of my application. Many of the technical requirements, system designs, and business models that are used by many of the more popular location-based applications, such as Foursquare, Yelp, and Gowalla have served as both a guide and a benchmark of what it takes to create a user experience that is successful and engaging to my target users. Although a few of my online competitors, such as Gamesnake, Infinitehoops, and Nofouls, are focused specifically towards basketball, they seem to lack the overall user experience that it requires to obtain and keep a user base that is excited about using their network. My observations of the successes and failures of my competitors are forcing me to think critically about the experience that I am creating for my target audience, and is continually focusing and refocusing my attention to the problems that I am trying to solve.

16

MOOD BOARD
With the visual design of my application, my goal is to create a clean and modern design that uses color and texture to subtely add a hint of street to the look and feel of the interface.

17
1

18

Settings Choose Sign-up

New Sign-up

Sign-up Using Facebook

Additional Details

Add FB Contacts

Edit Profile

Notifications Settings

My Profile

Area Map Courts View

Area Map Players View

Area Map Games View

My Games

Games Nearby

My Players

Players Nearby

My Courts

Courts Nearby

Alerts

Area Map

Trophies

Medals

Props

Comments

Start a Game

Game Details

Search Game Results

Player Details

Search Player Results

Filter/Sort Court Details Search Court Results

INFORMATION ARCHITECTURE
Filter/Sort

Add Description

Choose Court

Choose Time

RSVP

Player Invites

Edit Game Details

Their Players

Their Games

Their Courts

Send Message

Vote for Player

Scheduled Games

Checked In Players

Comments

Get Directions

Player Stats

Compare Players

Choose Player

19

20

Use Case 01 // New User Sign Up


Option01
The user can sign up for a new account from scratch. This requires the user to create a new username and password. The user will be asked if they want to send invite notifications to friends, using either their contacts list or Google Mail.
Fill and Select Required Profile Details Launch iBaller Application Choose a Sign Up Method Choose a Sign Up Method Sign Up using Facebook

Option02
The user can sign up using Facebook. Basic Profile information such as name, user ID, Password, profile photo, and email will be added to their created profile. Then the user will be prompted to fill out the additional information required for the new account.
Account Created Select 'Done' Invite Friends? Fill Additional Required Profile Details

21

22

Use Case 02 // Find and Follow a Player

The easiest way to find a specific player is to use the search function and do a keyword search. In order to search, the user must first go to the Players view.

Select 'Players'

Tap the 'Search Field'

Type in name of desired player

Hit "Search'

Filtered Search of Players Nearby


If the user is searching for random players in their area that have checked in, they could select the Players nearby tab to view the results of players who are checked in near them. They could also get more specific and tailored results by selecting the Filter button and changing the settings.

Hit the 'Follow' button next to the player's name/ Player is added to your player's list. View 'Player Details' and hit 'Follow'

23

24

Use Case 03 // Check into a Court


If checked in before, Select a court from 'My Courts' list. Choose a Sign Up Method If not, select the 'Courts Nearby' tab and select your court from the list. Fill and Select Required Profile Details Hit the 'Check In' button. Sign Up using Facebook

Option01
If the use has checked into a court before, the court is added to his My Courts list, so the he can keep tabs of the courts that he has been too.

Launch iBaller Select 'Check In' Application button or 'Courts'

Choose a Sign Up Courts View Slides Method in.

Option02
If the user has not checked into a specific court before, they can select the Courts Nearby tab, that will give them a list of courts in their area that they can select from. The user could also do a keyword search for the court.
Account Created Select 'Done' Invite Friends? System assigns awards if milestones have been reached

Player's in the network will be able to see that you've checked in. Fill Additional Required Profile Details Player's that are following you will receive a notification of your status in their 'Alerts'

25

26

Use Case 04 // Join a Game


Fill and Select Required Profile Details

Option01
The user can RSVP for a game that he has been invited to be either going to Alerts or viewing their My Games list.

Launch iBaller Application Select 'Games' or 'Alerts'

Choose aRSVPUp Select Sign Method

Choose a Sign Up Method 'Choose RSVP' Status view slides in. Sign 'Attending' Check Up using Facebook from list.

Option02
The user can also do a keyword search or search for games by court. If the game is public, they will be able to join.
Account Created

Select the game from 'My' Games' list to view details

Select 'Done'

RSVP Status is Invite Friends? Updated.

Fill Additional Hit Done. Required Profile Details

27

28

Use Case 05 // Start a Game


Fill and Select Required Profile Details Launch iBaller Application Select 'Games' or 'Courts' Select 'Games' or 'Alerts' Choose a Sign Up Method Select RSVP Select 'Start a Game'Button Choose a Sign Up Method 'Start a Game' view slides in. 'Choose RSVP' Status view slides in. Fill in and using Sign Up Select required game info. Facebook Check 'Attending' from list.

The user can either start a game by going to either the Games or Courts view. The process is simple and allows the user to make games public or private, as well as filter the experience level of players that are invited publicly.

Select the game from 'My' Games' list to view details

New Game Confirmation Alert. Invite Friends? RSVP Status is Game Alerts are Updated. sent to invites and game is added to your games list. Fill Additional Select 'Done' Required Profile Details Hit Done.

Account Created

Select 'Ok' button Select 'Done'

29

30

Use Case 06 // Vote for a Player


Fill and Select Required Profile Details Launch iBaller Application Choose a Sign Up Method Select RSVP Choose a Sign Up Method Sign Up using Facebook Check 'Attending' from list.

There are no negative voting options included within the system and the idea is to motivate players to perform their best and/or improve their game in order to get compliments or votes from other players. There are four categories in which a user can vote or be voted for: Team Player, Board Crasher, Scoring Threat, and Defensive Stopper. One point is given to a player for a vote that he receives for each category. When they reach certain milestones in points, the system awards them medals for milestones and trophies for having the highest average votes at a court or in the network. Also, users receive 1 pt for each player that they vote for and receive awards for reaching voting milestones.

Select 'Games' or 'Alerts' Select the game from 'My' Games' list to view details

'Choose RSVP' Status view slides in.

Account Created

Select 'Done'

Invite Friends? RSVP Status is Updated.

Fill Additional Required Profile Details Hit Done.

31

32

Use Case 07 // View Stats of Players Checked into Court


Fill and Select Required Profile Details Launch iBaller Select 'Courts' Application Courts a Sign Up Choose View Slides in. Method Select RSVP Choose a court from Choose a Sign Up your courts list or Method search for a court. 'Court Details' view slides in Sign Up using Facebook Check 'Attending' from list.

The Player Stats and Compare Player views can be accessed by going to the details page of a specific court. The idea is that users will be able to check and see what kind of competition is a at a court before going, based on voting stats. Also, it is a starting point for them to gauge which players they may or may not want to nplay with or follow. It also serves as another layer of competition for players, where they thrive to be the highest ranked player within the social network.

Select 'Games' or 'Alerts' Select the game from 'My' Games'the User can view list to players at topview detailsthe courts based on voting categories. Account Created Select 'Done' Select the 'Compare' icon button to compare player stats 1 on 1.

'Choose RSVP' Status view slides in.

PlayerFriends? Invite Stats view slides in RSVP Status is Updated.

Fill Additional Required 'Stats' Select Profile Details Hit Done.

33

34

USABILITY TEST SUMMARY


Test Participants
Joe. Takuma. Ilona. Former basketball player Pick up player Lab intern. 02

Feedback Details
01 All felt the task was pretty straight forward and easy. Would add an option for Adding Friends. Change the +Game wording to Add a Game. Change color to make button pop out. Joe and Ilona wanted to go to courts to start a game. Joe and Ilona wanted to go to the Player Details view to find the game. This task was pretty easy to complete. Takuma related the word Follow to only people that are not in your profession.

06 07

All felt that this task was pretty simple and made sense. This task gave all 3 testers difficulties. All of them knew what they were looking for but the iconography was not clear, so they could not find the stats. Ilona said that the graph icon looked like a status bar. Also, the button didnt really stand out to any of them.

Task List
01
02 03 04 05 06 07 Sign up for new account. Start a new game. RSVP for a game. Find and follow a player. Check into a court. Vote for a player. View the voting stats of players at a court. 05 All felt the task was pretty straight forward and easy. Takuma was confused at first, but thought task was easy 04 03

Observations of Test Participants


Joe. Although he has never used an iPhone before, he felt that after walking through the first time, he felt comfortable using the system. He didnt seem to be reading and comprehending the instructions. He looked a little not focused and tense. Noticed minor inconsistencies in details of instructions and prototype. (Stevens game details.) Of the three, she seemed the most comfortable. This of course has to do with her experience using iPhone and familiarity with testing environment. Pointed out that the wording of my tasks, may have caused some intitial confusion.

Takuma.

Ilona.

35

36

VISUAL WALKTHROUGH 01
New User Sign Up You have just downloaded the Baller location-based iPhone application and would like to register and setup a new account.

Select iBaller Application Icon

Loading Screen...

Choose New Account Sign Up

Fill out and Select Required Form Info then select done

37

38

VISUAL WALKTHROUGH 02
Sign Up Using Facebook You have just downloaded the Baller location-based iPhone application and would like to register and setup a new account using Facebook.

New Account Created Alert. Hit Ok.

Profile View is created and loaded.

Select Sign Up Using FB

39

40

Select Login with Facebook

Fill out additional details Select Invite FB Friends

Choose friends from list & Hit back

New account confirmation alert

Profile view is created and loaded

41

42

VISUAL WALKTHROUGH 03
Start a New Game. You want to schedule a new basketball game and below are the details: 1. Description: 5 on 5 basketball game. 2. Location: Cooley Court. 3. Date & Time: Thu. Dec. 2 from 7:00pm-8:30pm. 4. The game will be public. 5. You want to invite players that have an Experience Level of Advanced.

Select Games

Select Start a game

Fill out Game Details (See following panels for example interactions)

Fill in game details and hit done

43

44

Select a court and hit done

Select a start and end time and hit done

Turn on Filter by Experience and check advanced. then hit done

New game confirmation alert

Game is added to My Games list and notifications are sent to invites

45

46

VISUAL WALKTHROUGH 04
RSVP for a Game Your friend, Steven, sent you an invitation to play basketball at the TI YMCA. and you would like to RSVP.

Select Games

Select RSVP

Check Attending and hit Done

RSVP Status is updated

47

48

VISUAL WALKTHROUGH 05
Find and Follow a Player You played basketball with Montell Jones. You really like his style of play and would like to add him to your network, so that you can keep of track where and when he is playing, as well as send and receive invites to future games. How would you add Montell Jones to your network?

Select Players.

Select Search Field.

System keyboard slides in. Type in the players name. Hit Search.

Search Results are returned. Select Follow next to players name.

49

50

VISUAL WALKTHROUGH 06
Check Into a Court You have just arrived at TI YMCA and would like to let people in your network know that you are at the gym.

Following new player alert. Hit Ok.

Player is added to your My Players list

Select Check In or Courts.

51

52

VISUAL WALKTHROUGH 07
Vote fote a Player A few days ago you played basketball at TI YMCA. One of the players, who is already part of your network, really stands out to you and you would like to compliment him for being a team player and for good defense. His name is Marcus Steale.

Select Check In next to TI YMCA

Check In Alert Message. Hot Ok.

Check In status is updated.

Select Players

53

54

Select the player.

Select Vote

Voting Panel slides in.

Select the Team Player and Def. Stopper stars. Hit Ok.

Voting Alert pops up. Hit Ok.

Players voting stats or Player Props is updated. Awards are assigned for reaching milestones.

55

56

VISUAL WALKTHROUGH 08
View the Voting Stats of Players Checked into a Court You have just checked into TI YMCA and you would like to view the voting statistics of the top players at the court in order to see who has the highest rankings.

Select Courts.

Select TI YMCA.

Select STATS button. Select Compare or Vs button to do a 1 on 1 comparison of player stats.

Select the Graph Icon on top to view stats by category.

57

58

Select the Compare or Vs button to compare players stats 1 on 1.

Select SWAP to choose a different player to compare.

Choose a player and hit done.

59

60

Awards System Milestones


This section outlines the milestones that player can reach in order to receive different awards. Voting Categories : Defensive Stopper, Scoring Threat, Board Crasher, Team Player

Checking into Courts


First checkin 5 checkins in a month 10 checkins in a month 20 checkins in a month 30 checkins 50 checkins 75 checkins 100 Checkins

Referring Players
First referral 5 referred players 10 referred players 20 referred players 30 referred players 50 referred players 75 referred players 100 referred players

Voting for Players


First vote 5 votes 10 votes 20 votes 30 votes 50 votes 75 votes 100 votes

Category Milestones
First vote 5 votes 10 votes 20 votes 30 votes 50 votes 75 votes 100 votes

Top Ranked
Highest average votes for a week Highest average votes for a month Highest average votes for more than 1 week in a row Highest average votes for more than 1 month in a row Highest categorical votes for a week Highest categorical votes for a month Highest categorical votes for more than 1 week in a row Highest categorical votes for more than 1 month in a row

Receives Badges

Receives Badges

Receives Badges

Receives Medals

Receives Trophies

63

64

Timeline

DS: iPhone Development (1 on 1 with Joe Elwell) DS: Visual Design (1 on 1 with Lorena Pigon)

DS: Internship

DS: iPhone Development (1 on 1) GS: Professional Practices

Winter Intercession 2011


[ DECEMBER - FEBRUARY ]

Spring 2011
[ FEBRUARY - MAY 2011 ]

Summer 2011
[ MAY - SEPTEMBER ]

Fall 2011
[ SEPTEMBER - DECEMBER

Make necessary design updates. Visual Design Research. Create other Critical Mockup Views. User Testing II & III Prepare for product development.

Visual Design Research. Work on Icon Design. Production of Interface Components. Begin Development.

Continue Product Development. Ad Photoshoots.

Continue Product Development. Final Usability Testing. Debugging. Launch.

Timeline

DS: iPhone Development (1 on 1 with Joe Elwell) DS: Visual Design (1 on 1 with Lorena Pigon)

DS: Internship

DS: iPhone Development (1 on 1) GS: Professional Practices

Winter Intercession 2011


[ DECEMBER - FEBRUARY ]

Spring 2011
[ FEBRUARY - MAY 2011 ]

Summer 2011
[ MAY - SEPTEMBER ]

Fall 2011
[ SEPTEMBER - DECEMBER ]

Make necessary design updates. Visual Design Research. Create other Critical Mockup Views. User Testing II & III Prepare for product development.

Visual Design Research. Work on Icon Design. Production of Interface Components. Begin Development.

Continue Product Development. Ad Photoshoots.

Continue Product Development. Final Usability Testing. Debugging. Launch.

You might also like