Bringing 24MX to Life: The Story Behind the About Page
Project Overview
Goal: To design an engaging and informative About Page for 24MX, aligned with the company’s branding and marketing goals.
Challenge: Create a page that tells the company’s story while maintaining consistency with the design system and reusing existing components in Storyblok.
Goal: To design an engaging and informative About Page for 24MX, aligned with the company’s branding and marketing goals.
Challenge: Create a page that tells the company’s story while maintaining consistency with the design system and reusing existing components in Storyblok.
Goal: To design an engaging and informative About Page for 24MX, aligned with the company’s branding and marketing goals.
Challenge: Create a page that tells the company’s story while maintaining consistency with the design system and reusing existing components in Storyblok.
Stakeholder Insights
Before I started designing the 24MX About Page, I had several meetings with different stakeholders to understand their goals and expectations. A key part of this was talking to the marketing team, since the page is important for promoting the company and telling its story. They shared insights on the key messages they wanted to highlight and how they wanted to engage with customers.
Design Approach
I focused on balancing storytelling with functionality by leveraging Storyblok components.
Reuse of Existing Components: Most of the page was built using pre-existing components from other pages to ensure design consistency and efficiency.
New Component Creation: I designed a custom component called “Brag” to showcase company milestones and achievements, adding a touch of personality and credibility to the page.
I focused on balancing storytelling with functionality by leveraging Storyblok components.
Reuse of Existing Components: Most of the page was built using pre-existing components from other pages to ensure design consistency and efficiency.
New Component Creation: I designed a custom component called “Brag” to showcase company milestones and achievements, adding a touch of personality and credibility to the page.
I focused on balancing storytelling with functionality by leveraging Storyblok components.
Reuse of Existing Components: Most of the page was built using pre-existing components from other pages to ensure design consistency and efficiency.
New Component Creation: I designed a custom component called “Brag” to showcase company milestones and achievements, adding a touch of personality and credibility to the page.
Design Decision Highlights
I focused on balancing storytelling with functionality by leveraging Storyblok components. Most of the page was built using pre-existing components from other pages to ensure design consistency and efficiency. I designed a custom component called “Brag Component” to showcase company milestones and achievements, adding a touch of personality and credibility to the page.
1) Hero Section & Company Overview
To immediately grab attention, I used a Hero component with bold text: “We are more than Europe’s largest motocross store.” This emphasizes 24MX’s forward-thinking approach and dynamic presence. The background features either a high-impact image or a looping video, reinforcing the brand’s modern and adventurous spirit. Right below the hero section, I included a short description of the company provided by the marketing team. For this, I used an existing Storyblok text component, ensuring consistency with the rest of the site’s design.
I focused on balancing storytelling with functionality by leveraging Storyblok components. Most of the page was built using pre-existing components from other pages to ensure design consistency and efficiency. I designed a custom component called “Brag Component” to showcase company milestones and achievements, adding a touch of personality and credibility to the page.
I focused on balancing storytelling with functionality by leveraging Storyblok components. Most of the page was built using pre-existing components from other pages to ensure design consistency and efficiency. I designed a custom component called “Brag Component” to showcase company milestones and achievements, adding a touch of personality and credibility to the page.
1) Hero Section & Company Overview
To immediately grab attention, I used a Hero component with bold text: “We are more than Europe’s largest motocross store.” This emphasizes 24MX’s forward-thinking approach and dynamic presence. The background features either a high-impact image or a looping video, reinforcing the brand’s modern and adventurous spirit. Right below the hero section, I included a short description of the company provided by the marketing team. For this, I used an existing Storyblok text component, ensuring consistency with the rest of the site’s design.
2) Brag Component
To highlight the company’s achievements, I designed a custom Brag component. This section showcases 24MX’s milestones, reinforcing credibility and inspiring trust.
2) Brag Component
To highlight the company’s achievements, I designed a custom Brag component. This section showcases 24MX’s milestones, reinforcing credibility and inspiring trust.
1) Hero Section & Company Overview
To immediately grab attention, I used a Hero component with bold text: “We are more than Europe’s largest motocross store.” This emphasizes 24MX’s forward-thinking approach and dynamic presence. The background features either a high-impact image or a looping video, reinforcing the brand’s modern and adventurous spirit. Right below the hero section, I included a short description of the company provided by the marketing team. For this, I used an existing Storyblok text component, ensuring consistency with the rest of the site’s design.
3) Core Values
Our CEO emphasized the importance of featuring 24MX’s three core values. I utilized a pre-developed 3-blurb component and arranged it vertically, giving each value its own space while maintaining a clean, readable layout.
2) Brag Component
To highlight the company’s achievements, I designed a custom Brag component. This section showcases 24MX’s milestones, reinforcing credibility and inspiring trust.
3) Core Values
Our CEO emphasized the importance of featuring 24MX’s three core values. I utilized a pre-developed 3-blurb component and arranged it vertically, giving each value its own space while maintaining a clean, readable layout.
4) Customer Trust & Engagement
The marketing team wanted to highlight the trust of over 100,000 riders and customers. I used two Overview Large components side by side:
One showcases the number of riders sponsored, with a CTA leading to the 24MX Ambassador page.
The other highlights sponsored events, with a CTA linking to upcoming events.
4) Customer Trust & Engagement
The marketing team wanted to highlight the trust of over 100,000 riders and customers. I used two Overview Large components side by side:
One showcases the number of riders sponsored, with a CTA leading to the 24MX Ambassador page.
The other highlights sponsored events, with a CTA linking to upcoming events.
4) Customer Trust & Engagement
The marketing team wanted to highlight the trust of over 100,000 riders and customers. I used two Overview Large components side by side:
One showcases the number of riders sponsored, with a CTA leading to the 24MX Ambassador page.
The other highlights sponsored events, with a CTA linking to upcoming events.
5) Pierce Group Connection
To emphasize 24MX’s connection to Pierce Group, I added an Overview Small component. This section introduces Pierce Group and showcases other brands under its umbrella, giving users a broader context.
1) Hero Section & Company Overview
1) Hero Section & Company Overview
5) Pierce Group Connection
To emphasize 24MX’s connection to Pierce Group, I added an Overview Small component. This section introduces Pierce Group and showcases other brands under its umbrella, giving users a broader context.
1) Hero Section & Company Overview
1) Hero Section & Company Overview
5) Pierce Group Connection
To emphasize 24MX’s connection to Pierce Group, I added an Overview Small component. This section introduces Pierce Group and showcases other brands under its umbrella, giving users a broader context.
6) Join & Careers
The final section includes a 2-blurb component featuring:
An invitation for customers to join the Riders Club, encouraging community engagement.
A call-to-action for job seekers, linking to the Pierce Group job openings page, as requested by HR.
6) Join & Careers
The final section includes a 2-blurb component featuring:
An invitation for customers to join the Riders Club, encouraging community engagement.
A call-to-action for job seekers, linking to the Pierce Group job openings page, as requested by HR.
1) Hero Section & Company Overview
6) Join & Careers
The final section includes a 2-blurb component featuring:
An invitation for customers to join the Riders Club, encouraging community engagement.
A call-to-action for job seekers, linking to the Pierce Group job openings page, as requested by HR.
3) Core Values
Our CEO emphasized the importance of featuring 24MX’s three core values. I utilized a pre-developed 3-blurb component and arranged it vertically, giving each value its own space while maintaining a clean, readable layout.
Conclusion
Designing the 24MX About Page was a valuable learning experience for me. At first, I felt frustrated because I wanted to showcase all my skills by designing completely new components. However, my design mentors taught me an important lesson: You don’t always need to reinvent the wheel.
They helped me understand that if an existing component serves the purpose, it’s smarter to use it rather than spend time and resources creating something new. This approach not only saves effort but also ensures consistency across the website.
Through this project, I learned to focus on what truly adds value to the user experience. The one new component I created, the Brag component, was necessary and impactful, but everything else worked well with existing pieces. This balance of creativity and practicality is something I’ll carry forward in future projects.
Designing the 24MX About Page was a valuable learning experience for me. At first, I felt frustrated because I wanted to showcase all my skills by designing completely new components. However, my design mentors taught me an important lesson: You don’t always need to reinvent the wheel.
They helped me understand that if an existing component serves the purpose, it’s smarter to use it rather than spend time and resources creating something new. This approach not only saves effort but also ensures consistency across the website.
Through this project, I learned to focus on what truly adds value to the user experience. The one new component I created, the Brag component, was necessary and impactful, but everything else worked well with existing pieces. This balance of creativity and practicality is something I’ll carry forward in future projects.
Designing the 24MX About Page was a valuable learning experience for me. At first, I felt frustrated because I wanted to showcase all my skills by designing completely new components. However, my design mentors taught me an important lesson: You don’t always need to reinvent the wheel.
They helped me understand that if an existing component serves the purpose, it’s smarter to use it rather than spend time and resources creating something new. This approach not only saves effort but also ensures consistency across the website.
Through this project, I learned to focus on what truly adds value to the user experience. The one new component I created, the Brag component, was necessary and impactful, but everything else worked well with existing pieces. This balance of creativity and practicality is something I’ll carry forward in future projects.