BSU Athletics: Redesigning for Engagement
BSU Athletics is the official app for interactive annual reports, media guides, and more for Ball State University sports created and managed by student interaction designers at Ball State’s Center for Emerging Media, Design, and Development. The BSU Athletics app features interactive guides with 360-degree panoramas, interactive graphics, multimedia content, and game highlights updated weekly for the division 1 teams.
Overview
Each year interaction designers at the Ball State Digital Publishing Studio update the content and visual designs for teams’ upcoming seasons. Our goal for the 2017-2018 seasons was to increase the number of downloads and active users. My team improved the user experience for returning users by simplifying task flows and implementing regular updates. Additionally, we wanted to engage new users through an increase in multimedia and interactive graphics.
Duration: Sep 2017 - Mar 2018
Role: Interaction designer
Team: 3 Interaction designers, product manager
Contributions: DPS app creation; visual, layout, and interactivity designs for field hockey, swimming & diving, men’s volleyball, baseball apps
Skills: Design critique, graphic design, heuristic evaluation, UI design, usability testing, user flow, wireframes
Tools: Adobe Experience Manager, Digital Publishing Studio, Illustrator, InDesign, Photoshop
Our Process
Implement
Second design iteration
Testing
Design critiques, usability testing
Prototyping & Design
Wireframes, graphic design
Ideation
Brainstorm, branding
Conduct user research
Data analysis, user interviews
Audit current experience
Heuristic evaluation
Audit Current Experience
Heuristic Evaluation
Our team wanted to understand the work of last year's designers and identify usability problems. We audited the current experience by conducting a heuristic evaluation using Jakob Nielsen's ten heuristics for interface design. The product manager assigned each designer a mobile and tablet app to analyze.
Key findings
Inconsistent navigation
-
The navigation bar was not always visible on internal pages. Lack of a navigation tool could affect users’ ability to recover from errors.
The app flowed similarly to an e-reader. Users swiped to navigate from page-to-page. However, this affordance was not apparent.
Lack of help & documentation
-
There was no way for users to contact or DPS. A contact page is essential to the improvement and maintenance of the app.
Distracting and ineffective visual design
-
Each team’s page has a unique interface design. However, visual design elements would distract from the content.
Conduct User Research
Method
We decided to conduct user interviews and data analysis to improve our understanding of user needs and habits.
.png)
Data analysis (Google Analytics)
I used Google Analytics to compare the number of returning users and downloads for mobile and tablet devices. The data showed only four tablet downloads in the past year and only one active user. For the mobile app, there were 400 downloads in the past year and 20 active users. From this data, we decided not to release a tablet application anymore since the traffic was significantly lower compared to downloads and activity on our mobile app.
User Interviews
Interviews were conducted with three stakeholders to understand their needs. I interviewed student-athletes, fans, and a representative from the athletics office. I identified the following trends:
-
Student-athletes: Their main reason for using the app was to have an easy place to access their teams’ stats
-
Fans: Desired more real-time updates
-
Representative: The athletics office expressed hopes that the app would encourage BSU students to have an increased interest in BSU sports.
Ideation
Our team held a brainstorming session to generate solutions based on our low Google Analytics results and feedback from user interviews.
Design Goals
Live Twitter & News Feeds
To improve live updates, we decided to add a live Twitter feed and news feed using a DPS plugin instead of updating the information by hand.
Increase Interactive Elements
We planned to add more interactive elements to encourage engagement and increase interest among new users. Interactive touchpoints included senior profiles, timeline, photo galleries
Visual Design
We decided to change the design of each app to be simple and modern. We would eliminate distracting elements and mute color schemes.
Layout
Our heuristic evaluation revealed task flows are not optimized for mobile use. To improve task flows, we planned to restructure the interface with bottom navigation, navigation tabs, home menus, and internal pages.
Social Media Approach & Promotional Posters
To engage interest from Ball State’s student population, we decided to create promotional posters for a social media campaign on Twitter. Other factors will involve tweeting score updates and interacting with coaches and athletes from the BSUDPS Twitter account.
Design and Prototyping
Sketches
I began the design process by sketching to gain a better understanding of layout and user-flow.
Software
The interfaces using Adobe InDesign, Illustrator, and Photoshop. Interactions were created through Digital Publishing Studio.
Graphic Design
The second step in the design process was creating a coherent design. I developed a design guide for each team. My goal was to simplify interface design by eliminating borders, using sans serif font, and a neutral color scheme. Although I wanted a simple interface, I created visual interest through pops of color and color gradients.
Validation
Weekly Design Critiques
Our team held weekly design critiques to get feedback on our projects. We evaluated user experience, visual design, and functionality. These meetings were a great way to make sure the parts fit together as a whole.
Usability Testing
I instructed participants to complete a series of tasks while the project manager marked pain points on a defect log.
Usability defect log used during usability tests
Second Design Iteration
Larger Targets
Usability test participants took several tries to tap individual buttons (primarily bottom navigation and home). Thinking of Fitts’ Law, I increased the size of touchpoints and their targets to improve speed and accuracy.
Before
After
Navigation Actions
Some testing participants tapped, and others swiped to view different screens. I added both functions to afford the different use cases.
Swipe function
Tap function
Scroll Restoration
When users returned to the roster and schedule, they would scroll to the information they were viewing before. Scrolling distracted users from their tasks. I added anchor points to remember a user’s spot.
Photo Gallery Affordances
Testing participants were unsure how to interact with the photo galleries. Therefore, I added directional arrows and a caption suggesting users to swipe. Tapping also works, but the user tests showed swiping was the more intuitive method to participants.
Deliverables
Baseball
Field Hockey
Men's Volleyball
Swimming & Dive
500+
Sessions
In the first release cycle (3 months), BSU Athletics hit over 500 uses. Users came back to our site week after week as new seasons began and scores were updated.
+ 10%
Downloads
Downloads increased 10 percent from the last season, recording an all-time annual high for the BSU Athletics app.
5:32
Avg. Session Time
Users spent approximately five minutes per session diving into articles, score updates, and interactive graphics.
