Working with a small team, I led all aspects of design and helped shape and architect the user interface and experience of the service. I conducted a full-range of UX and UI design,including user research through wireframing and prototying, as well as all pixel-pushing design.
Adestinn is a vacation savings plan and hotel booking service. Offered as an employee benefit through large employers, Adestinn matches funds added to the user's account by 50%. The first, early wireframes I created resembled "typical" travel website checkout experiences.
We quickly realized that a service built around gradual saving should emphasize trust and exclusivity, not quick sales. Through research, we found our target market (middle aged mothers) were typically saving up for "next year's vacation" and didn't neccessarily know where they wanted to travel to yet. We needed to sell them on the destinations long before guide them through the booking process.
We heavily tested the site's user flows with real people, identifying their behaviours as they fell off at various steps (again, because users were usually in the ‘dreaming’ stage of booking their next spring break, they often would wait to book later.) We began to analyze user traffic to determine a likely outcome (eg. always viewing beach locations) and suggested those results when they were closer to booking the trip.
During the wireframing of the critical financial details section of ‘checkout’, I created a table and physically printed it out to test an accordion concept where rows would collapse or reveal based on user interaction. This simplified 15 rows into 5 and greatly improved user understanding of a critical page.
Note the colors of the ribbons near the top of the page, we A/B tested red against purple to find which color was more emotionally calming while still saying "you're going to spend this much for a vacation".
I also collected around 50 different 'receipts' while researching the UI for the checkout receipt. This included airline tickets, restaurant bills, health insurance forms, concert tickets, and more; to understand what worked and didn't work in representing monetary data in a simplistic fashion.
Lastly, I did a number of pen and paper data visualization tests. The goal was to show how a user's monthly contributions would grow over time, using an interactive line graph. We decided in the end that the best UI would be incredibly straight forward. The user simply wanted to know if they would or would not have enough money by the time they left for their trip. If not, we calculated how much additionally (say, $4) they would need per month to meet their obligations.
This straight-forward UI tested much better than the pretty and fun line graph. I also tested a pie graph to show the breakdown of the cost of the trip, but this UI overwhelmed the user when they realized how much was needed to pay for taxes and other fees. Often, simpler UI is better.