Jihane Mazid

Beanfield Online Ordering

Beanfield’s

Checkout Process

Context: In 2023, the business focus shifted to increasing the number of residential sales. This prompted a full redesign of the website including the ordering process.

Role: Lead UX Designer (Research, Wireframing, Prototyping, High-Fidelity Mockups and Usability Testing)

Timeline: 3 months

"The order process encompasses the entire journey from when a user searches
their address to see if they can get Beanfield service, to the moment they finalize
and place their order." –Chat GPT

Our primary goals were:

  1. Increase the number of monthly online orders by at least 15%

  2. Ensure WCAG 2.0 compliance

  3. Update the UI with the new brand guidelines developed by Marketing

  4. Improve Usability

Screenshot of previous order process. Where we started.

The Design Process

1. Discover

The first step was to understand the existing workflow and identify its issues. We discovered several critical problems that needed immediate attention:

  • Outdated Process: The established design was outdated and described by users as confusing.

  • Usability Issues: Numerous usability issues were present. The 10 usability heuristics were not being properly followed.

  • User Drop-Off: Data showed a significant drop-off in users after adding services but before scheduling installation. We hypothesized that users were using the order process primarily to check prices rather than commit to a purchase.

  • Lack of Accessibility Compliance

  • Non-Responsive Design: Despite most users accessing the website via mobile devices, the online order process was not responsive.

2. Define

I started by creating an As-Is process diagram to visualize the existing workflow.

After working closely with stakeholders, I created the To-Be process diagram

Based on the insights discovered before, I pinpointed several opportunity areas. By creating an As-Is and To-Be process diagrams I was able to identify key changes that would enhance the user experience:

  1. Improve the entry point with an ever-present button on the navigation bar with a clear CTA

  2. Showing available services like a menu, in one page, to make it easier for users to see all our offerings and select what they want.

  3. Clearly label each step stop users have a better idea of where they are in the process

  4. Ensure accessibility by updating colours, ensuring keyboard navigation and screen reader

  5. Add alternate workflows and options for buildings who are not yet on our network

    Additionally, based on business goals, we decided to try out two new steps:

  6. Email verification

  7. The ability to set up autopay (optional)

I was concerned about adding more steps to the process, based on the assumption that the less clicks the better, but decided to keep my concerns aside and let user testing speak for itself.


3. Develop

After sketching out some ideas, I created wireframes that seemed to solve every problem. I decided to create a prototype to present and discuss with stakeholders to gather feedback.

 

Low Fidelity Prototype presented to stakeholders.

 

After gathering stakeholder feedback and getting the green light to user testing, I went ahead and created a high-fidelity prototype, came up with the testing scenario and made sure to include some validation errors as well to make sure we were covering the most common, likely scenarios.

Given time and budget constraints I had to test with internal staff. I decided to test with a mixed group of 4 employees from different departments: Billing, Sales, Customer Experience, and Cancellation. This was a strategic decision as they would all have valuable feedback based on their expertise and contact with customers. Neither of them was a Beanfield customer.

 

High Fidelity Prototype used for usability testing.

 

Feedback from usability testing:

The feedback was overwhelmingly good. Most users found the new workflow clear, straightforward and easy to use.

Challenging my original assumption, 0% of the users cared about the additional email verification step, claiming it was part of most online sign-up processes nowadays and therefore part of their mental model so it didn’t generate friction.

However, 100% of users disliked the Autopay feature. Even though it was optional, they felt they didn’t trust a company asking for credit card information before they had delivered a service, so we had to remove it from the order process and leave it for post-installation.

Other feedback included small copy changes.

4. Deliver

After updating the mockups, I collaborated closely with developers to ensure the build met specifications. I also created mobile-sized mockups to show what the expected responsive behaviour should be.

After some final testing in the staging environment, we were ready for launch!

Mobile Mockups

Results

  • In the immediate months post- launch, residential online orders increased by 70% 😳🎉

  • 4 months after launch, residential online orders reached an all-time increase of 150%. Eventually online orders averaged at 60% higher prior redesign.

  • The CEO and other stakeholders expressed continued satisfaction with the workflow a year after it was launched.

More Projects