COMP482 Assignment 3 Final Report PDF

Preview

Summary

Table of contents Updated user tasks Task 1 - following favorite leagues Task 2 - Making selections Implementation Screenshots Design problems Heuristics evaluation summary Design overview Application demo Youtube URL Updated user tasksDuring the implementation of the app, further revisions were don...

Description

Table of contents Updated user tasks

Task 1 - following favorite leagues Task 2 - Making selections Implementation Screenshots

Design problems Heuristics evaluation summary

3

3 4 6

9 10

Design overview

11

Application demo Youtube URL

12 12

Updated user tasks During the implementation of the app, further revisions were done on the initial designs from assignment 1. As such, The following core tasks have been updated to reflect the changes in the implementation: Task 1 - following favorite leagues Interface: screenshots 11 and 12 below Task: 1

 hilip Fernandes, who has just been referred to SportsID by his friend, wants to Description: P choose his favorite sports to follow. He goes through the list of sports leagues the system offers and chooses EPL, MLS, NFL, and NBA. Philip is technologically inclined and follows sports religiously.

Task step

Knowledge, Believable, Motivated

a. Successfully registers and is forwarded to the initial welcome page

OK

b. Clicks “Next” and is forwarded to the second screen.

OK

Comments/Solutions

In this case, the user could also swipe left to accomplish the same thing

c. Examines the available sports leagues and makes a selection. When done, Clicks “Continue” and is forwarded to the last screen.

OK

At this point, the user might be asking what they receive from following a sport. Is it for relevant news, scores, social media posts,...?

Thus the previous or current interface might need to address this: that the games/matches you make picks for will only be from the leagues being followed.

Task 2 - Making selections Interface: screenshots 11 and 12 below Task: 2

 ntonio Dias is a former gambler who, upon going to a focus group, was Description: A advised to seek out an alternative to gambling. He navigates to the page showing all of today’s matches in his selected leagues and starts making his picks. He is aware that picking the team less likely to win yields more points if it manages an upset…so he carefully bases his selections on Vegas odds for maximum points. Tony is technologically inclined, and this is the first time using such a system.

Task step

a. Successfully logged in and is on the main page - 13th screen below

Knowledge, Believable, Motivated OK

Comments/Solutions

b. Views all of today’s matches in his selected league

OK

The user can always adjust their settings and add/remove leagues.

c. Clicks button representing the teams he picks to win.

OK

After the button is selected, its outline turns blue.

d. User clicks on the event’s card to view more information about the event

OK

Considering that this functionality is not a core feature - more of a nice to have- it might be omitted in the beta release. For the time being the user will see the No event information modal - illustrated in screenshot 17 below.

Implementation Screenshots 1

2

3

4

● The app’s landing page displays options for logging in or signing up, as well as the first 3 screens above - which can be viewed by swiping right/left. 5

6

7

8

● The 5th image shows how the UI will look like while loading. The 6th and 8th illustrate how error messages will be displayed. 9

10

11

12

● After a user successfully signs up, they will go through the process of choosing leagues to follow - as illustrated in the 11th and 12th images above. The user can then click on “Continue” after making his/her selection(s). 13

14

15

16

● After selecting what leagues to follow, a user will be directed to the 13th image above. This screen displays today’s game/matches, among other things. ● When a user makes a pick, this will be noted as illustrated in the 14th image. ● When a user clicks on the settings icon on the top right corner, the “Manage Leagues” modal will pop-up as shown in image 15th. ● The 16th screen shows how the event cards will look like if they are in the past. The cards outlined in green suggest the pick was correct; the number in the button reflects the number of points won. 17

18

19

● Clicking on an event card will show a pop-up modal with a “No event information” message - as illustrated in the 17th image above. After further implementation, this modal will display information such as the event time, location and stadium, odds, the teams’ records, and so on. ● The 18th image above shows the UI for when a selected date doesn’t have any events. For the purpose of the demo, only the current, previous, and the following days have events; choosing any other date will result in the “No events” screen. ● Clicking on the avatar icon on the top left corner will direct the user to the 19th screen above. Most notably, this screen notes the user’s stats in regards to the picks they have made - number of picks, percentage won, as well as the percentage of the picks they have gotten wrong.

● For the purpose of this demo, only the logout option works. The rest of the options notifications, invite, help, contact, account settings - are there to give an idea of the functionalities that will be supported in the final version.

Design Evaluation Results Design problems Heuristic

Problem description

Severity

Provide shortcuts

On the login and signup screen (as shown below), after a user inputs data, they’ll need to hit the “return” button on the keyboard before they can click on the “SIGN IN” or “SIGN UP” button.

2

Provide shortcuts

On the choose leagues to follow  screen (11th screenshot above), it might be helpful to some users to have a select all  option.

1

Provide feedback

On the choose leagues to follow  screen (11th 3 screenshot above), a user cannot proceed until at least one league is selected. This, however, is not communicated to the user.

Speak the user’s language

On the choose leagues to follow  screen (11th screenshot above), it might be better for the button on the bottom left to be labeled as “previous”, as opposed to “prev”

1

Provide feedback

The main screen (screenshot 13) might be very confusing for first-time users. They might not know what to do or expect, especially in regards to the selection buttons and what the numbers in the mean. This can be solved by having a walkthrough for new users, as well as adding helpful documentation that will always be available to access. The plan is to have all similar documentation accessible via the profile page’s help  option - as shown in the 19th screenshot.

4

Provide feedback

On the Manage Leagues  modal, after clicking Save , the changes are propagated and the modal simply closes. Ideally, the user should see an alert about the changes being successfully saved.

2

Heuristics evaluation summary The following are the 9 heuristics used for evaluating the application’s design: ● Simple and natural dialogue ● Speak the user’s language ● ● ● ● ● ● ●

Minimize user memory load Be consistent Provide feedback Provide clearly marked exits Provide shortcuts Good error messages Prevent errors

Evaluating the application against the aforementioned heuristics, resulted in the discovery of six notable design problems. Among the six problems, only one of them is critical and should be resolved before the application is released. The other five problems can be resolved at a later time since they do not impede users from effectively using the system. Design overview Overall, I believe the application’s design is above average and offers - for the most part - an intuitive user interface. Even without further changes, users can successfully perform the tasks that were deemed imperative in the planning phase (assignment 1). As noted in that planning phase, the functionalities that were needed to support the tasks are as follows: ● Functionality to follow favorite sports ● Making picks on which team to win These functionalities were considered a must to include because, together, they make up the minimal viable product. The fact that a user can already - with relative ease - follow and manage their favorite sports, as well as make their picks on given matches/events reflects well on the application’s design. Furthermore, the application’s overall look and feel is similar to many prominent mobile applications. As a result, users will have an easy time getting accustomed to the application especially when it comes to navigation. With that said, there’re a few things that should and could be done to improve the app’s usability. As previously mentioned in the heuristics evaluation section, the main improvement would be to include a walkthrough for first-time users. The best and easiest way to implement this would be to add a step after the 13th screen (on the illustrations above), that gives new users an option to take an interactive tour. I have previously integrated appcues -  a user onboarding software - into a web app and it worked and looked great. Such services are easy to integrate and can be used to create a nice, dynamic, and easy to follow tour. Also, down the line, when releasing new features, the same services can be used to introduce them to the users without needing to write any code. Once there is a tour, a walkthrough, or even just a page that simply outlines what the user can do, I believe the application will be more than ready. Because having that before the 13th screenshot ensures that users can hit the ground running once they are finally redirected to the 14th screen.

Application demo

YouTube URL https://youtu.be/8CiqRnz6vMc...