List view:
Here’s the design: https://www.figma.com/file/36WXpmHKzYRYwNdgDhvfjU/We-Meditate-Main?node-id=1242-23518&t=C90ND2eCKmOp58hL-4
We added a label for online classes, blue color could be associated with online (think “link”), and the blue we used works nicely with the turquoise we use elsewhere.
In case there’s a label, we only show the starting time in “7pm” format, as it saves a lot of space, and user can find out how long the class is by tapping it.
Map view:
Design: https://www.figma.com/file/36WXpmHKzYRYwNdgDhvfjU/We-Meditate-Main?node-id=1242-23623&t=C90ND2eCKmOp58hL-4
Having only one button at the bottom is much more minimal and clear. The inspiration for online classes label comes from Google Maps - they also have various labels under the search box.
Clicking the label takes the user to a list view, sorted by online meditations only.
Please round the search box, make the bottom button uppercase and apply all other text styles for the button and the label.
Ardnived
commented
10 months ago
List view: Here’s the design: https://www.figma.com/file/36WXpmHKzYRYwNdgDhvfjU/We-Meditate-Main?node-id=1242-23518&t=C90ND2eCKmOp58hL-4 We added a label for online classes, blue color could be associated with online (think “link”), and the blue we used works nicely with the turquoise we use elsewhere. In case there’s a label, we only show the starting time in “7pm” format, as it saves a lot of space, and user can find out how long the class is by tapping it.
Map view: Design: https://www.figma.com/file/36WXpmHKzYRYwNdgDhvfjU/We-Meditate-Main?node-id=1242-23623&t=C90ND2eCKmOp58hL-4 Having only one button at the bottom is much more minimal and clear. The inspiration for online classes label comes from Google Maps - they also have various labels under the search box. Clicking the label takes the user to a list view, sorted by online meditations only. Please round the search box, make the bottom button uppercase and apply all other text styles for the button and the label.
No classes in your area: Design: https://www.figma.com/file/36WXpmHKzYRYwNdgDhvfjU/We-Meditate-Main?node-id=0-9012&t=C90ND2eCKmOp58hL-4
Inactive class prompt: Design: https://www.figma.com/file/36WXpmHKzYRYwNdgDhvfjU/We-Meditate-Main?node-id=1254-23553&t=C90ND2eCKmOp58hL-4
Also, please note, text styles for “Show list” and “Back to map” buttons have changed