Square Order

March 1, 2016 · 19 details

I’ve admired the design work at Square for years. They have a striking aesthetic which allows their hardware and software to stand out in marvelous ways. Square’s products can now be found almost anywhere – surely, a large number of readers here have seen the beautiful Square Stand, or used the Square card reader at some point.

Square made its big splash in 2009 and 2010 with a delightfully-simple card reader. I remember being totally blown away by the elegance of their solution to mobile payment processing. Within a day of receiving mine, I was selling t-shirts out of my car with only a phone in hand.

But it’s 2014 now. The world is no longer impressed by card readers. Square knows this, and so they forge their path ahead against competitors like Shopify and PayPal with new ideas and more powerful tools for exchanging money. We’re now witnessing Square filling out their portfolio of side projects and experiments, which leads us to the focal point of this blog post: Square Order.

The app lets you order food or coffee ahead of time from your favorite lunch spot or coffee bar. Using Bluetooth and geolocation, the restaurant/coffee shop is able to know when you’re nearby and can begin preparing your order before you’ve arrived. One value proposition that isn’t highlighted enough, in my opinion, is that you never have to wait in line again (assuming, of course, that everything works as planned)! Because your payment information is stored in Square, it also means you don’t have to worry about paying once you’ve picked up your order; just show up, grab you food or coffee and be on your way.

I admit up-front that I haven’t yet used Square Order. Early reviews sound promising though, so I’ll try not to let my lack of real-world usage sway my conclusion on the app’s practicality.

When it comes to the app itself, I’m totally love-struck by some of the design patterns Square has released into the world. Tighter motion and animation, fewer view changes, colorful animation and a warm aesthetic make Square Order one of the most accessible and beautiful apps I’ve ever used.

Let’s dive in…

Listen while you read

Design Details is also a podcast, a weekly conversation about design process and culture. Listen to the latest episode while you read, or subscribe in your favorite app.

Design Details Podcast
Loading...Grabbing the latest episode
Apple PodcastsOvercastPocketcastsGoogle PodcastsCastroBreakrerRSS Feed
Welcome splash

I love the warm simplicity of the app when it first opens. The transitions here are well-paced, the colors feel inviting and the illustrations create a feeling of intimacy; that’s not something to take lightly considering the size of Square as a corporation.

Walkthrough

While this walkthrough design pattern is used by just about every app coming out these days, I’m struck by how Square moved beyond static imagery to incorporate gestures, movement and light animations to draw users in and help them to focus on each step’s instructions. Even the little things – like the way the birds bounce up and down on the roof in the third slide – add a significant amount of emotional connection for first-time users.

Signing up

Square Order starts to set user expectations about navigation and design from the very first interaction. Here, I’m entering my email address. Since I already have an account, the screen immediately transitions to prompt for my password. The whole view doesn’t change, but rather the information I need slides gently into view.

From a UX point of view, I could see this being a potential point of confusion for some people. When I enter my email, it’s actually not super clear that the text input has changed and that I’m being prompted for a password. I’m of two minds about whether this was the right decision:

On one hand, I think that Square’s target market for this app is technologically-literate folks who are familiar with applications and will pay attention to what’s on the screen. That’s great for me, because it means Square can be a bit more daring with their usability patterns and step out of the typical login-flow comfort zone.

One the other hand, I can’t help but feel that Square Order was built only for a younger crowd with some degree of familiarity with technology. In this regard, I wonder if they might be limiting the accessibility of the application overall for people who might not be early adopter techies. What do you think?

First view

Oh boy, this detail is slick – when you first log into the app there aren’t any jerky transitions or sudden view changes. Instead, the loading spinner fades lightly out of view while the UI constructs itself, one piece at a time. I’ll likely repeat this point throughout this post, but I really can’t emphasize enough how well-paced the entire app feels. Transitions are crisp and smooth, there’s a perfect amount of easing and friction with every movement and you can’t help but feel a certain sense of tangibility with different elements on the screen.

Bluetooth off

If you don’t have Bluetooth turned on, you’ll see a yellow alert in the app’s header. This doesn’t feel like the most obvious way to alert a user that they’ll need Bluetooth in order to use the app, however I like that it doesn’t completely stop me from interacting with other parts of the app. The transition of elements here feels really great as well.

Select an item

Once you find something that looks good, tapping the price brings you to an order confirmation screen. I appreciate that I don’t have to reorient my fingers on the screen to place the order. The button transitions and the way content fades in and out of view feels intentional and solid.

Order details

Tapping on the ‘details’ link brings up a slick paper receipt (flat, of course – but the jagged edge along the top is a nice touch) with your order information. I love the typographic hierarchy here – the view is super easy to scan and makes it abundantly clear what you’re paying for.

Modify an order

I really like how smooth and effortless it is to change the details of your order. I look at other apps like GrubHub and recall just how painful it is to change quantities or make small modifications to an item. With Square Order, it really is simple and fast. It’s nice how the bottom part of the screen narrows to become the ‘Done’ button. It’s a subtle gesture – which may raise some questions about the usability of this particular flow – but once you get the hang of it, it’s a great experience.

My profile

It’s refreshing to see Order ditch the now-commonplace sidebar/drawer design. In this case, selecting your profile in the upper-left corner transitions in my available options. Usually with entire UI changes like these, you’ll see some dropped frames or odd movements as you rearrange elements on the screen. In this case though, I’m continually impressed with the consistency and fluidity of each motion.

Changing details

This might be my favorite detail in the entire app – I love the way the link to change card details or phone number transitions into the placeholder for the digits. This feels so much nicer than a modal input. Even Squares number bad design is a refreshing change of pace from the iOS default.

Changing name

This detail has the same premise as the previous one, but perhaps feels a bit less polished in the transitions. Tapping my name in the account settings view doesn’t move the label into the placeholder field, like it does for my credit card or phone number. Overall it’s not that noticeable, but still lacks total cohesiveness.

Profile picture

I really like how simple Square Order makes it to change your profile picture. I appreciate that the viewport for the camera is a circle as well, so I know exactly how my picture will appear in all other areas of the app and don’t need to worry about parts of my face being cropped.

Scrolling

Designing for mobile is incredibly challenging. Creating visual separation and hierarchy among elements on a small screen requires skill and tact – I think Square Order has pulled these things off wonderfully.

Rather than constraining themselves to a tried-and-true design pattern in iOS apps to have the navbar separated by line or color, this app uses a light transition gradient to provide a sense of cohesion across the entire screen. It doesn’t feel like I’m looking at separate “chunks” of information displayed on a screen, but rather that I’m looking at one whole screen with a fluid stream of information.

I fully expect a search option in the app soon, but for now you’ll need to scroll to find the right places for your order.

Add an item

This flow is a bit hard to follow since you can’t see my tap locations – sorry about that. All I’m doing is adding an item to my shopping bag in this movie, taking me to a clean illustration and check out button. I like the way the sticker on the shopping bag bears the logo of the store – a nice touch.

These small details provide extra context for users, and also add a certain level of real-world parallelism to our normal shopping experiences at stores.

Checking out

If you try to check out without any card information stored on your account, you get this clean alert. On one hand I appreciate that this notice isn’t too intrusive or obnoxious (i.e. not a red warning exclamation or a modal). Conversely, it feels a bit weird to not know what information is missing. If I click on ‘Update Profile,’ what do I need to fix? Making that clear here might help first-time users have a smoother checkout experience.

Deleting my bag

It feels like this detail is so close to being polished, but just doesn’t quite stick the landing. In the video I’m deleting my shopping bag to start over – the resulting animations are jerky and disorienting. Notably, my shopping bag appears back in view for a split second before taking me back to the app’s home.

This isn’t a huge problem, although it might make a user feel as though the action wasn’t successful. Did my bag really get cleared? A small ‘Success’ message might make this infinitely more clear.

Store info

Tapping on the ellipsis in the top-right corner of the store view reveals contact options for the store – either a direct call or directions. I’m not totally sold on using an ellipsis here, when perhaps using text (“Info”) – while not as aesthetically sexy – would be more clear.

More options

When you first open Square Order the main view has a few different “featured” or highlighted menu options from different stores. Over time, Square learns your favorite places and most common orders and tries to save you a step by featuring them here.

If you scroll through all of the featured items, you’re greeted with this cute illustration pointing you towards the full shop list. While I admire the design and playfulness of this character, I wonder if there is a way to make the browsing experience a more continuous flow (i.e. not having to teach me a new navigation pattern while I’m still browsing for something).

Web view

Ah, continuity is so beautiful. Square Order on the web is a nice little landing page directing users to text a link for the app to their phone. I love the way the buttons and text inputs behave in the same way that we saw in the app – it’s a nice primer for the subset of users who find the app on the website first.

Design Details Podcast

Design Details is also a podcast, a weekly conversation about design process and culture. Listen to the latest episode while you explore more posts, or subscribe in your favorite app.

Design Details Podcast
Loading...Grabbing the latest episode
Apple PodcastsOvercastPocketcastsGoogle PodcastsCastroBreakrerRSS Feed

Copyright whenever. This isopen source.

Apple PodcastsOvercastPocketcastsGoogle PodcastsCastroBreakrerRSS Feed