Daily UI Design #17: Email Receipt

图片发自App

Today's UI design theme is an email receipt, which you typically get after you order something online.

I didn't have much time on it, so I pulled out my phone to search for an email receipt I received before, to see what can be improved. I found a receipt from costco.com, which looks terrible, because it didn't adapt to my phone at all. Just imagine a 5-column table shrunk to try to fit your mobile screen size.

Emails for mobile is still kind of hard, as far as I know, there are not many good techniques to make them nicely adapt both desktop and mobile. Designers really need to use their creativity to unify the experiences as much as possible.

I sketched a bit on paper and thought a 2-column table (maybe 3-column) would look pretty good on a phone. I didn't spend a whole lot of time on thinking and for sure there are better solutions.

图片发自App

I made my quick email receipt wireframe in Balsamiq Mockups, and categorized relevant content together, such as order overview / recipient info / tracking, and order details.

图片发自App