Prize Page

My role
  • User Flow
  • Wireframe
  • User Testing
  • UI Design
  • Interaction Design
  • Prototype
Tools Used
  • Wireframes ( Adobe XD )
  • User Flow ( Realtime Board )
  • Prototype ( Adobe XD )
  • UI ( Sketch, Photoshop and Illustrator )
The Problem

The task was to do a High Fidelity prototype design of a Microsite, but the problem was that the API could take up to 10 seconds of waiting time for the end user.

Watch the video of the prototype in action!
User Flow
In order to get an understanding of the navigation the user would go through, a user flow was made.Wireframe of the user flow was done so I could test out the navigability and see what key elements were needed.I decided to  use the method mobile first because it is easier to scale up and makes the design clean and functional.
I've started doing the wireframe of the mobile first as it is easier to have a small real estate screen to work with at first.

The first stages of navigability are done at this stage to spot early flaws, saving time when doing the high fidelity design.
Crazy 8's
Crazy eights consists in 8 quick sketches to see where the elements would fit better regarding composition. I wanted to make a clean background, the base I had got a vault door as a reference so the design would bring a feeling of security.