>
About Time is a popular coffee shop in New York City known for its unique and flavourful beverages. Located at Madison Avenue, Times Square, Penn Station, and Gramercy, it offers various drinks that capture NYC’s urban flavors.
Project overview
"about time" is introducing new coffee flavors in a competitive market. To stand out and attract busy New Yorkers, the brand needs to offer a unique and engaging way for customers to customize and experience new flavors through the application.
Problem
How to create a user-friendly system that allows customers to easily explore, customise, and enjoy new coffee flavours while ensuring that the process aligns with the fast-paced lifestyle of New Yorkers.
Solution
To develop a comprehensive and user-friendly system that provides seamless access to "about time" coffee across multiple platforms such as Mobile App, Web H5, In-Store Touch Screens and website, enabling customers to explore, customise, and enjoy new flavours effortlessly.
"…for gearing up with Arc'teryx! We are happy to work with @arcteryxnewyork for a co-branded Pick Up Spot at Arc'teryx Flatiron Store.
About Time Coffee now has over 10 stores & Pick Up Spots in Manhattan!
Download our APP(about time coffee) to find us near you!😊"
Branding definition
User Research
We use a combination of questionnaires and semi-structured interviews to gather detailed demographic data from our users. This data helps us build comprehensive user personas, scenarios, and understand their goals and frustrations. By combining quantitative insights from the questionnaires with qualitative depth from the interviews, we ensure that our personas and scenarios are grounded in real user experiences and accurately reflect the needs, motivations, and pain points of our target audience.
Design System and Style
We created a design system that would not only build the consistency but also save time for the future job. This will improve the overall process and experience for the application.
About Time Coffee - UI Guideline
Colors
Red #F12F2F
Brand color
Black #2C2646
Title & subtitle
Dark Grey #848194
Footnote & text
Light Grey #EAE9F0
Stroke
White #FFFFFF
Background
Font
Title 1
Helvetica Now Display Bold 18pt
Title 2
Helvetica Now Display Regular 18pt
Subtitle 1
Helvetica Now Display Bold 16pt
Subtitle 2
Helvetica Now Display Regular 16pt
Body
Helvetica Now Display Regular 14pt
Caption
Helvetica Now Display Regular 12pt
Buttons
Default
Pay now
50pt
20pt
20pt
View cart
See Details
28pt
12pt
12pt
Press
Pay now
View cart
See Details
2
Icons
28 x 28
24 x 24
16 x 16
Home
Menu
Navigation
Navigation bar/bottom
Home
62pt
Menu
Navigation bar/top
Featured
Featured
Featured
Previous
Coffee
Tea
Muffin
Salad
28pt
Navigation bar/menu
Choose a Store
36pt
18pt
18pt
Cards
Central Park
327 West 42nd Street
0.5 miles from you
Opening
See Details
Card/store
14pt
16rem
Card/menu
Americano
Order
Caffe Mocha
Special
Order
Caffe Mocha
Order
Caffe Mocha
$4.5
Caffe Mocha
$4.5
Card/orders
8oz/Whole Milk/Standard/Standard/Hot
Cafe Mocha
x2
$19.0
01/02/2022 09:00
2 items
Total:
Finished
327 West 42nd Street
$19.0
01/02/2022 09:00
3 items
Total:
Ready for pickup
327 West 42nd Street
8oz/Whole Milk/Standard/Standard/Hot
Cafe Mocha
x2
8oz/Whole Milk/Standard/Standard/Hot
Cafe Mocha
x1
$5.00 voucher
Vaild thru Dec.25th
How to use
Card/Voucher
Tables
Table/product
Ice Latte
8oz
Whole Mik
Regular
Extra Vanilla Syrup
$4.50
$7.00
$1.50
x1
Table/payment
Subtotal:
$45.5
Discount:
-$5.00
Buy one get one free
Table/direction
902 Central Station St.
Directions
Table/popovers
Soy Milk
$0.50
Mocha Syrup
2
Add Card
Popovers
Popover/add-ins
Choose Your Milk
Soy Milk
$0.50
Oat Milk
$0.50
Whole Milk
Skim Milk
$0.50
Coconut Milk
$0.50
Done
18pt
18pt
Choose Your Add-ins
Mocha Syrup
Maple Syrup
1
Vanilla Syrup
Lychee Syrup
1
Coconut Syrup
Done
Popover/payment
Choose Payment Method
Add Card
Apple Pay
Google Pay
Paypal
Venmo
Done
Popover/voucher
My Voucher List
$5.00 voucher
Vaild thru Dec.25th
How to use
$5.00 voucher
Vaild thru Dec.25th
How to use
Done
Tags & illustrations
Tag/state
Opening
Closed
Coming
illustration
Logo/payment
App store
Main product
Thank you for your attention.
