Add Product Services

Order point-of-sale devices online

B2B Web design, E-commerce, FinTech

Case Study

Project Overview
The Problem:
Elavon's customers can only order point-of-sale (POS) devices by calling a sales representative - an outdated process in a fast paced, self-serve world. To stay competitive, Elavon needs a way for customers to order devices without speaking to a sales representative.

The Solution:
Design a scalable e-commerce experience starting with 2 devices, the Moby/5500 and talech Terminal. Lay the groundwork for a product-agnostic marketplace for Elavon’s suite of hardware, software, and services.

The Results:
This is a net-new experience and has not yet been released to production.
My Contributions
My Role:
  • Drove full end-to-end UX process under tight timelines and shifting requirements
  • Defined initial flows to kickstart clarity while requirements were still vague
  • Partnered closely with PM
  • Collaborated with engineers to ensure technical feasibility
  • Performed competitor analysis, designed wireframes, mid-fidelity, and high fidelity mockups
  • Conducted research, synthesis, & design iteration
Product screenshots
Reimagined sales-led ordering into a flexible self-service experience tailored to SMBs.

Tested non-standard purchase flows (selection in cart vs. product page) to align with user expectations and business needs.

Balanced complex technical constraints with UX best practices (e.x., product bundling logic, max limits, error recovery).

Influenced design and development timelines by advocating for a 2-week sprint, enabling rapid iterations before development.

Highlights

Users and their journey

Users

Existing Elavon SMB customers who:

Insight:
This project was about more than UI work, it focused on digitizing and simplifying a sales experience for users with varying levels of tech comfort.

Journey & tasks

Building on research-based personas, I mapped the user journey and tasks needed to order a POS device.

Image describing user's journey through the product.
Journey map
Task: Navigate to marketplace
Task: Add to cart

Designing while defining

Initially, requirements for this project were unclear (e.x., branding, payment methods, number of products). I designed exploratory screens to start conversations and surface open questions and gaps.

Impact:
These early designs helped uncover user and business needs, such as gaps in the purchase flow and unclear pricing, which accelerated cross-functional alignment and drove requirement clarity.

Initial entry-point wireframes

Is it usable?

After refining the requirements, I created a Figma prototype, developed a usability testing plan, and conducted an unmoderated usability test via UserZoom.

Methodology

Participants: 
16 SMB customers

Key Measurements:
Task success and qualitative feedback

Research Objectives: 

Success Criteria:

Results

Wins

Pain points

Proposed designs

I refined the designs based on usability testing and team critiques, then partnered with developers to annotate key details for smooth, accurate implementation.

Note: See links for Figma prototypes.

Final entry-point

New requirements surface

After finalizing the UX for the talech Terminal flow, new business requirements required a full redesign.

New requirements: 

  • Product is a hardware & software bundle
  • Users need to select from 2 connection types (with different pricing)
  • Can mix & match connection types
  • Maximum of 5 devices per order

Simplifying a complex choice

Where should users select connection type and quantity without overwhelming them?

I evaluated the product page and landing page but found both would become too complex with added inputs.

Product page selections box
Landing page hero banner

Competitor review

I reviewed Toast, Stripe, Square, Home Depot, and Nordstrom. While none had the exact same challenge, I pulled inspiration from how they handled price clarity, order summaries, and product descriptions.

Iterating through user testing

Initially, I explored multiple UI directions and created prototypes with annotations explaining trade-offs.

Initial explorations prototype
Initial exploration of the product page

Usability testing

From those initial explorations, 2 options were the most viable - make all selections on 1 page, push selections to the cart page.

I ran an unmoderated usability test (15 participants via UserZoom) to determine which design resonated with users.

Results: 
Option 2 was clearest, with 93% of users rating it “very clear”. However, Option 1 also had high clarity (60%).

Option 1

Option 1: Make all selections on 1 page.

Question: Is it clear that the user can mix and match connection types?

Option 1 prototype
Option 2

Option 2: Make all selections in the cart page.

Question: Is it too jarring for the user to land directly in the cart? 

Option 2 prototype

Fine-tuning the new design

I moved forward with Option 2, but a new challenge arose: enforcing the 5-device limit.

I designed 2 approaches:

Warning message
Dynamic selectors

I chose error messages based on team feedback that the dynamic selectors would be good for preventing errors but would make errors difficult to recover from. Additionally, we were under time constraints and the dynamic selectors would have taken significantly more time to develop.

Fine-tuning selections prototype

Requirements shift - again

Due to complexities configuring the connection types on the backend, we were made aware that we needed to change the design again.

New requirements:

Final proposed design

Based on these new requirements and very limited amount of development time, I removed the cart page from the flow entirely. This streamlined the flow and allowed for quick implementation.

Final design prototype

Final proposed design

What's next & reflection

What's Next

After the MVP release, the plan is to begin discovery to help inform how to position software offers in the marketplace in a way that customers will understand.

Reflection

This was a project with a quick turnaround time and was the first project I worked on at Elavon, so there was a steep learning curve.

Various constraints proved to be a good opportunity to solve some complicated problems. The team also lost our Product Manager in the middle of the project, so it was a great opportunity to heavily collaborate with the Product Owner and Software Developers to make sure we were building what we should when we should.

With the new requirements I advocated for a 2 week design sprint before the developers started on the implementation, so I had to iterate and test very quickly. To help avoid last minute changes in requirements, our team learned that we need to more proactively communicate what we’re planning to implement with the backend team we have dependencies on.

Want to work together?

If you like what you see and want to work together, get in touch!