Introducing: What to Wear®
Welcome, Pablo Stanley. Kindly check out this video. ;)
Dynamic Weather System
The landing screen of the app has a dynamic weather system that shows what the current weather is to the user along with some subtle and not-so-subtle animations.
Disclaimer: They animations are playing on loop on this webpage, but on the actual app, they wouldnt be on a loop this fast. Too much motion can be dizzying.
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'.
Which then turned into this:
This way, the gradient appears to the user as they select the range, allowing them to intuitively know what's hot and what's cold.
Finalising Alert
After you choose the range, the gradient color from the thermometer is taken into this screen's range selection, and you can edit it by tapping on the field
I split Alert Title and Alert Details because this gives the user more control on how their alert is formulated. If it was a single line, the user would have no control over how the alert appears to them.
Setting an 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 the previously selected ranges become a blockage in the thermometer.
And when 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.
I wanted it to have a layered feel
It's quite subtle, but there's an inner shadow to the temperature bar, and the previous selection casts a shadow of it's own on it. Making it look lower than the rest of the interface.
This makes the temperature selection quite a lot more intuitive because the shadow gives the unselectable part a raised and separate feeling, this subconsciously makes it clear to the user that this part is unselectable.
Maybe it's the Material Design installed in my mind, but I always think of my UI as if it's made of actual materials, and that is why the shadows and lighting of my interfaces is very important to me.
Here's an early sketch as well as the final design.
Edit Temperature Ranges
Once you see your selected temperatures on the temperature spectrum, you can tap on them to edit them.
Tapping gives you two options, to edit the range (which takes you to back to the first screen), or to edit the details (which takes you to the second screen).
Alert Screen
This is part of the reason why I kept alert title and alert details separate in the earlier screen.
This results in the alert being displayed in exactly the way the user intended.
Notification Screen
Kept this quite minimal and to the point. Nobody wants a notification that's a drag.
Here, you also get a look at the app's icon.
Mursalleen, 2023
Islamabad