011: Success Metrics
I'm doing a Daily UI Design Challenge: designing a different screen each weekday for 100 days based on the prompt I receive in my email. Knowing very little about what sorts of prompts I'd receive, I decided to try my best to make all of my screens fit within a fictional travel-planning app, Let's Travel.I'm also writing about some of my UX considerations along the way.
I went a little overboard on day eleven's challenge: design an error or success screen. If this were a real app, I don't think I would use such a heavily visual screen for an overlay like this, but for the purposes of this challenge, I wanted to play around with more photography:
I used my payment screen from day two's challenge as the background for the success message. The idea is, once the user enters her payment information and taps "Pay Now", she gets a message letting her know that her order was placed successfully. Then, rather than forcing her to dismiss a merely informational message, the overlay should disappear after a set amount of time and then take her to an appropriate page (perhaps to the home page, or back to the page she was on when she started her order).
In all honesty, this probably isn't how I would design the checkout flow. In addition to not wanting such a busy screen for a message like this, it doesn't really make sense to have the order confirmation be in an overlay. Instead, tapping "Pay Now" should either take the user to a separate order confirmation screen, which allows more space for copy and CTAs, or it could take her back to the home screen, where a toast notification could provide the same confirmation information in a more appropriate medium.
Regardless, this challenge gave me the opportunity to play around with overlays and text placement on images. Plus, I always like being able to use this picture of a small dragon statue that I took in China several years ago. It makes me smile every time I see it.
