UX Client Project | 3 Weeks | 3 People

The below case study showcases my full UX process. For a summary of the project please click here.

The problems that needed solving from the brief

At the time of this project, elmo were trying to streamline their user flow from someone selecting a car to purchasing a subscription. They wanted some quick-wins to implement for their website launch the following month.

• The current purchase flow asked for too much information upfront with too many steps.

• We needed to explore how best to integrate new features into the flow.

• The pricing wasn’t clear and needed to be addressed as early as possible in the flow for transparency.

I first established user perceptions of elmo’s current website through usability testing to understand the true problems users were facing

The 6 users tests revealed the main frustrations to be too many admin tasks early on in the flow and the lack of upfront pricing and information to make an informed decision, especially for those that knew little about EV to begin with. As usability tests had been conducted previously by elmo, the challenge was for our testers to uncover something new that may have been missed by others. Therefore, I approached it more rigorously by asking detailed questions of specific features e.g. what does “Real World Range” mean to you? Some users struggled to understand terminology used in the automobile industry..

Quotes from the usability test on the browse cars page which showed some confusion:

Survey research provided insight into the important factors for subscribing to a product. Interview data helped dig deeper into motivations and frustrations when subscribing.

Through independent research into the EV market, we gathered that elmo’s audience were likely to be 30+. We conducted 27 surveys and 20 interviews online and on the phone with people within that age range to uncover why they would purchase an EV subscription. By creating an affinity map of the main themes (which is a tool used to organise data), we were able to see trends between all our research findings. The challenge with working in a team with an abundance of interview data, was individual interpretation of that data. Therefore, I ensured all interview notes were typed up in their raw form and discussed, not just summarised on post-it notes.

We consolidated the trends from the research into 3 pillars, with the main quotes from interviewees:

Competitor analysis pinpointed the opportunities elmo could capitalise on and standard conventions within the industry that they were missing

Previous competitor research had already been conducted by the client within the EV field, so I ensured that we focused on indirect competitors too and took a deep dive into the specifics of key pages on competitor sites which hadn’t been addressed in the research provided to us. E.g. the layout and details of the “how it works” section. The opportunities were to show price and customisation earlier and introduce a comparison feature.

A snapshot of the competitors researched:

The creation of a persona, Laura, was generated from an affinity map of key research themes. She represented our ideal user group and acted as a sounding board for designing our flow.

The persona was invaluable for our project as we referred back to it several times during our design studio as the single source of truth when someone’s idea didn’t quite fit the research undertaken. Laura wants to purchase an EV subscription, but doesn’t know enough about them.

The problem statement focused on aligning all different points of view and summarised the true problem from the research findings in order to improve the customer journey

Laura wants to purchase an EV subscription but wants full transparency of the process because she is new to the EV space.

Clear pricing and educating users were paramount.

It was now important to build the overall structure of the customer journey redesign to serve as a foundation to ideate within

I structured the new customer journey drawing upon the key research findings and usability test results. I found this process to be somewhat challenging as I was unsure of just how much pricing information the client wanted to relay upfront - it had to be palatable enough for users to continue on their journey. I decided that the homepage would drip feed the base pricing and the following pages would outline all the pricing on one single page. I removed unnecessary pages and pushed admin tasks towards the final checkout step once the user would be 100% happy with their decision to purchase. I relayed the before and after state of the customer journey to the client in order for us all to follow a shared vision.

Where we are - the customer journey of elmo’s current website

Where we want to be - the new customer journey

The design studio fostered relevant and useful ideas that were incorporated into the new customer journey

After the client approved the new customer journey, I used Miro to facilitate and participate in the design studio, which is a UX workshop that allowed us to explore ideas and create a shared vision to move forward with within 2.5 hours. Our client had never participated in a design studio, so it was a learning curve that we accommodated well for by introducing warm up exercises and getting everyones energy levels up, despite it being virtual!

We uncovered various ideas and routes for the redesign. The “how might we” question served as a framework for our ideation process during the design studio since we all focused on designing for that one question.

How might we be as transparent as possible with all prices and package additions?

Using a dot-voting method, we voted for the ideas that best answered the question and addressed the pain points voiced by our users.

Hang on, there’s a cost involved with these great ideas! We picked the most viable solutions through an impact vs. effort matrix

The client loved a few other ideas (including one of my own!), however they would be expensive to implement. The focus was on quick-wins at this stage. An impact vs. effort matrix helped to pinpoint the ideas we were going to run with — the ones highlighted in dark pink.

Early testing of sketches from the design studio with new users helped us understand if the design conventions were interpreted as intended. We developed new features through more usability testing and iterations.

Features were continuously altered and added during the process of iterating from low to high fidelity, however the main ones are highlighted in the rest of this case study.

The comparison feature on the browse cars page was a totally new feature which none of the researched competitors had, the usability tests 100% supported, and I was very excited to implement. When developing it, I had to ensure I could make it scalable when more cars were added. I focused on a table of numbers which could be updated more easily with existing data than paragraphs of text with comparisons within them. In the case of the latter, someone would have to manually add all permutations in the backend which wouldn’t be feasible. The challenge was ensuring all the information was digestible and informative at a quick glance.

A category section was also added to the browse cars page, as 6/8 users showed confusion when landing on this page about which car to pick. Although the filters were helpful, they wanted easier guidance when taking a quick glance. Now they could choose from sections which best suited their lifestyle.

The final prototype was able to provide a potential overall solution to what the flow would look like when using a user centred approach

We maintained elmo’s branding within the high fidelity prototype, but improved the accessibility by replacing white with black on pink for those with visual impairments

The guide below showcases the design elements used throughout the redesigned site pages.

Pushing the project beyond the brief requirements by redesigning the homepage was vital for improving the overall user experience to purchase an EV

Although the purchase flow was our primary focus, we added useful features to the homepage that would aid the user in purchasing an EV The below added features addressed pain points which were brought up in the usability tests.

Measuring the potential impact of the redesign

The key business metric which I would measure for this project would be the conversion rate between each stage of the core user flow funnel over a 6 month period, which ultimately translates into sales. Using heat maps and Google Analytics data, I would be able to identify the sections of the website where users spend the most amount of time. I would then conduct interviews to investigate users’ pain points if the conversion rate was dropping at a specific point due to uncertainty or other factors.

Next steps

Considering this was a 3 week sprint, we only implemented a handful of quick but important changes that the client could handoff to his developers. With more time, I would introduce a more interactive customisation feature, build out the reward benefits and referral system by including discounts from elmo’s partners, and introduce a functionality for companies to lease cars to their employees.

Conclusion

The end result answered the brief through a user-centred approach to dig deeper into the true problems at hand. For example, there were no specific details in the brief about new features, but from analysing interview data and spotting trends we were able to create solutions that helped users make a more informed journey to purchase an EV.

The client made it clear that he was more interested in optimising the user flow of their website rather than user’s views on subscriptions, however, the research and usability tests were crucial in informing the design. The end result was a prototype which solved the problems at hand, and a very happy client!