Athlete Studio
Athlete Studio is an information technology company. They are a content automation platform that builds enterprise-grade marketing infrastructure for professional athletes.
I developed the brand-new style guide, assets, prototypes, and interactions for their marketing website, content engine, and admin dashboard.
Role & Goals
Responsibilities
As an Interaction Designer at Athlete Studio, I am responsible for developing new brand guidelines to bring a rich and efficient browsing experience to the company's online platform.
To unify the visual effects of the entire brand, help internal communication, and work with engineers to establish the website.
Main goals :
-
Create new brand guidelines for unifying its entire online presence.
-
Design the complete marketing website, and produce the interaction demos.
-
Develop the content engine prototypes.
-
Rebrand the admin dashboard.
Brand Guidelines
The brand style guide applies to unify the visual effects of the entire brand, help internal communication, and support future needs. It aims to improve the visual aesthetics of Athlete Studio's official website and serves marketing purposes.
Interaction Demo
Marketing Website
Athlete Studio wants a marketing page with a sense of high technology, athletic and modern. The single-page site aims to target a specific audience and provide them a definite service. The motion graphics in the background and the hover state for options and buttons bring a rich and efficient browsing experience to the site.
The basketball pattern background provides an athletic and modern feeling.
User Interface
Single-page site with 5 sections:
-
Welcome part.
-
Client list + a pop-up window with detailed information.
-
The enterprise-grade marketing infrastructure.
-
Three main client categories.
-
Pricing and service details.
The triangle chip maps the logo and shows service infrastructures powered by AI.
The pop-up window brings more detailed information about the service report and the connection form.
Create 3D Super Athlete as required for promotion purposes.
Pricing and service details.
Admin Dashboard
User Interface
The Admin Dashboard provides the administrator detailed information about all platforms, such as the real-time report, content API, and media library...
Interaction Demo
Content Engine
The content engine provides users a fast way to create social media posts for marketing purposes. Regardless of design background or not, anyone can use it easily. Applicable for this era of information explosion, such as game season.
Design Stages
Design Thinking
Solution Inspiration
Comparative
Digits: How It Works
Their site has a dark background and interacts with large motion graphics and infographics to bring a rich browsing experience. Visually high-tech sense.
Nike: Profile Page
One column grid with large size of photos and text. Visually bright and broad, giving the audience a positive and athletic feeling.
Quartexx Management
A sports agency has a single-page site that includes five main sections: welcome, service, clients, team, and contact. The site uses wide photos of pro athletes with large text and a photo list to show pro clients.
Approaches
Athlete Studio has a clear purpose for their marketing page, and they provide service for professional athletes. A single-page site would be a practical option to target the specific audience, and it's easy to control the audience's behavior on the site and guide them in a clear direction.
Hi-tech | Athletic | Modern | Creative
Visual Development
User Interface Iteration
The dark background with motion graphics provides a better sense of high technology.
Showcase their creativity in the welcome section as the requirement.
Design super athlete characters for their three main client types.
Due to Technical Limitations
Design Iteration
Due to technical limitations, it is not feasible to edit the text in the image, so change the design to a pop-up window.
Wrap-up
As an interaction designer at an information technology startup, I got a valuable chance to build the company's brand guidelines, marketing website, admin dashboard, and content engine. I was able to take a close look at how the brand guidelines help unify the entire brand as well as the company's marketing campaigns.
I was also impressed by how the color palette, assets, and motion graphics affect the overall feel of the visual design. Communicating with front-end engineers and engaging in project development work enabled me to understand better the connection between design and programming.
