Product Design, Motion Design, Illustration
Expensify Design Challenge Submission
Challenge Overview
Design a simple app that tells you what to wear when you wake up based on the day's forecast.
Introducing: What to Wear
Picking a Temperature Range
I wanted to make the temperature selection intuitive.
I started off this section by identifying temperature zones and gave them colors based on whether they were commonly associated with 'hot' or 'cold'.
I also tagged some clothes corresponding to the colors just to visualise the process better in my own head.
This way, the gradient appears to the user as they select the range, allowing them intuitively know whats hot and what' cold.
Picking a Temperature Range
I wanted to make the temperature selection intuitive.
I started off this section by identifying temperature zones and gave them colors based on whether they were commonly associated with 'hot' or 'cold'.
I also tagged some clothes corresponding to the colors just to visualise the process better in my own head.
This way, the gradient appears to the user as they select the range, allowing them intuitively know whats hot and what' cold.
Setting Alert
Once the alert has been set, I wanted to show a success screen, and then a reveal screen where the user's previous selection is revealed to them along with their message and range.
Picking a Second Temperature
One of the challenges was how to have the user select another temperature and avoiding overlap.
For that, I thought of a system where if the user does select an overlapping temperature, momentarily, three things happen:
An error message appears at the top
The slider and the selected number next to it lose their 'selected' color and nature, and get a dashed line around them.
The main CTA button becomes disabled
The slider also snaps back to the closest available temperature to make it very clear to the user what temperatures are available and what aren't available.
Picking a Second Temperature
One of the challenges was how to have the user select another temperature and avoiding overlap.
For that, I thought of a system where if the user does select an overlapping temperature, momentarily, three things happen:
An error message appears at the top
The slider and the selected number next to it lose their 'selected' color and nature, and get a dashed line around them.
The main CTA button becomes disabled
The slider also snaps back to the closest available temperature to make it very clear to the user what temperatures are available and what aren't available.