DO Hackathon: Phase 2 - The Design

klawrow

Claro A Briones

Posted on December 18, 2020

DO Hackathon: Phase 2 - The Design

Now that I have an idea it’s time to work on the design. I usually start by thinking about the UI and how it will flow. So I fired up Figma and created a rough sketch of the UI. For this project I need something simple, 2 or 3 views and a couple of inputs.

The Workflow

  1. User begins at the landing page:
    • A random image will appear for a set amount of time.
    • They will enter a description of what they saw in an input box.
    • They will then click the Submit button, which navigates them to the results page.
  2. User finishes at the results page:
    • The original image will be displayed.
    • The user’s input describing the image will be displayed.
    • They can then click the Share Results button, which will copy the link to the results page.

The Landing Page

Landing page mockup

The Results Page

Results page mockup

See you on the next post!


Photo by William Iven on Unsplash

💖 💪 🙅 🚩
klawrow
Claro A Briones

Posted on December 18, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related