Below is a collection of ongoing side projects, exploration, and some old work I’ve done over the years.
Daily UI challenge – Leaderboard
Date: August 2018
Project: Daily UI Challenge – Create a Leaderboard
Daily UI posted this challenge: Design a leaderboard. Is it for gaming, sports, politics, or something else? Consider the important statistics to show, percentages, points, profile pictures, etc.
- Clean and simple design that makes it clear and easy to quickly view who’s in the lead for each category.
- Don’t overwhelm the user with too much information, give them some but not all right away.
- Allow the user to sort and filter categories for quick access to the stats they are looking for.
Leaderboard and sort drop down
These screens show the sort drop down activated. For this made up game (Fort-Fite), gamers simply want to view the top scores of each game type (Solo, Duels, Squads).
I display the leaders of each category using fun “cards”, and keep the list short on each card so users aren’t distracted, overwhelmed, or finding themselves scrolling down the screen forever. If the user wants more than the top 5 of each category, they can simply click the “Complete Leaders” button to expand the cards.
Fantasy Football App Exploration (2016)
* I recently was able to revisit some of these screens , and updated the design work. It’s very interesting and fun to see how much we have learned and improved over the course of our careers.
While I didn’t tackle a complete flow makeover again, I did make plenty of corrections in the design work, and revamped a couple of functions that make this “re-design” simpler and more efficient. Check out the switching an “inactive” player with a “benched” player. Click here to view my simple prototype.
I have chosen to leave my old designs below, as I do believe it’s good to show improvement whenever possible.
Fantasy Football App Design Exploration Continued
The explosive growth of fantasy football is rooted in the ability for fans to feel a special rooting interest in a team of players they’ve selected themselves. With over 33 million people playing each year, the competition for having the easiest, most user friendly fantasy app has never been more fierce.
The information in this case study is my own and does not reflect the views of ESPN.
I worked solo on this project, as I have an interest in fantasy football and also have experienced frustration using the current ESPN app myself.
I conducted the research, wire framing, prototyping and the final design using friends, other fantasy players and InVision users to solve the problem of making the ESPN app less frustrating and more user friendly.
The Challenge: Improve navigation of key features to prevent users from switching services.
Currently the most popular apps being used for fantasy football are CBS, Yahoo, NFL, and ESPN. With over $800 million being spent yearly on fantasy, maximizing user downloads mean generating the most revenue.
To maximize downloads, the app must be easy to use, navigate, and offer the most vital features to give the player an advantage over the competition.
The current app has a navigation problem, both in the main menu bar, and also the hamburger menu. To prevent users from switching to using another service, these two menus would need to be redesigned for ultimate user convenience.
To expand my research beyond friends and other fantasy players I’m acquaintances with, I jumped on the App store to get a sense of what other users were saying about the current ESPN app.
“Why is it hard to find my match-up and league scores? I don’t need
Roster News listed in the menu, I need my match-up.” – Haterz84
“Until they allow me to see player news by clicking on players,
I will be going with the CBS app.”– Mark Mass Man
“This app is in desperate need of a reworking for viewing
trades and league transactions” – Big Hirag
“It is hard to research players, add/drop players and view all league match-ups. This app makes fantasy football less fun.” – F-Rehoused
Persona and Task Flow
In order to help me find problems with the app, I created a user persona named Codie. 25 years old, a hardcore fantasy football player, and a current ESPN app user, Codie wants to log in, view his roster, match-up and league.
He also wants to easily be able to find key features such as trades and league transactions. Below is the ideal scenario for Codie:
Using the ideal scenario above which encompasses the journey of Codie wanting to check his roster, match-up, and league, I created the user flow to help me see how a user gets to a positive outcome with his or her initial goal.
After creating the user flow, it was clear to me that I needed to emphasize making the main menu the primary spot to find the essential tasks of the player. Roster, match-up and league would be the “Big 3” to focus on in order to deliver an optimal user experience.
I gathered 5 friends that have played fantasy football before. Some of them had used the ESPN app in the past. Using the task flow I was able to set up some tests for these users in order to find specific pain points in the app. Each user was provided a scenario that closely represented the task flow above. Here is an example scenario:
- Find my match-up score
- Find the scores and standings of the other teams in the league
- Find my roster and get player news
- Make a trade
Along with finding these features, I asked my friends to give me some feedback on the look of the app. With the player screen and roster screen being the most complained about, I asked my 5 friends to rate these two screens on a scale of 1-5.
With these results, it was obvious that users were completely unable to find how to make a trade, and struggled to find the other teams in the league scores. Also, the match-up screen was difficult to find.
Crafting the Solution
After identifying the problems and pain-points, I set out to create basic lo-fi sketches for quick creative ideas. After multiple sketches, I was able to get a rough idea of what I assumed to work.
Because the three essentials in fantasy football are to review your roster, match-up and check the league, I made the menu feature these three things. Below is my proposed solution for the home screen:
Proposed Solution Changes
I changed the “Big 3” menu to feature “Roster”, “Match-up”, and “League”. This allows the user to easily navigate between them, without having to search the app. I also made the Roster screen more attractive, as it got low ratings in terms of look.
The Player page displays a boring picture, irrelevant information, and no cool features like video or analysis.
Proposed Solution Changes
Added video for highlights and analysis, made the picture more attractive and switched preseason info with current, up to date stats.
The menu doesn’t have an option for key features such as add/drop, or trades. Players had to hunt for things they wanted to do. Even the wording on some features is unclear.
Proposed solution changes
I changed the wording of the menu options to clearly state where each tab will take you. I added key features such as “trades” and “add/drop” so users don’t have to get lost searching for these tabs.
League and Match-Up Menu
The League menu tab displays both the league scoreboard and league standings, making it very easy to check up on the other teams. The Match-up menu will show your current score along with highlighting when a player is within scoring distance (the red zone)
After completing the prototype, I gathered my 5 users for my final usability test.
The tasks were the same I assigned before my redesigns, but the results were immensely different. Frustrating and confusing moments that were dominant before were suddenly replaced with confidence and happiness.
Here are the test results:
Users were able to find the “Big 3” menu bars right away after the log in screen. Additionally, all users found the hamburger menu much clearer, and saw features such as “trades” and “add/drop” as soon as the menu was brought up. Users also really enjoyed the better look and feel of the player page, and roster screen. All 5 users
said they would continue to play fantasy football with the ESPN app, and not switch to Yahoo or CBS next year.
Before the redesigns, the process to find your match-up, view the league scores and standings, and making trades was way harder than it should’ve been. Hopefully with my proposed solutions, users will decide to stick with ESPN for their fantasy football needs,
and recommend the new app to their friends.