Work in progress.
For images, videos, and extra visual materials; see the Portfolio Assets database.
See also: Interactive Prototype
In early 2023, Autorama – a leading online vehicle leasing company operating under the brand Vanarama – undertook a comprehensive redesign of its corporate website. As the Lead Design Engineer on this project, I was responsible for overhauling the site’s user experience (UX) and user interface (UI) to better serve its audience. The goal was to modernise the website’s look and feel, improve its usability, and align it with the company’s evolving brand identity and business needs.
Project Background
Autorama had grown rapidly in recent years, expanding its services and audience. However, its corporate website had not kept pace. The existing site was effectively a simple “brochure” site with outdated design and limited functionality. It provided basic company information but failed to engage users or communicate the dynamic, innovative spirit of the organisation. The site’s content and structure were not optimised for the range of visitors it was getting, which included industry partners, investors, press, and prospective employees (in addition to customers coming via the Vanarama brand). The leadership recognised that the corporate site needed to do more than just exist – it had to actively support the company’s branding and business objectives.
As Lead Design Engineer, I collaborated with a cross-functional team – including stakeholders from marketing, content, and development – to define the project scope and objectives. We planned a full redesign that would address not only visual aesthetics but also deeper UX issues like navigation, mobile accessibility, and content strategy. The timeline was ambitious: we aimed to launch the revamped site within a few months to coincide with a major industry event where Autorama would be in the spotlight.
Challenges
Redesigning the Autorama corporate website presented several key challenges:
Outdated Visual Design: The old site had an antiquated look that no longer reflected Autorama’s cutting-edge approach. It needed a fresh visual style aligned with the company’s current branding (which had evolved through the Vanarama consumer site).
Poor Navigation & Information Architecture: Content was scattered and not organised intuitively. Users (whether potential investors or job seekers) found it difficult to locate relevant information. Important sections like press releases, leadership bios, and career opportunities were not easily accessible.
Lack of Mobile Support: The previous site was not fully responsive. On smartphones and tablets it delivered a subpar experience – a serious drawback given the increasing number of mobile visitors.
Content Management Limitations: Updating content on the old site was cumbersome, leading to stale information. The company needed a more flexible solution so that non-technical staff could keep the site up-to-date (for example, posting news or job listings promptly).
Timeline and Coordination: We had a fixed deadline aligned with external events, and we needed to coordinate between multiple departments. Ensuring everyone – from executives to developers – was on the same page added pressure to get decisions right quickly.
We quickly realised that a successful redesign meant addressing underlying structural issues, not just giving the site a new coat of paint.
Despite these challenges, I saw them as opportunities to significantly improve the site’s UX. We approached the project methodically, ensuring that each problem had a clear solution in our design plan.
Design Approach and UX/UI Decisions
Research and Planning
We began with a discovery phase to gather requirements and understand user needs. I conducted stakeholder interviews and reviewed analytics from the existing site. This helped identify what content was most sought after and which areas were causing user frustration. For example, analytics showed many visitors were looking for career information and company news, but high bounce rates on those pages indicated they weren’t finding what they needed easily.
To address the structural issues, I worked on an improved information architecture (IA). We defined clear sections for each of the site’s key audiences:
An About Us section detailing Autorama’s mission, history, and leadership team.
A News/Press section for press releases, media coverage, and industry news featuring the company.
A Careers section highlighting company culture, benefits, and open positions, aimed at attracting talent.
An Investors/Partners section providing corporate information, such as key metrics or partnership opportunities.
A Contact page with easy options for enquiries.
This reorganisation was visualised in a new sitemap, which I validated with stakeholders to ensure it met all needs.
UX Design and Wireframing
With the structure in place, we moved on to UX design. I sketched wireframes for critical pages, focusing on simplifying navigation and highlighting important content. A top priority was a clean, intuitive menu system. I proposed a persistent header with a clear navigation bar, including drop-down menus for multi-level content where needed. For mobile, we planned an easy-to-use hamburger menu that mirrored the structure of the desktop site, ensuring consistency.
The homepage wireframe, in particular, was designed to immediately communicate who Autorama is and direct different user groups to the relevant sections. It featured a brief introduction to the company, along with prominent links to the News and Careers sections (since those were high-interest areas). We also included a dynamic banner or hero section for highlighting the latest news or achievements – something the old site lacked.
During this phase, I paid special attention to UX best practices:
Consistency: Ensuring elements like buttons, forms, and navigation behaved uniformly across the site. This was critical for establishing user trust and making the experience seamless.
Accessibility: We followed Web Content Accessibility Guidelines (WCAG) to make the site usable for people with disabilities. For instance, we chose high-contrast colour schemes for text vs. background and ensured that all interactive elements (like links and buttons) could be used with screen readers and keyboard navigation.
Mobile-First Design: Anticipating that a significant portion of traffic would be on mobile, the wireframes were created with a mobile-first mindset. This means we designed layouts for small screens first and then scaled them up for desktop, which helped prioritise essential content and actions.
Visual Design and UI Decisions
Once the wireframes and UX were vetted by key stakeholders (with a few rounds of feedback and iteration), we proceeded to the visual design. The aim was to give the Autorama corporate site a modern, professional look that still felt related to the consumer-facing Vanarama brand, without simply copying it.
I updated the colour palette to align with Autorama’s brand guidelines – incorporating the signature colours (such as Vanarama’s distinctive orange) in a more subtle, corporate tone where appropriate. The typography was modernised, choosing clean, legible fonts that convey professionalism. I also introduced a design system of reusable UI components, following an atomic design approach (breaking down the UI into basic components like buttons, cards, etc., which could be reused throughout the site for consistency).
For imagery and graphics, we decided to use real photography of company events, offices, and team members to give the site an authentic feel. This was a deliberate shift from the old site, which mostly used stock photos. We arranged a photoshoot to gather high-quality images of the team and workplace, which significantly improved the site’s appeal and credibility.
Interactive elements were also carefully considered. For instance, I designed an interactive timeline on the About Us page to illustrate Autorama’s journey and milestones. This provided an engaging way for users to learn about the company’s history. Similarly, the News section was designed with a card-based layout for articles, enabling visitors to quickly scan headlines and click through to read more.
Development and Implementation
With the designs approved, we moved into development. I worked closely with the web development team to ensure that the transition from design to code was smooth. As a Lead Design Engineer, I was involved in front-end development decisions and helped bridge the gap between design intent and technical implementation.
We chose a modern, user-friendly content management system (CMS) to build the site (ultimately selecting WordPress for its flexibility and familiarity to the content team). Implementing the design in WordPress required creating custom templates and styles to match our design system. I provided detailed style guides and CSS snippets to the developers, and in some cases, I directly contributed code for complex responsive behaviours – for example, the custom navigation menu and the interactive timeline.
During development, we continuously tested the site on different devices and browsers, ensuring the responsive design worked flawlessly. We also paid attention to performance: images were optimised for web, and unnecessary scripts were eliminated to make sure the site loaded quickly. This was critical because even a well-designed site can frustrate users if it’s slow.
Content migration was another important aspect. The content team rewrote and updated text for each section to match the new structure and tone, and I coordinated with them to place content into the pages appropriately. We set up training for the internal team on using the new CMS, empowering them to easily add news articles or job postings without needing technical assistance.
One technical challenge we faced was integrating the corporate site with some dynamic data from the main Vanarama platform – for instance, automatically displaying the latest customer satisfaction ratings or award badges that the company won. We solved this by using API endpoints provided by the Vanarama platform, pulling in the data to display on the corporate site in real-time. Making sure this worked securely and reliably was a collaborative effort between our team and the main platform’s developers.
Throughout implementation, there was a tight feedback loop: I would review each page as it was built and compare it against the design mock-ups, ensuring pixel-perfect fidelity where possible. If any deviation was necessary due to technical constraints, I worked on-the-fly to adjust the design so the end result remained consistent and high-quality.
Outcome and Results
We successfully launched the new Autorama corporate website on schedule, just in time for the targeted industry event. The difference from the old site was night and day. The new website was modern, easy to navigate, and rich in relevant content. It provided a far better first impression of the company.
Early results were very positive. In the weeks following launch, we observed improved engagement metrics:
The overall bounce rate dropped significantly (indicating that fewer people were leaving immediately; they were finding content worth exploring).
Time on site increased, suggesting that visitors were engaging with multiple pages, especially the News and Careers sections.
On mobile devices, performance metrics showed a smooth experience, and feedback from users indicated they appreciated the mobile-friendly design.
Internal stakeholders also reported that having an easily updateable site was a “game changer” – the communications team was able to publish press releases and company updates much faster than before.
Qualitatively, the feedback from both inside and outside the company was encouraging. Company leadership was proud to showcase the website to investors and partners. One executive noted that the new site “finally tells our story the way it should be told.” Prospective hires mentioned that the Careers page gave them a better sense of the company’s culture, which helped in recruitment conversations.
From a UX perspective, we managed to address all the initial challenges. The site is now visually appealing and reflective of Autorama’s brand. Navigation is straightforward, allowing users to quickly find key information. The responsive design ensures everyone gets a first-class experience on any device. Meanwhile, the content management process is smooth for the team behind the scenes.
Conclusion
This project was a rewarding experience in how thoughtful design and engineering can transform a digital presence. As the Lead Design Engineer, I learned that successful UX/UI design is as much about communication and collaboration as it is about creativity.
We didn’t just create a prettier website – we solved real business problems by making information accessible and engaging to the people who need it.
One of the biggest takeaways was the importance of planning and structure. By tackling the information architecture early and involving stakeholders throughout, we laid a foundation that guided the visual design and development smoothly. Additionally, balancing aesthetics with performance and accessibility was crucial. It ensured the site wasn’t just beautiful, but also fast and usable for everyone.
