Project Snapshot
The Problem
Crease Pro is in the process of redesigning their application for its relaunch. The onboarding flow has already been redesigned and I was brought on to redesign the game and practice flow to become more user friendly in order to capture and engage a larger user group.
The Solution
Use a user-centered design approach to create a product that provides a simple way for users to start a session, log a session, and review past sessions to give them the data necessary for making themselves a better player.
My Role
I worked with 1 other UX designer through the course of this project. We were tasked with the redesign and split into working on a player and coach flow after the research phase. Crease Pro provided the current redesign of their onboarding flow, style guide, player interviews, and user contacts for coach interviews.
Users & Audience
This application is designed to help goalies of all skill levels. The target demographic are high school level athletes and coaches that are looking to improve their gameplay.
Research
Competitive Analysis
Interviews
4 coaches and 1 player were interviewed to learn more about their experiences with the Crease Pro application. Questions ranged from asking about the environment, behavior, and frequency of use.
Main takeaways emerged for both the player and coaching perspective. These included a minimum of 3 people on practice field needed to use app (goalie, shooter, recorder), fluid practice contains multiple goalies in net during short amount of time, coaches need access to multiple players information to help create practice plans according to their weaknesses, players tend to work directly with goalie coach to improve gameplay.
User Stories
Begin Session
As a user, I want to start my practice or game session so that I can keep track of my shots.
Log Session
As a user, I want to log my shots so that I can review them at a later time and learn my strengths or weaknesses.
End Session
As a user, I want to end my session so that I can return to the main application.
User Flow
Ideation
Sketches
Ideation sketches are used to get multiple concepts on paper. It was helpful to examine these concepts and generate common themes between them.
The ideation process uncovered key components that were selected to move forward with. This includes the ability to customize your stats, introduce premium version, use home screen to incorporate a social or community feed (future), record and add notes during session, visual and copy used for list items, and user understands how to end a session.
Workflow
Wireframe
Sketches are transitioned into a digital wireframe to create a layout of the content.
Wireflow
Red area shows the path a user will take to complete the user flow (begin session, log session, end session).
Revised Wireframes
Wireframe screens were one of the deliverables I presented to the team at Crease Pro. From this presentation, key takeaways were formed as well as some client feedback to make adjustments prior to usability testing.
Key takeaways included option to start or stop video during sessions, ability to swipe from “LOG” to “STATS” during session for live stat update, option to start with or without video to minimize the amount of screens needed to start a session. Some adjustments included removing pop-up box for goal or save, incorporate drills into practice sessions, questions and scaling used in post session screen, sharing on social media, and the use of square buttons.
Testing
Usability Test
Four participants took part in remote testing using Zoom or Google Meet. Participants were tested in either the player perspective or coaching perspective. Each participant was given the same tasks to perform and asked follow-up questions after tasks were completed. Each session lasted about 20 mins.
Some of the top issues that were discovered during testing include practice plan button confusing when user try to start a session, user not able to back out of field view in game session, and ability to see notes when reviewing past sessions.
Revised Screens
Following the usability test, all screens are converted into high fidelity using a loose style guide provided by Crease Pro. Findings from the usability test are taken into account by making necessary adjustments during this transition.
Begin session
Log session (main)
Log session (shot)
End session
Reflection
Conquer, then divide
Working with other designers is great to bounce ideas off of or speed up the wireframe and high fidelity design process. However, I learned to establish all areas of screen in sketches before moving to wireframes on the computer. Anything not touched on will have multiple forms of interpretation.
Digital downsides
This entire project and relationship with Crease Pro was done so remotely. Giving presentations over Zoom and Google Meet was new to me and I learned that you should always go into a presentation with a backup plan. In the event that screen share isn’t working, or someones internet is unstable, the show still must go on. Sending the presentation out in an email as the meeting is starting is a good way to ensure everyone will be able to see the slides and can follow along during the call.
The big guys can be wrong too
Analyzing well known competitors in the market are great to find the market standards and how different areas of a product are handled. Even though it can be a well know large corporation, you still need to check on things like accessibility and make sure you are working off of industry standards and not your favorite application.
Next Steps
During the final presentation, next step suggestions were laid out for the Crease Pro team. These included the following: Lay out remaining areas of game and practice flow (ex. drill content, notes, shot revisions, session review) then conduct another round of usability testing. Lay out remaining flows (profile, drills, upgrade to premium) using the current high fidelity screens as a guide. Making the shot selection hot spot more accurate to allow user to recognize where on net they tapped. Creating an updated goalie image that is lighter on the screen using greyscale colors for the net and a silhouette of a goalie.