Recent Projects

Recent Projects

Recent Projects

My projects contain various works completed as both the lead and supporting designer. The projects below were completed during my tenure at Volt Athletics, a strength and conditioning fitness company that uses both web and mobile based applications to serve multiple end-user personas — athletic coaches, administrators, athletes, and everyday consumers in both a B2B and B2C setting.

Static to dynamic workouts

Dynamic workouts

User issue:

Training Extras in Volt Athletics Athlete Training app were previously static PNG files and had recorded low usage.

Solution:

Move Training Extras into an updated version of Volt’s dynamic workout experience allowing the user to be guided through the routine and providing an opportunity for interaction and feedback with the app.

Challenges:

An interactive library of supplemental routines that users could choose from is needed.
Process:

Using scenario mapping we created user flows that then allowed us to prototype hi-fidelity mock ups. The prototypes were presented to internal stakeholders prior to dev handoff.

Responsive Web Tools

Background: Volt provides coaches with analytics that help give data on workout engagement and performance. An earlier version of our Analytics feature was difficult to navigate and filter and used components that were challenging to maintain.

Solution: Restructure our analytics tooling to be easier to navigate, and filter on the front end while improving performance on the backend. Analytics should be responsive and useable on both desktop and mobile platforms.

Results: A responsive web application feature that can be easily navigable on any device screen size. Components were re-constructed in a way that became easier to maintain and use elsewhere in the product. A new filtering paradigm was also created and componentized for future use across other product features.

Responsive Web Tools

Background: Volt provides coaches with analytics that help give data on workout engagement and performance. An earlier version of our Analytics feature was difficult to navigate and filter and used components that were challenging to maintain.

Solution: Restructure our analytics tooling to be easier to navigate, and filter on the front end while improving performance on the backend. Analytics should be responsive and useable on both desktop and mobile platforms.

Results: A responsive web application feature that can be easily navigable on any device screen size. Components were re-constructed in a way that became easier to maintain and use elsewhere in the product. A new filtering paradigm was also created and componentized for future use across other product features.

Improved Index Tables & Data Sorting

Background: Our users expressed that our previous index pages lacked essential features such as search, sort, filter, and navigation options, making it cumbersome to get around. Data objects sat in isolation from one another making it difficult to see and understand their relationship to one another.

Solution: redesign, the index pages into powerful data tables using a more traditional index table approach, enabling you to search, sort, filter, and navigate through related data objects more seamlessly.
Results: Enhanced navigation — Quickly get to other programs, groups, and users associated with data objects. Getting to a user from their program or group is now seamless and easy from any page where you can view that user, and vice versa.

Improved sorting and filtering — The redesigned index pages allow for sorting data columns in ascending or descending order, enabling organization of data based on various criteria. Apply filters to display specific subsets of data, making it easier to find the information needed.

Accessibility in mind — Prioritized accessibility, optimizing the index pages for keyboard navigation. Navigate through the data tables, interact with filters, and move between different elements using the keyboard alone, providing a more efficient and inclusive user experience.

Improved Index Tables &

Data Sorting

Marketing Campaign - IAM Working Templates

Background: The marketing team was interested creating an In-App Message (IAM) to highlight a new feature announcement while also creating a template system that would allow marketing team members to easily replicate IAM for future campaigns.

Solution: Using Figma and Braze, I created an easy to use and documented Figma template that follows Braze's mobile digital asset restrictions and guidelines. This template can be easily used by marketers with very little working knowledge of Figma's tooling.
Results: A reusable template design system that accounts for multiple screen sizes and asset requirements set by our marketing tool, Braze.


*Further marketing design projects can be presented on request. Above is just one of a few examples I chose to highlight.

Marketing Campaign -

IAM Working Templates

Background: The marketing team was interested creating an In-App Message (IAM) to highlight a new feature announcement while also creating a template system that would allow marketing team members to easily replicate IAM for future campaigns.

Solution: Using Figma and Braze, I created an easy to use and documented Figma template that follows Braze's mobile digital asset restrictions and guidelines. This template can be easily used by marketers with very little working knowledge of Figma's tooling.
Results: A reusable template design system that accounts for multiple screen sizes and asset requirements set by our marketing tool, Braze.


*Further marketing design projects can be presented on request. Above is just one of a few examples I chose to highlight.

© Spjames Design. 2024

LinkedIn