UX Challenges

Wireframe

Wireframe Back Wireframe

Scenario

You were hired as a freelance UX designer by a company making a new mobile maps app (competitors are Google Maps, Waze, and Apple Maps).

They would like you to start sketching out general concepts for this app. They want to look into things like page layouts and get some rough ideas to start showing stakeholders and potential users.

Task

Create three wireframes for this maps app showing: (1) the homepage (what users land on when they open up the app on their phones), (2) what searching for a new location looks like, and (3) the interface for giving the user real-time driving directions. Annotate your wireframe: point out specific pieces of it to give the thinking behind what you've made.

Extra Credit: Create 2 more wireframes showing (1) a detailed view of a specific location, and (2) what saving a location to a favorites list looks like.

Tutorials

If you need help with this challenge, check out our hand-picked tutorial recommendations.

How To Succeed In Wireframe Design

smashingmagazine.com

Common Wireframing Issues to Avoid

xd.adobe.com

15 Tips for Creating Efficient Wireframes

slickplan.com

How To Create Your First Wireframe

youtube.com

Tools

Not sure which tools to use? Try one of these.

Figma

figma.com

Pen and Paper

sneakpeekit.com

Miro

miro.com

Share Your Results

When you finish the challenge, post your work on Twitter! Be sure to use the hashtag #uxtoolschallenges and tag our account @uxtoolsco. We'll keep an eye out and repost good examples on a regular basis.

We're also building a new community for designers where you'll be able to get even more feedback. See more details.

More Challenges

Digital Prototype
Info Architecture
Heuristic Evaluation

 All Challenges

Download hi-res versions of the cards

Join 70k+ newsletter subscribers and get a PDF download of all the cards. You'll also stay up to date with weekly lessons and news.

    Email newsletter signup