eBay - Dealer Checkout

"Heather is looking for a new car and she really likes the Tesla brand, especially that Elon guy. As she is browsing around on eBay, she keeps going back to a silver Tesla Model S. She does some quick calculations, and decides she is going to make the purchase!

Fortunately for Heather, eBay and Tesla recently formed a partnership and she is going to be able to purchase the vehicle with ease. She will be able to reserve the item on eBay, then purchase the Model S from Tesla directly. Heather is excited to finally have a brand new car directly from the dealership!"

Heather is going to be looking good in her new ride.

The problem we wanted to solve was to create a seemless experience between eBay and our third party vendors.

The first thing I do is to sit down with the product manager and have a conversation regarding the business requirements. Here is where we start to define the idea and whiteboard the key objectives.

During our discussion, the main requirements were:

Whiteboards can get messy. These are some of the cleaner ones.

The first draft of wireframes are simple and low-fi, with minimal usage of color. This visually communicates the concepts vet on the whiteboard, bringing the idea into a actionable form. I like to meet frequently with the team, including developers, for a quick review so we can identify any issues early on.

I will iterate on the wireframes based on feedback, again insuring our team is aligned and comfortable with the design direction.

Low-Fi wireframes drafted in Sketch for communication to the team.

After we have vet the user journey with the assistance of the wireframes and we have sign off from the PM, it's time to focus on UI design. At eBay we have a design system called DS6, which is currently being rolled out. Referncing our exitsting patters and DS6 specifications, I create mock-ups for design review.

Time to switch hats, and focus on UI design.

Now that the final designs have successfully gone through design review, I will create a prototype with the mock-ups. The mock-ups will be exported to Zeplin for the developers to get the design specifications. The prototype can be used for stakeholder communication, and if we're lucky, user testing.

InVision is a wonderful tool that can create click through prototypes for user testing and business communications.

InVision is not the only option for prototyping. I am adept at web development and HTML may come in handy for fully functional prototyping.

HTML / CSS / JavaScript does take some time, but I feel it is worth the effort to produce an acurate prototype that can supercede the limitations of InVision.