1
Womo Iyegha // 02029609 iyeghaw@gmail.com Web Design + New Media Graduate Program 12.09.2011
2
3
TABLE OF CONTENTS Autobiography
1-5
Information Architecture
48-49
Resume
6-7
Task Flows
50-63
What is it?
8-9
Visual Walkthroughs
64-84
Statement of Interest
10-11
Mood Board
Project Form
12-13
Code Functionality
86-87
Positioning Statement
14-15
Feature Highlights
88-97
Target Audience
16-23
Usability Test Summaries
98-101
Competitive Overview
24-33
Technical Specifications
102-103
Successes + Challenges
34-35
Credits
Development Process
36-47
85
104
4
5
AUTOBIOGRAPHY My purpose in pursuing an MFA in Web /New Media was to refine my design skills and develop and master my understanding of the creative development process. I am hoping to become a more creative, efficient, and overall better UI/UX designer, who creates more thoughtful and momentous user experiences. Some of my interests include design, coding, photography, architecture, woodworking, basketball, weight lifting/strength training, travel/geography, socializing, and reflecting. I currently work as the lead UI/UX designer for a start-up tech company called Webtab, which specializes in developing social commerce platform that allows people, networks and businesses to seamlessly interact in real time. My experience at Webtab has played a huge role in understanding of the technical and business aspects of my thesis. My professional purpose in working in the world is to create user-centered virtual experiences that not only solve real-world problems or needs, but also help enhance and encourage real-life social interactions. Whether I am working solo or as part of a creative team, my goal is to design experiences that are engaging and easy-to-use. I have found through my professional career and time at AAU, that this is easier said than done.
6 Resume [ http://www.wpimedia.com ]
Womo Iyegha (02029609) iyeghaw@gmail.com 612.483.7254
OBJECTIVE My goal is to create user experiences that are simple, engaging, and momentous.
Webtab Inc. [02.10 - Present]
Scooter Interactive [08.10 - 05.11]
MSL Solar
EXPERIENCE (Fulltime) Responsibilities include improving the UI/UX design of Bartab’s mobile and desktop apps, print design for promo materials, web banner design, usability/QA testing, design mockups and presentations for current and future business deals. (Creative Director/Principal) Worked with a team to design and develop websites for multiple clients. Responsibilities include visual design, HTML/CSS, brainstorming and concept development, usability testing.
(Freelancer) Designed and developed the website www.mslsolar.com, which is a solar company based in LA.
[10.09 - 12.09]
Snubb Records [02.09 - 04.09]
Pierrewilliams.com
(Freelancer) Designed and developed the Snubb Records website, which is an international techno/trance record company based out of Australia and Germany.
(Freelancer) Designed and developed the website for Pierre Williams, who is an up and coming gospel music artist.
[10.06- 12.06]
U of Detroit Mercy [09.04- 05.04]
(Intern) Designed, developed and managed UDM’s Information Technology Services website.
7
Academy of Art [08.18 - 12.11]
University of Detroit [08.00 - 05.04]
EDUCATION MFA, Web Design + New Media (Expected Graduation, Dec 2011) Summa Cum Laude, AAU Spring Show 2008, 2011 BA, Digital Media Studies, concentration in CIS Summa Cum Laude
SKILLS User Experience and Interaction Design, UI/Visual Design, Information Architecture Adobe Creative Suite CS5, Xcode, Objective C, HTML, CSS, AS3, PHP, JQuery
8
9
WHAT IS IT? Baller is a highly usable location-based iPhone application that helps basketball players find and connect with ballers in their area in order to increase their level of competition. and foster an environment of competitive fun.
10
11
STATEMENT OF INTEREST As long as I can remember, I have always had the desire to design and create. With my thesis project, I am hoping to combine two of my great passions in life: design and basketball. I desire to create an application/experience that is not only fun, useful, and convenient to me, but for all users who are looking for a tool that will help them connect with other basketball players in a simple, fun, and meaningful way.
12
13
PROJECT FORM Platform Category Technology
iPhone 3GS, iPhone 4G, iPhone 4GS, iPod Touch Real-world mobile application Xcode, Objective C
14
15
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 iPhone’s 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 rewards for reaching certain milestones within the app. This system is meant to encourage application usage as well as game performance on the basketball court.
16
17
TARGET AUDIENCE The primary target audience for the Baller application will be pickup basketball players ages 18-34, who match one or more of the following descriptions: Pick up players who love playing basketball but don’t have the time to look for good competition. Pick up players who love playing basketball, but want to know how many and what kind of players are playing at a court before making a trip out. Players who are always looking to play against new competition and enjoy challenging themselves to become better. Players who love basketball and would enjoy receiving virtual and real-life incentives and rewards for doing what they already love.
USER WALKTHROUGHS
18
019
19
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 ]
A graduate student with no time to be looking for quality games
Solution ]
Filtered search feature. Notification system.
20
21
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 ]
He is a competitor who is budget conscious and doesn’t like wasting time.
Solution ]
Check in Feature. Tracking Feature.
22
23
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 ]
I find it inconvenient to find good competition.
Solution ]
Voting System. Player Stats View.
24
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, and Shopkick 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 service. 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.
25
26
Yelp
Relevant Rating System Filter by Distance Location-based Mobile App. Map-based Event/Game Scheduler Award System Easy to Use User Tracker/Locator Nice Interface Specific Focus Custom Places Invite Based on Rating
Foursquare
Gamesnake
Infinitehoops
Nofouls
Baller App
27
Competitive Matrix
28
29
YELP PROS
CONS
Easy to search for places (has search filters and location-based search).
Doesn’t really have a focused niche market(not specifically tailored to the needs of basketball players).
Has a system for rating and reviewing different businesses.
Check in system allows users to check into a place even though they are not in the proximity.
Has a very wide target audience. The app could be useful to almost everyone.
Users can receive access to offers without having to go to a speciifc location. Doesn’t sound to good from a business perspective.
Check in system allows people to share the places they are visiting in real-time. Has special offers that give users incentives to check-in.
-
30
31
Foursquare PROS
CONS
Offers incentives (deals) for checking into places.
Doesn’t really have a focused niche market(not specifically tailored to the needs of basketball players).
Visually appealing User Interface. I love the icon design.
Check in system allows users to check into a place even though they are not in the proximity.
The ‘Tips’ feature is pretty cool. It’s a good way to see what other people like about a place.
System does a good job with providing incentive for people to check in, but it doesn’t really promote real-life social interaction.
The Filter menu is refreshingly different and fun to play with. It works really well.
32
33
Gamesnake.com PROS
CONS
Has a rating system that allows players to earn jerseys based on total rating.
UI is not too pretty. Not real-time or location based.
Offers player suggestions for pickup games based on skill Doesn’t have a mobile version. Broad target audience (over 80 pickup sports categories. Can setup and join games
Although it has a ratings system, it’s kinda hard to gauge what a player is good at based on a ‘jersey’. pp is not made specifically for basketball players, so it A misses the opportunity to create a more tailored and engaging user experience that could retain users.
34
Successes + Challenges From the time of my midpoint review until now, I have definitely met many of my goals that I had strived for. Some of the main goals I had set for myself was to really my refine my understanding of UX design, which came naturally while working out the design and functionality of my application over the past year. Also, I wanted to really expand my understanding of objectoriented programming and development on the IOS platform. The first couple of months of development were pretty smooth, but after beginning to work fulltime, it was really tough most of the time to switch back and forth between designer and developer. But, because of my exposure to developing for iPhone, I really learned how to become a mobile designer who keeps in mind the technical limitations and constraints of working in the mobile environment. I am able to make more workable design decisions based on resources, time, and the user experience/design patterns of the environment I am designing for. I was constantly reminded through user testing and QA, just how important it is to continuously get feedback on functionality and design. It is really easy to lose track of why certain design decisions were made when getting carried away with aesthetics. This is why I made it a point in the beginning to not even think about the final look until the feature flows were tested and finalized. Also, I had to pass on implementing some of the custom UI components, so that I could focus on learning how to build the core functionality that was critical demonstrating my user flows.
35
36
Development Process The process of designing and developing was long and iterative. Alot of thought, time and effort was put into coming up with the final user experience of the Baller application. At midpoint I had a pretty good high level idea of what my app needed to be in order to be successful. I created the initial wireframe skeches to purely get an idea of how the app could function, given the list of features and functionality that I came up with through initial target audience and competitive research. Based on feedback from my midpoint review, I spent much of the following months figuring out how to create a player rating system that was qualitative and appropriate for the system that I was trying to create. An paper prototype with UI updates and potential designs for the props system were tested and I then went on to refine my design and create a high fidelity HTML prototype based on user feedback. The testing of the of the high fidelity prototype was pretty successful and I had very few refinements to make based on user feedback. From here, I would test one other user and begin the process of actually developing the native iPhone application prototype on the IOS platform. Many of the issues that I came across had to do with making certain features ‘pop’ and the wording of my user task document. The process of developing the native iPhone prototype was long and rough at sometimes, but I learned a ton from my experience. The first two months, I pretty much immersed myself in learning about development in Apple’s xCode and Interface Builder. Once I started actually building the application, little UI and functionality details were brought to the surface every so often, and I had to adjust the design of my UI to accommodate different use cases that I never considered. This happens often in the real-world and I expected this. Most of the testing I would do on the native app would be on-the-fly QA; I would ask different people what they thought about certain design elements and if any changes made sense. I would then make any refinements based on feedback. There were a few design decisions that I made, soley because when I was coding, I realized there were some things that were either redundant or could be arranged in a better way. Many of these things were functionality that I hadn’t tested, but decided to include in the final prototype.
37
1. Initial Wireframe Sketches
2. Paper Prototype
3. High Fidelity HTML Prototype
4. Final Native iPhone Prototype
38
Development Process: The Props System One of the greatest successes and challenges that I can highlight from this project is the ‘Props’ system. When I first started working on this project, I had not put much thought into how players would ‘rate’ other players and based on feedback, I concluded that I needed to create a system that encouraged players to ‘up their game’ and self progress through positive reinforcement. The app now features a system that allows players to give props to other players in their network for being good at four different skill sets that are desirable to have on the court–Scoring Threat, Team Player, Defensive Stopper, and Board Crasher. Each player can keep track of the props they receive from their profile or view the total stats of players who are checked into a specific court. The statistics are updated in real-time as more players check in and a court rating is generated based on the average total props of players at that court. On the next few pages, I highlight some of the original sketches that I came up with for this functionality and how it evolved to it’s current state.
39
Early pencil sketches of the props system where I am brainstorming different ideas
40
Mockups v01 where I further explore the use of color and interactivity to visualize the props data.
41
42
Mockups v02 where I play around with color shades to contrast between different prop types. Here I’ve also narrowed down the functionality of the visualization.
43
Although the shades of color does a great job at differentiating between the different prop categories, at first glimse, it really obvious to the user how many players actually received props for each of the categories. I took in consideration when finalizing the design.
44
For the final design, I’ve used iconography to help differentiate between the different prop categories. This iconography is persistent throughout the app. I’ve used large type to highlight the number of players, so the user can immediately see how many players there are for each category.
45
One thing that remained constant throughout the different design iterations is when using the ‘court stats’ function, the system returns the players based on the highest rank for each props category. When using the ‘compare players’ function, the list returns the players by highest total props.
46
Development Process: The Rewards System From the beginning, I realized the system also needed some mechanism for encouraging participation and offering users incentive for utilizing certain functionalities within the application, such as checking in, referring friends, giving and receiving props, etc. Although I had knew that the application needed some type of rewards system to encourage continued participation, I did not know how this would work our from a business and functionality perspective. Over the course of my research and development, the ‘rating’ system transformed into something that wasn’t really clear, to something that is not only qualitative, but has the potential to generate alot of revenue when integrated with a real-life rewards program based around partnerships with sporting brands and retailers. I had this in mind from the beginning, but it wasn’t my main focus. Alot of my understanding of how the rewards system could work came from the experience that I gained working as a Visual/UI designer for a startup tech company that specializes in social mobile commerce and ‘social gifting.’ Over the past 9-10 months, in a addition to gaining exprience designing for mobile, I’ve had the opportunity to create high-fidelity mockups, help with business presentations, and attend business pitches for cutting edge products that are utilizing some of the same concepts and strategies that I had intended on implementing into my product. This really gave me the confidence that I was heading in the right direction. I came to a realization over the past few months of just how valuable the rewards aspect of my application could be, and I recognized that it provided even more incentive for users to use my application. Not only could players get real-time updates of activity in their area based on location and a qualifiable props system, but they could also be rewarded for doing what they already love to do–which is play basketball.
47
Reward System Functionality Example
Player reaches a milestone number of props from other players
Player receives a medal for reaching a set milestone (ex. highest number of Team Player Props for the month
More details can be seen in the User Walktrhoughs
Certain medals unlock real-life rewards(ex. BUY 1 Get 1 FREE Nike basketball shorts) that can be redeemed at particiapting retail stores.
48
Choose Sign-up
New Sign-up
Sign-up Using Facebook
Additional Details
Settings
Edit Profile
Notifications Settings
Invite Friends
My Profile
Sign In
Players
Player Details Props
Prop Details
Medals
Medal Details
Rewards
Reward Details
Coupon
INFORMATION ARCHITECTURE
My Players
My Games
My Courts Gice Props Panel
49 1
Map
Games
Courts
Game Details
Court Details
Alerts
Start a Game Player Invites
Checkin Panel
RSVP
Court Stats
Locate
Compare Players Add Description
Choose Court
Choose Time
Invite Players
Swap Players
Players Checked In
Props Details
Games Scheduled
50
User Flow 01 // Check into a Court Checking into courts allows players that are following you, know when and where they are playing at a specific court. Users receive real-time alerts when you check in.
51
Select 'Check In' button or 'Courts'
System assigns awards if milestones have been reached
Search for or select a court for the 驶Nearby Courts始 list
following you will receive a notification of your status in their
Hit the 'Check In' button.
Enter additional details and select 驶Confirm始 Player's that are
52
Use Flow 02 // Start a Game Although, I am only showing one way in which a user can enter into the ‘Start a Game’ process, there are multiple entry points for completing this task. The user could also hit the ‘+’ on the Games or ‘MyGames’ view to begin this task.
53
Select ʻCourtsʼ
Select a court from your ʻFavorite Courtsʼ list
If user has the game set to private, then notifications will be sent to invites.
Search for or select a court for the ʻNearby Courtsʼ list
Select the ʻNew Gameʼ button
Enter game details and select the ʻDoneʼ button Game is created
Player's that are
54
Use Flow 03 // Follow a Player Following a player allows users to keep track of when and where their friends are playing. They will receive real-time notifications of when a player checks in and have the ability to give props to these players if they admire their game play. Users have the option of turning on/off the notifications for specific players.
55
Select 驶Players始
Search for and select the player that you want to follow
Select the 驶follow始 button
Player is added to your list of players that you are following.
56
Use Flow 04 // Give Props to a Player
The idea is to motivate players to perform their best and/or improve their game in order to get compliments or props from other players. There are four categories in which a user can ‘Give or Receive Props’: Team Player, Board Crasher, Scoring Threat, and Defensive Stopper. One point is given to a player for each prop that he receives for a category. When they reach certain milestones in props, the system awards them medals, some of which unlock access to real-life rewards that can be redeemed at participating partner retail stores.
57
Select player from your 'My Players' list.
Select the 驶Give Props始button
Select a star for each category that you want to vote for
System assigns medals and gives access to rewards if milestones reached
Player's props stats are updated
Select 'Done'
58
Use Flow 05 // Checkout the Courts Stats of a Court
The idea is to motivate players to perform their best and/or improve their game in order to get compliments or props from other players. There are four categories in which a user can ‘Give or Receive Props’: Team Player, Board Crasher, Scoring Threat, and Defensive Stopper. One point is given to a player for each prop that he receives for a category. When they reach certain milestones in props, the system awards them medals, some of which unlock access to real-life rewards that can be redeemed at participating partner retail stores.
59
Select 'Courts' and search for and select a court 'Court Details' view slides in
Select 'Stats'
Select a court from your Favorite courts list User can view the top players at the courts based on props categories. Player Stats view slides in Select the 'Compare' icon button to compare player stats 1 on 1.
60
Use Flow 06 // Add a court to your Favorites List Adding courts to your favorites list allows other players to see where other players favorite spots to play.
61
Select 'Courts' and search for and select a court 'Court Details' view slides in Select a court from your Favorite courts list User can view the
Select the 驶Add to Favorites始 button
Court is added to your 驶Favorite Courts始 list
62
Use Case 07 // Redeem a Reward The props and rewards system allows players to earn medals for reaching certain milestones determined by parameters set into the business logic of the system. Some of these ‘Medals’ will give users access to free or significantly discounted sporting merchandise that can be redeemed at participating sporting stores in reallife. The parameters and milestones for earning rewards will be dynamic and customized based on negotiated terms with participating partners/sponsors.
63
Select the 驶Rewards始 button
Select your reward
User can view the
After choosing your gear, select the 驶Get this Offer始 button
Show your phone to the cashier.
64
VISUAL WALKTHROUGH 01 Check into George Sterling Memorial Court You want to check into this court in order to broadcast to your friends and network that you are playing.
Launch Baller Application App
65
Select Check in button
Select the court
Select the ‘Check in here’ button
66
Confirm Check in
Court view is updated to reflect that you are checked in
67
VISUAL WALKTHROUGH 02 Start a Game at Moscone Basketball Court and Invite Friends You want to schedule a game for tomorrow afternoon and invite some of your friends to come and play.
Select ‘Sign Up Using FB’
68
Select the ‘+’ button
Start a Game View Slides in
Add a description
69
Choose a court
Choose a time
Choose player invites
70
Select the ‘done’ button
Game is created and notifications sent to invites
71
VISUAL WALKTHROUGH 03 Follow Anthony Morrow You played with Anthony last week and want to keep track of when and where he’s playing. How would you go about following him?
Select the ‘Players’ tab
72
Search for and select the player
Select the ‘Follow’ button
Player is added to your ‘Followed Players’ list
73
VISUAL WALKTHROUGH 04 Give Props to Johnny Sac How would you go about giving props to Johnny for being a good ‘Scoring Threat’ and ‘Team Player’? You must be following a player before you can give them props.
Select the ‘Players’ tab
74
Select the ‘Follow’ button next to the appropriate player
Select ‘ok’
Select the ‘Give Props’ button
75
Select the stars that correspond to the props that you want to give
Select ‘Confirm’
The players’ props statsare updated. Select the ‘Props’ button to view the player prop stats.
76
Select a category to see who gave you props
Select ‘view comments’ to see comment details
77
VISUAL WALKTHROUGH 05 Checkout the Court Stats of George Sterling Memorial You are thinking about playing basketball at George Sterling Memorial, but want to see what kind of players are currently playing there. How would you go about viewing the ‘Stats’ for this court?
Select the ‘Courts’ tab
78
Choose a court
Select the ‘Stats’ button
Select ‘Scoring Threats’
79
System returns a list of players that have been given props for this category from highestt ranked to lowest
Select the ‘Compare Players’ button
View loads the top two ranked players that are checked into the court. Select the ‘Swap’ button
80
Select another player to compare
View is refreshed and you can compare the stats with updated player
81
VISUAL WALKTHROUGH 06 Add Presidio Heights Playground to your Favorite Courts How would you go about adding Presidio Heights Playground to your list of Favorite Courts.
Select the ‘Courts’ tab
82
Choose a court
Select the ‘Add to Favorites’ button
Court Added Confirmation alert.. Select ‘ok’
83
VISUAL WALKTHROUGH 07 Redeem your Buy 1 Get 1 FREE Reward You have earned a Buy 1 get 1 Free reward at NikeTown SF and you have not redeemed it yet. Go ahead and redeem it.
Select the ‘Courts’ tab
84
Select your reward
After choosing your gear, select the’Get this offer’ button
Show your phone to the cashier to redeem the offer
85
MOOD BOARD
86
CODE FUNCTIONALITY This native iPhone protype was built in Xcode with Objective-C. One of the first steps that I took in devleoping the final form of this project was to make custom assets that would be optimized for standard 320x640 and HD retina display iPhones. This required the creation of regular-sized and high def versions of each asset that would be included in a resources folder. IOS automatically detects what screen resolution that is needed pulls the appropriate assets for optimal viewing. In addition, I primarily used Interface Builder to layout the UI of my main views and created corresponding viewcontrollers that contained outlet variables so that I could pull the data into the interface. Another thing that I did before beginning to layout the structure of my code, was to create little diagrams of objects and the characteristics each of them contain. This allowed me to have a visual outline to refer back to when building each object. The structure I used in setting up my code is called MVC (Model,View, Controller). The model(BallerDataModel) is where I set up the data or the main objects and arrays of objects for the project. The viewcontrollers are where I set up all of my methods for retieving the data and passing it back to the views (UI) that I set up in Interface Builder. My main data arrays consist 30 players, 20 courts, and 10 games. Each player has their own array of players, games, courts, and props. Each court has its own array of check ins and scheduled games, and each game has an array of players that were invited.
87
88
FEATURE HIGHLIGHTS: CHECK IN The main problem that I saw with alot of check in based systems, such as Yelp and Foursquare, is that it allows users to check-in to places even though they are not in the proximity. Considering that access to highly-discounted name-brand products will be rewarded to players for reaching certain check-in milestones; for the Baller app, this lack of check-in accuracy will not be sufficient. The Baller system will validate check-ins based on proximity and time spent at a court. For instance, a player must be at least 10 feet from a court and in the proximity for at least 30 minutes in order to be verified as ‘checked-in’. Geo-targeted promotions using push notifications will be blasted out to players who are in the proximity of a nearby court, giving them reminders about deal milestones and further incentive to check-in and play the sport that they already love.
89
90
FEATURE HIGHLIGHTS: REWARDS PROGRAM As mentioned earlier, one of the primary things that we are going to do in order to provide incentive for users to continue using our app is our rewards program. With the rewards program, users will be given access to discounted sporting merchandise for reaching different milestones within the app. For example, looking back at the props system, if a user has the highest number of ‘Scoring Threat’ props for two consecutive weeks, they will be given access to a special partner offer ($30% OFF the new Kobe basketball shoes). The greater the milestone, the greater the reward/discount will be.
91
92
FEATURE HIGHLIGHTS: MAP The map feature is something that I really want to build and expand on for a future release. Right now, the map has a feature that allows players to filter out the map results based on players checked in or scheduled games. So, if a user wants to area activity in a glimse, the map is quick an easy way to do so.
93
94
FEATURE HIGHLIGHTS: TOOLTIP HINTS Because of time constraints and my wanting to test the app without giving the user hints, this functionality was not implemented into the final prototype, it will definitely be something that I implement. The plan is to continue showing these ‘tooltip hints’ until the user completes the corresponding interaction for the first time.
95
96
FEATURE HIGHLIGHTS: SEARCH FILTER Another feature that I intend on implementing that would be great for narrowing down the type of players that a user is searching for, is the search filter. The search filter would allows users to narrow down search results based on distance, props, or skill level.
97
98
USABILITY TEST SUMMARY FALL 2010 Test Participants
Environment
Joe.
Former basketball player
Desktop HTML Prototype
Takuma.
Pick up player
Ilona.
Lab intern.
Feedback Details 01
All felt the task was pretty straight forward and easy. Would add an option for ‘Adding Friends.
02
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.
03
Joe and Ilona wanted to go to the ‘Player Details’ view to find the game.
04
This task was pretty easy to complete. Takuma related the word ‘Follow’ to only people that are not in your profession.
05
All felt the task was pretty straight forward and easy. Takuma was confused at first, but thought task was easy
Task List 01
Sign up for new account.
02
Start a new game.
03
RSVP for a game.
04
Find and follow a player.
05
Check into a court.
06
Vote for a player.
07
View the voting stats of players at a court.
99
06
All felt that this task was pretty simple and made sense.
07
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 didn’t really stand out to any of them.
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.
Takuma.
He didn’t 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. (Steven’s game details.)
Ilona.
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.
100
USABILITY TEST SUMMARY FALL 2011 Test Participants
Environment
Joe.
Pickup basketball player
Andy.
Pickup basketball player
Joe and Andy tested the app in the iPhone simulator on the desktop. Cesar tested the app on an actual iPhone.
Cesar.
Buddy
Feedback Details 01
All felt that the task was pretty easy Cesar recommended changing the look and feel of the check in button making the button smaller
02
All the users felt that the task was pretty easy Cesar recommended validating the form after the user hits ‘done’
03
All the users felt that the task was pretty easy.
04
All the users felt that the task was simple Joe and Andy went to the ‘Props’ panel for the player, indicating that perhaps I should give users the opportunity to access this functionality from this location as well. Cesar recommended changing the color of the Props button so that it is different from the Follow button.
05
Cesar recommended the use of tooltips to highlight features in app. Joe thought it made total sense. Andy didn’t understand the task at first, but thought it would be easier if I changed thewording of the script.
Task List 01
Check into a court
02
Start a new game.
03
Follow a player.
04
Give props to a player.
05
Checkout player stats of a court.
06
Add a court to your favorites.
07
Redeem a reward.
101
06
All of the testers felt that the ‘Add Favorites’ thumb button didn’t pop like it needed to.
07
All three users understood this task and thought that it was straightforward.
Observations of Test Participants Joe.
Joe pretty much flew through most of the tasks with ease and felt that if he had to complete them again, it would take him no time.
Andy.
Because of language differnences, I think Andy had a hard time understanding the tasks and it took him a little longer to complete the tasks because of this. But, he felt that after running through the app once, he could easily find his way around.
Cesar
Cesar ran through the app really easily and offered alot of tips and suggestions on how to make the UI even clearer. One thing that he had mentioned was the use of tooltips, to highlight main functionality features. This is something that I had totally had planned on putting as part of the design specs, but wanted to test the app without using hints.
102
TECHNICAL SPECIFICATIONS
NATIVE IPHONE PROTOTYPE Device
iPhone 4, iPhone 4S, iPod Touch, iPad 2
Platform
IOS4 or Higher
INSTRUCTIONS After you are finished looking at the prototype, please close out of the app in order to reset the data. (See the opposite page)
103
Double press the ‘Home’ button
Press down on the ‘Baller’ app icon for 3 seconds
Select the minus button at the top left of the Baller icon
104
CREDITS Thanks to everyone who contributed to the design and development of this project. Thanks to Kathleen Watson Ryan Medieros for their feedback in helping me flush out the design functionality of the props system. Thanks to Lorena Pignon for her help in Art Direction and feedback. Special thanks to Joe Elwell and Scott Fisher for advising me in the development of the native iPhone prototype. I really learned alot from these guys. Special thanks to Cuco Vega for working with me to come up with some great photography for this book. Thanks to Steve Johnson, CEO of Webtab Inc. I’ve learned a ton from him about business strategy over the past 10 months.
105