"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!"
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:
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.
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.
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 not the only option for prototyping. I am adept at web development and HTML may come in handy for fully functional prototyping.
Here you can check out the InVision Prototype.