| COMPANY: | CA for NCI |
| TEAM: | Myself |
| MY ROLE: | UX Designer, Visual Designer, Developer |
| TOOLS: | OmniGraffle, Sketch, Photoshop, Android Studio |
| CODE: | Java |
| TIME: | Jan-Mar 2015 |
UX Research + UX Design + UI Design + Development + Usability Testing
THE BRIEF
This project focuses on designing an Android Application with the specific goal of motivating people for sport. The application is a hybrid of two types of popular applications – personal fitness app and multiplayer race game. It makes possible for racing against your friends or random people in real-time in the real-world.
The argument to write this app was a spectacular growth of interest in health & fitness, which increases the demand for such programs. The specific target audience will be mainly outdoor sports enthusiasts, but also people who would like to do sports more often, and they find it hard to motivate themselves, or just people who like to compete with other runners.
The RaceHeroes gives the opportunity to take part in the competition with other users in real time. Navigation determines a location of the user, which makes it possible to correlate the position of the other participants. In addition, the user will be able to remember their own tracks, compete with him/herself and share results.
Integration with the website gives the user the ability to view at any time his profile and statistics, history, the activity of his friends and all kinds of rankings.
KEY CHALLENGES
How to get motivated for sport.
RESEARCH
USER SURVEYS
INTERVIEWS
5 PARTICIPANTS INTERVIEWED
Interview notes example:
ANALYSIS
ANALYSING COLLECTED DATA
TASK: Identify group of users with most in common.
Based on the participants answers, a table showing importance of selected attributes on the scale 1-5 was created, where 5 indicates most important attributes and 0 not important.
Importance of each attribute for the average user on the scale 1-5.
Participants who answered survey questions were mostly 25-39 years old males. All of them like to use smartphone, but they try not to spend too much time on social networks. Some of them like to play games but usually they don’t have time for this. Being fit is very important for all and they have interests in various sport disciplines. They would also like to run. They find competing with themselves or with others motivating. Most of them says that doesn’t have problems with being motivated for sport. They like to meet people, but would rather not share all their sport results on the social networks,only the best ones.
PRIMARY PERSONA
This is generated from the user group determined is analysis.
HIGH LEVEL REQUIREMENTS
Data Requirements
- Social Network account
- Friends
- Speed calculation
- Distance (km or miles) covered
- Elevation
- Time
- Level of difficulty
- Step frequency counter and calculation
- Maps, targets, routs
- Competitions and events
Functional Requirements
- Social Network login.
- Various game modes. Competing with friends or yourself. Live race. Participating in group competition.
- Goal setting. Set goals to run a half marathon, lose weight, complete a total distance or set a personal record. (Push notifications)
- List of friends, inviting and following friends, finding new friends.
- Competing against friends.
- Selecting friends with similar skills to run with.
- Tracking user’s activity. GPS and accelerometer for the most accurate tracking of users distance, pace and time. Recording path, speed, distance, and elevation while user walks, runs, bikes, or do anything else outdoor.
- Displaying map view. Find and follow pre-planned routes and map your run on the go.
- While recording, being able to view live data, annotate path, and hear periodic voice announcements of users progress.
- Saving results and totals. See a full list of all your personal bests for races, distances and times.
- Syncing and sharing tracks and results via Google Drive.
- Share tracks and results with friends, see tracks and results your friends have shared with you, or make tracks public and share their URLs via Google+, Facebook, Twitter, etc.
- See the few last walking activities on your phone.
- Run while listening to music – app automatically integrates with users phone’s music app.
Other Requirements
- Support for Android Wear. For watches with GPS, RaceHeroes could perform GPS recording of tracks without a phone and sync tracks to the phone. For watches without GPS, we could see current distance and time, and control the recording of tracks from a wrist.
- Battery Saving Mode.
- Charging competition fees.
- Placing advertisements.
New Requirements
The RaceHeroes’ Game / Training modes weren’t detailed enough in the first CA, so additional interviews were conducted. Based on the updated persona few more requirements were generated.
- Run Mode – Each route will have a list of three users who finished this route with best time.
- Intervals Mode – structured training plan with medium and high intensive running exercises and warm-up / cool down repeated in rounds. User specifies time for rounds, exercises, number of rounds.
- Speed Play / Fartlek Mode – Creating own training plan – users can create own training sessions with different activities included.
- Speed Play / Fartlek Mode – Sharing created by the user training plans with friends and trying friends’ plans.
- Notifications during the session when to start next activity.
- Challenge Mode – User can specify a race start time and distance, then notify other users. It doesn’t matter where participants are located. Users who are in various locations can compete in the real time.
- Live Tracking – allowing other users to track your progress along a route you are creating with the app in real time using a combination of GPS signal and cellular data.
- Users should be assigned to different skill levels depending on their results. This could be based on a weighted average of distance run in the last 30 days. The recent results are more weighted. This would force users to run more regularly.
- Logging a run. User can add a run manually at the later time, if wasn’t able to use mobile during training.
WIREFRAMES
- What requirements are met?
- Must adhere to Design Principles
- Must adhere to patters within each principle
- Must provide justification for the design patterns you have chosen.
- Must be narrated
WIREFLOW
WELCOME SCREEN
Welcome Screen with Sign Up and Sign In Overlays
Welcome Screen is simplified to make it clear that user can choose to log in to the existing account, can register a new account or just postpone login / signup. Social networking isn’t a priority for the user (Persona CA 1), so additional button “Remind me later” was proposed on the Welcome Screen. This will minimise steps required to start a game / training.
According to the ‘Mobile Usability’ by Nielsen early registration isn’t a good idea in general, as users have a low level of commitment to the app. If user changes his mind and decides to use full functionality of the RaceHeroes, logging in at the later stage will be possible. To use some features like sharing training plans, challenges, sharing results, login will be required. To “Stay on the Page” login and signup happens on the same screen with two different overlay panels. There will be one more overlay designed at later stage – “Password Recovery”.
HOME SCREEN, SIDEBAR MENU
Home Screen consists of:
- Sidebar Menu button
- Log In button
- Game / Training Modes Menu with four buttons : Run, Intervals, SpeedPlay, Challenge
- Additional Settings Menu which user can access prior to entering training mode.
- Map with the current location of the user and other users who are nearby.
- Panel with current weather information.
- Details of the last run.
Buttons of the Modes Menu and Additional Settings Menu are not labeled to save space and provide cleaner interface. A tour invitations, explaining how to use RaceHeroes will be designed at the later stage, to provide user with help. Tour invitations will run when the user opens the application for the first time and they will be available at any time on the Settings Screen.
Sidebar menu provides quick access to the most important screens, like user’s Profile Screen or Log Out button. It’s not a final design and scope of the links will be improved at the later stage.
Sidebar Menu will be available from the most of the screens.
PROFILE SCREEN
Profile Screen will be visible to other users when privacy settings will allow this. User can access Profile Screen from the top of Sidebar Menu.
The decision was made to design an overlay window where user can edit details. Original design – a transition from display to edit mode, which was allowing user to edit Profile Screen directly, didn’t work that well. There are fields with values generated by the application and it wasn’t clear which are input fields.
Tapping the icon in the top right corner of the screen opens an overlay with input fields of user’s details. When editing Profile user can tap a camera icon to invoke Android camera application.
To finish edition user has two options. First, to tap an icon in the top right corner of the screen. That will cancel edition without saving new data. Second, to tap “Done” button. This will save new data and close an overlay window.
ROUTES SCREEN
Routes Screen opens when user taps Run Mode icon on the Home Screen. It is also available from the sidebar menu. User can add a new route by tapping “Add New Route” at the top of the screen. There are two lists. ‘My Routes’ list contains routes created by the user. ‘Other Users’ Routes’ list contains routes shared by other users. The scrollbar in the lists is a feedback mechanism to indicate scrolling is happening, how much content is loaded, and where the user is in the scroll operation. “Start” button at the bottom of the screen opens the Run Screen.
Icons ‘Save’ and ‘Cancel’ were placed in two different corners of the Route Details Overlay screen. Placing them next to each other could make it difficult to tap the one user needs.
INTERVALS SCREEN
Layout of Intervals Screen is very similar to the Routes Screen, this was designed to reduce surprise in the user and create consistent, reliable expectations. Other screens were also designed for consistency. For example all ‘Start’, ‘Stop’, ‘Pause’ buttons are at the bottom of the screen. ‘Add New …’ buttons are at the top of the screen.
“Nothing irritates a user more quickly than moving or disappearing navigational elements”
UI DESIGN
APP FLOW
MOODBOARD
SCREENS - VERSION 1
SCREENS - VERSION 2
DEVELOPMENT
…
APP ARCHITECTURE
TEST DESIGN
TEST GOALS
The objective of this exploratory study is to evaluate user feedback and to identify potential usability issues with the RaceHeroes Android app. The goals are to:
- Assess the overall effectiveness and ease of use of the navigational structure on the RaceHeroes app.
- Determine the strengths and weaknesses of the information displayed in the RaceHeroes app.
- Identify potential obstacles to recording workouts / races on the RaceHeroes app.
- Finding out what features a user uses the most or does not use at all.
- What problems did the users encounter while navigating the home-screens?
- How satisfied where users with the ability of the device to access the Internet
Through users’ real feelings and feedbacks, we will provide the developers with the reference on human-computer interface design to improve functionality and usability. The results of tests will show if there is a need to revisit the application in order to enhance the design of the interface.
Based on the user’s profile, goal and task analytics, the main task and sub-tasks of application use cases are developed and types of usability goals are then accordingly determined and prioritised. The three types of usability goals are effectiveness, efficiency and subjective user satisfaction.
The product will be tested on users smartphones running the Android 5.0 Lollipop operating system.
TEST ENVIRONMENT
The test will take place in an empty class room at large table with two stools. The user will sit on one of the stools at the table facing a camera, while the test administrator sits off to the side facilitating the testing. The camera will record the entire test which includes the pre-test, usability test and the post test.
PARTICIPANTS CHARACTERISTICS
Five willing volunteers will be selected as the “users”. A screener questionnaire will be created and used to ensure as broad a representation as possible given the resources available.
For this study, only participants who have owned an Android phone for at least 6 months will be included. We will also focus on participants who have interest in sport – running.
The following is a breakdown of characteristics of the participants we will be looking to recruit:
- 5 Participants will be recruited
- Mix of males and females
- Ages 25 – 39
- All interested in running
- Have owned a Android smartphone for at least 6 months
- All not designers, not usability professionals
THINK ALOUD SESSION
Usability sessions will use think-aloud protocol; audio and video will be captured, notes will be taken.
Participant will work through the same series of tasks. A moderator will conduct each 45-60 minute session. Each test will include:
- a pre-test interview;
- navigational and search tasks to find trainings or routes on the RaceHeroes app;
- tasks to learn more about creating interval training plan on the RaceHeroes app;
- tasks related to the recording / logging a run on the RaceHeroes app;
- a post-test interview.
USABILITY TESTING
TEST RESULTS
The results of the usability test were obtained from the think aloud session, the video capturing the participant’s interactions and the post-survey questionnaire results. The results were assembled based on averages amongst all test takers, however additional insights were gained from individual experiences. While reviewing the videos and think aloud notes, the results were categorised into three separate sections: rate of errors, their ability to complete the task or not.
The data collected from video observations were all highly similar in terms of error rate. The time it took the average participant to create new account was about 50 seconds and the participant with the fastest completion time was about 25 seconds.
The hardest task that was given to the participants was to preview a past races. Due to the lack of familiarity with the new interface, most participants were confused with the Results Screen and had difficulties completing the task. The videos showed participants confused why the results list is empty and not being able to notice “View All” button.
Once the participants completed the pre-questionnaire, they were given a set of verbal instructions before beginning the first task. The tasks were designed to test the effectiveness and navigability of RaceHeroes. Because not all of the features of the RaceHeroes were implemented at this time, the original test design had to be modified. The new scenarios included signing into an account, logging a past run, recording a run, editing race details, changing a profile name.
The overall think aloud test method results were benchmarked against completing similar tasks with a Runtastic, Sports Tracker and NikeRunner mobile applications. By benchmarking these results a clear picture can be ascertained on the usability of the RaceHeroes mobile app. Table below summarises the results of the think aloud test method and graph below gives a graphical representation of the benchmarking result.
Effectiveness
The percentage of users that manage to complete a task successfully thus becomes a measure of the effectiveness of the design. The number of errors made on the way to completing a task is an example of a performance measure (Rubin and Chisnell, 2008). 6 errors were recorded during the five think aloud tests. These require to be addressed in the next development iteration. Two errors, representing 40% of participants, were due to users not being able to find profile screen edit button. A bigger button with “Edit” label should be included to address this. During one of the sessions, button was covered with the avatar icon of other application (Messenger), this issue also should be addressed. An error occurred with one user on recording a run. Participant was confused with “Log In a Run” and “Record a Run”. Finally 60% of participants could not easily preview Results List. This could be solved by redesigning an app, so user can see results just after tapping “Results” button on the Home Screen.
SUS Summary
The System Usability Scale (SUS) was modified for the mobile application testing and used to assess user feedback. The overall score was 61 %, with scores ranging from 55 % to 67%. The app rated highly on learnability, indicating users knew what to expect from the app; however, it rated low on integration of features and desirability, indicating that users were not interested in using the app regularly.
Pricing calculator and product catalogue for jewellery artists and hobbyists.
Fast and accurate pricing of handiworks, tracking profits and losses.