top of page

Daily UI Challenge: 004

I'm doing a Daily UI Design Challenge: designing a different screen each weekday for 100 days based on the prompt I receive in my email. Knowing very little about what sorts of prompts I'd receive, I decided to try my best to make all of my screens fit within a fictional travel-planning app, Let's Travel.

I'm also writing about some of my UX considerations along the way.

 

This weekend was very full, and some stuff spilled over into Monday, so I didn't quite get around to writing a post yesterday. That just means you're getting two of them today. These posts are actually a couple of days behind my actual challenge progress – today I'm working on day seven but writing about days four and five – and at some point, I might try to catch up, but for now, I'm enjoying the opportunity to look back at my work a day or two later and think about some of the decisions I made and challenges I faced.

When I first read day four's prompt ("design a calculator"), I thought, "Why would my app have a calculator?" In my mind, I pictured this:

MacOS calculator screenshot

That's the macOS calculator. It performs various mathematical operations on numbers. Replicating a calculator like that inside my travel app would have been stupid – every smartphone comes with a perfectly serviceable calculator, or you can download one of a hundred variations.

However, once I thought about it for more than half a second, I remembered that calculators come in many shapes and sizes. In fact, I've designed more than one calculator that looks and functions nothing like the one above.

So, the question became, "What would my app calculate?" which I think is a better question. A couple of options came to mind, including something to help split expenses when traveling as part of a group, but I ultimately decided to design a currency calculator.

I have a currency calculator on my phone. It's not very pretty, and it also has some weird interaction patterns that take time to re-learn each time I use it. I bet there are better options out there, and if this were part of a real project, I would have taken the time to look at the competitive landscape before diving in to design. In the interest of time, I focused on the core calculation and making it as straightforward as possible:

currency calculator screenshot

No bells or whistles (it's possible I'm doing this UI challenge incorrectly). The user inputs a number, selects a starting currency and a conversion currency, and the app spits out a calculation automatically. When the user taps the number input field, she should see the number keyboard, because it doesn't make sense to accept letters as input here. Ideally, the currency selections should have smart defaults, based on the user's location (if she's given the app the appropriate permission), recent or upcoming trips, or user preferences.

There are a lot of currencies in the world. If the user needs to change the default options, she shouldn't have to scroll through a long list to find the one she's looking for. Instead, when she taps the dropdown menu, she can search for the currency she wants:

currency calculator with search dropdown menu

Ultimately, this needs to be quick: my user might be standing in a store trying to make a purchase decision, or in the middle of a booking flow when she wants to double check if a hotel is within her budget. Although there may be other sections within the Let's Travel app where I want to encourage leisurely exploration, currency calculation is not one of them.

Get in, get out, get on with the real adventure.

Featured Posts
Recent Posts
Archive
Search By Tags
No tags yet.
Follow Us
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square
bottom of page