GOAL
Within a few hours, I challenged myself to design a single flow of a modern-looking app: IceDream. I had already designed one of the desktop pages (below) for this concept when i initially conceived IceDream’s idea. So with the initial style direction in mind i adapted the desktop design to work in iOS. The aim was to mix some modern app style trends together such as rounded cards with cornered buttons, and experiment freely with simple animations.
My initial webpage concept design that eventually inspired my IceDream app design
PROCESS
UX Design, UI Design, Prototyping, Illustration
The process started by deciding on the right amount of artboards to convey a breadth of pages and current design trends in one single flow. I used Adobe XD to start piecing together elements to create a simple checkout flow from the IceDream app starting from it’s simple Splash screen and ending on it’s Checkout Success page.
I used Adobe Illustrator to design a small vector art that is displayed when the user completes his/her’s checkout process successfully, and i used Adobe XD’s Auto-Animate feature to help add a subtle animation to the vector art when arriving into the final page.
I then wired the artboards together in order to properly transition from one page to another simultaneously testing out the animations i had created.
Adobe XD’s Prototyping tab helps me link up the artboards to define their various interactions.
RESULT
The result is a simple high-fidelity prototype of IceDream that you can try out at this link:
https://tinyurl.com/ttoxfol
TOOLS UTILIZED
Adobe XD, Adobe Illustrator.
Photos from Unsplash.com