#Website # Enterprise #Transportation
Shuttl - Enterprise Website (B2B)

Overview
We got the brief to redesign the Shuttl's enterprise website. As the organisation started to expand their B2B (business-to-business) vertical, they required a new face where they can talk about their enterprise brand story, solutions they offer in this category and publish case studies of their successful clients.
Team
Me - Product Designer
Raghvendra SIngh - Product Designer
Asif Jamal - Illustrations
Prachi Abhyankar - Copywriter
Kanika Jain - Product Manager
The challenge
So, we already had a website for the B2B business of Shuttl. But that website was old and not built keeping in mind the future scale of the enterprise business.
Old enterprise website
The process
We started to gather all the information we had on the enterprise business. Talking to the B2B Shuttl team, stakeholder interviews and the communication that they send out to their clients.

Information Architect
After that, we put together all this information into an information architect. This gave us the idea about what all sections can be there for the website and the big content pieces required to complete this story.
Information Architect of the website
Early Micro-interactions
As we finalised the sitemap from the IA/mindmap and move on to start creating an early wireframe and some interactions for the home page. Being the landing page, the main story will live here only.
Early stage interaction to showcase the 3 main offerings

Content Direction
We decided early on what our target customers are for this website. They are mainly - employee transport admins and CFOs of big corporations. So, we thought that we should back our success statements and communicate them using numbers.
Numbers are something that gives them a clear picture of how Shuttl's enterprise solution has impacted other in the industry and how it can impact their organisation as well.
Wireframe of the landing/homepage
Visual storytelling
We introduced illustrations in order to explain the offering of solutions and platforms in a better and delightful way. With the story in place in terms of the content. We wanted to visually bring the brand to life using our colours in the illustrations, showing the people and their connection with the technology which is helping them in improving their efficiencies and providing them with the innovative solutions to grow and evolve.



Final illustrations used in the website

Brand new look
The insights we got from the enterprise brand story and the visual impact from the illustrations. We combined both to come up with the design of these pages to represent our new enterprise brand.







📝 Learnings
There were two major learnings here -
1. With the help of the stakeholder interviews and understanding the mindset of our target audiences, we were able to pinpoint the communication and use the numbers to deliver our offerings better.
2. Use of illustrations not only made the whole experience of the site more delightful but they also communicated the visual tone of the brand really well.