Redesigning Mahindra Accelo's
legacy platform for a
mobile first website experience

Redesigned digital experience for Mahindra Accelo's mobile-first website.
CLIENT
Mahindra Accelo
REGION
India
DELIVERABLE
UX UI Design and Engineering
TIMELINE
6 months
BRIEF

Reimagine the website 
with strategic foresight,
showcasing Mahindra's
oldest business in
a modern light.

Mahindra Accelo needed an intuitive website to showcase their sustainability commitment and global reach. The existing site failed to clearly represent their decarbonization, waste reduction initiatives, and social governance. The goal was to create a digital platform that highlighted their sustainability efforts, global footprint, and evolution over time.

OUR ROLE

Insight-driven visual storytelling — our role illustration

Insight-driven visual storytelling

Conduct stakeholder research to understand the goals and challenges.

Seamless integration and functionality — our role illustration

Seamless integration and functionality

Develop a CMS-enabled website for the client team to scale up easily in the future.

Brand reflection — our role illustration

Brand reflection

To ensure the website effectively reflected brand values and sustainability efforts.

Our Approach

An all out, full stack UI/UX design and development process.

01

UX research

Detailed research to grasp the goals and challenges. Analyse CSR, business areas, and target audience.

02

Paper prototyping

Detailed design concepts and high-fidelity prototypes that aligned with the identified design principles.

03

Wireframing

Refined wire-framing and These prototypes to ensure smooth information architecture

04

UI visual design

Brand aligned visual design outcomes with smooth and seamless interactions and animations

05

Full stack engineering

Agile development to refine and enhance the website’s functionality, ensuring it met the needs of a global business owners

RESEARCH

Analysis and discovery.

We began with a strategic analysis to align our design approach with Mahindra Accelo’s vision. This included a deep dive into their business model, environmental commitments and global market presence. By identifying key communication challenges and opportunities, we established a clear direction for the website redesign, ensuring it would effectively reflect their strategic goals and market position.

Hand sketching wireframes for the Mahindra Accelo website design and CMS engineering case study.Mahindra Accelo website research session using sticky notes for content and UX planning.Team arranging sticky notes and interface sketches during UX research workshops.
IDEATION

Conceptualisation and wireframing.

Our design process involved creating initial concepts, sketches, detailed wireframes, and interactive prototypes. We refined these designs through iterative cycles, incorporating feedback to ensure the website’s functionality and aesthetics aligned with the brand’s identity and objectives. This iterative approach allowed us to fine-tune the design to hone their core messages.

Mahindra Accelo website screens showcasing visual layouts for sustainability, business and brand storytelling.

OUR STRATEGY

Concept-first approach — our role illustration

Concept-first approach

We focused on creating an engaging visual narrative and intuitive navigation that highlighted the brand’s, environmental and global initiatives.

Brand-aligned design outcomes — our role illustration

Brand-aligned design outcomes

By identifying key communication challenges and opportunities, we laid a clear direction for the website to effectively reflect strategic goals and market position.

EXECUTION

UI Design, development and CMS.

Created an engaging visual narrative and intuitive navigation that highlights their businesses, environmental and global initiatives. Key aspects included designing clear pathways for users to explore their business sectors and sustainability efforts, enhancing both information accessibility and visual appeal. Following the design finalisation, the development team created pixel perfect UIs, animations and interactions.

Mahindra Accelo mobile website screen showcasing responsive UI design and CMS-led content experience.Mahindra Accelo mobile interface showcasing sustainability content and responsive website screen.
Mahindra Accelo website screens showcasing responsive design, sustainability messaging and CMS implementation.
Mahindra Accelo mobile website screen explaining circular economy through responsive content and visual storytelling.Mahindra Accelo website interface showcasing location and business information within the redesigned digital experience.
CONTACT US

All strong business partnerships
start with a conversation.

Let's connect
Spinach Experience Design's team conducting a collaborative UX strategy and design thinking
workshop with sticky notes and digital boards.
Designer reviewing digital interface layouts on screen as part of product design process.