Anthony Welchdesign Portfolio

& insider's guide

see my work

Borgis Bikes

UI Design Speed Challenge

UI Design
Figma

Challenge

Given thirty minutes, a text file with copy/specs, and a singular product image, I was tasked with creating a product detail screen.

project intro

Recently, I took a UI Speed Design challenge.
Here were the rules:
  1. CREATE a new Photoshop, Figma, XD or Sketch file. Work at 1125px x 2436px @ 72 ppi // iPhone X size.
  2. DOWNLOAD this content: bike-app-content.zip
  3. DESIGN the app screen creating a modern and clean look. Typefaces, color and any other visual elements are up to you. You must include all of the content within the viewable area of the app. Feel free to scale up the image if you need to, to demonstrate your idea.
  4. LIMIT YOURSELF TO 30 MINUTES. Submit your JPEG by clicking the blue title above.
The challenge was educational and fun! I'll do more in the future. See how I did below.

Deliverables:

One screen showing:
Navigation, Two Photos, Product Name, Product Price, Product Description, Product Rating, Call To Action

STYLE & INSPIRATION

The contents of bike-app-content.zip are shown below - some copy/specs and a singular image of a bike. I opted to work in Figma.

18 minute mark

To keep the design modern, I opted for bold colors in clean blocks with plenty of space. A sans-serif (Inter) felt most appropriate to the mood. Yellow is positive and bright. I used an off black, a very light yellow, and a bold yellow. I felt these fit the mood of riding a bicycle well.

28 minute mark

In the next 10 minutes, I added a hamburger menu, and a navbar with icons - things that I felt the screen would realistically need but that the brief didn't include.

35 minute mark

Pleased with the start I had in the allotted thirty minutes, I returned my attention to my brief, adding in the required navigational elements.
After completing this phase, I noticed a mistake I've been prone to recently. I established a set of guides for my navigation elements that sit outside from the rest of the UI. In web design, this makes sense. In UI design, the much smaller screen size results in the minute difference making the screen look unintentional.
Finally, I nudged the logo further still to try to fit the screen's safe zone.

final solution

I had so much fun with this project that I decided to go through and clean the screen up, spending in total around 45 minutes.
I'll definitely be doing more of these challenges as I seek to improve my time-to-creativity and my general speed producing viable designs.

see more work

Dressure - App UX/UI Design

See All Projects

Anthony Welch - Portfolio & Insider's Guide

LinkedIn
About
Email