Client
My Role
Platform
In the face of increasing environmental concerns and the need for sustainable transportation solutions, individuals often encounter challenges in accessing comprehensive information, resources, and support for transitioning to electric vehicles. Existing platforms lack a centralised hub that offers diverse electric vehicle options, educational resources, financing assistance, and community engagement, leading to confusion, inefficiency, and hesitation among potential buyers. This fragmented landscape impedes the widespread adoption of electric vehicles, hindering progress towards a greener and more sustainable future.
User Research: Extensive interviews and surveys were conducted with participants across various demographics. Focus groups were synthesised to determine user expectations when searching for an EV online. Concerns for EV upkeep and barriers to entry were also scrutinised using primary and secondary research.
Market Analysis: A thorough examination of existing automotive ecommerce experiences led to insights relating to friction points in conventional user flows, including the vast number of clicks and data required to sell a vehicle. Filtering for vehicles was deemed inefficient and comparative tools did not always provide the most relevant data to compare with. Competitor analysis provided us ideas on how to consolidate journeys and make them more user-centric.
Persona Development: 4 personas were subsequently ideated: The Explorer, The Buyer, The Learner and The Writer. These covered the 4 bases of intent when navigating our proposed platform - to discover what the platform provides, to use the platform to buy, sell and exchange goods & services, to learn more about the EV landscape and its impact, & to create content using the platform as a repository for information & the latest news.
User Journey Mapping: We proceeded to inform our product strategy by user journey mapping, highlighting all possible touchpoints, pain areas and opportunities for improvement in the user experience. Simultaneous empathy mapping ensured that we considered where best to improve communication.
As part of our UX Design phase, we conducted a card sorting exercise, with the intent of grouping products, services and content buckets. The conclusions from this exercise directly fed into the design of the Information Architecture.
We prepared a sitemap (FigJam + Miro) and corresponding information architecture (Excel), detailing the nomenclature, fields, field types and how CTAs and links tied all the pages together. The IA was tested for usability using the Tree Testing tool provided by Optimal Workshop.
We started off by putting pen to paper before creating mid and high fidelity prototypes on Figma, conducting an interview with a future EV vendor along the way in order to consider their opinions on how best to represent their products on the platform.
At the UI stage we merged the results from our UX design, content, information architecture and visual elements from the creative team to create Visual mockups on Adobe XD that were very similar structurally to the wireframes but incorporated colour palettes and typefaces that were defined by the design system delivery.
Before handover to the front-end team, we ensured that the designs were inclusive and adhered to WCAG 2.1 i.e. every screen was perceivable, operable, understandable and robust, by way of tools such as Contrast Checker.
As this was a desktop-first experience, we ensured at this stage that the platform was adaptive and responsive to mobile and tablet resolutions. Quality Assurance was instrumental in correcting discrepancies between mobile and desktop versions - both pre and post development.
Before wireframing, we created hand-drawn mock-ups for every proposed screen and critical component. Crazy 8's was a preliminary exercise where we drew 8 concepts in 8 minutes, which validated our proposed visual hierarchy and gave us options for layouts. We then created low-fidelity prototypes, which served as the blueprints for our wireframes.
At the time of wireframing there were 2 proposed UX strategies for the careers page; leaving job details inside an accordion (as indicated in one of the mid-fidelity wireframes above) and taking users to a separate page.
As both approaches were found in our references, it was deemed appropriate to conduct A/B testing on a forthcoming internship programme. This would determine which option results in a better conversion rate, with the KPI being the number of submitted applications.
QA and QC were monitored and updated on a timely basis via a collaborative spreadsheet, involving all teams responsible for deliveries. There was a frequent back and forth, but we identified repeated mistakes where possible and mitigated them in the future by addressing them clearly during handovers.
Once our final visual mockups had our clients' seal of approval, we were responsible for handing over the project files to our front-end developers. As the delivery was Agile, the screens were handed over as soon as they were approved, and we worked with the devs to ensure that each screen was appropriately adaptive and responsive as per our designs.
It came to light that Magento (our back-end platform) did not support some micro-interactions and features such as parallax and smooth scrolling (which was not identified when we originally aligned constraints with the back-end team), so as part of our iterative design process, we addressed these roadblocks by swiftly redesigning where appropriate.
With the interim launch in March 2024, we are currently working on the Agile delivery of phases 1 and 2 over the course of the next year, factoring in usability data from our existing traffic.
This project was a fantastic learning process for me. In terms of my workflow, I learned how to multitask with more intent and organisation, having been a part of several deliveries at the same time. Taking a project from its very initial stages through to a final delivery was gratifying, and I enjoyed working on elements such as marketing and visual design that were typically outside of my scope. I got better at communicating within a multi-disciplinary team, and with the development of over 200 screens, I gained the experience of leading a sub-team of UX designers in an Agile system.
Having an open canvas at the start of the project was liberating, but challenging to ideate for in the early stages - it was resolved by building up a repository of research and referencing from which we could use as the foundation of our UX activities. Persona ideation was critical because of the complex nature of our user base (connecting B2B and B2C flows on the same platform) and something we took significant effort to get right. All in all, this was my first major foray into the ecommerce world, and I feel a lot more capable now about tackling a similar project in the future.
Here is a promotional corporate video for the interim launch for which I created the soundtrack and designed the storyboard for!
