Feature image of the COTD app

CatchOfTheDay

iOS App, Web, UX, UI

Catch is one of Australias biggest flash sales sites. Sales go up for a limited time and customers have to be quick in order to get the bargains on offer. I worked on their iOS app and also brought updates made on the app to the website as well.

Areas of focus

As the business and customer base grew, so did the number of sales. The ability to help customers make better, faster and more informed decisions was key. We decided to focus on several key areas:

A one aisle wonder

With inreased sales events, customers were struggling to consume the sales in an efficient manner. The goal here was to split the events into categories to help customers hone in on specific categories of interest.

Time was of essence, so we decided to push out a quick update that allowed customers to swipe across categories and view sales within those categories.

Visual evolution of the events screen

Categories are cool, but...

One of the biggest pieces of customer feedback we received was the difficulty they experienced consuming large sales. Search was great, but filtering would be ideal. Given time constraints, I jumped straight into mockups to quickly push out an update.

Filters V1

When it doesn't feel right

After a few months in the wild, I referred to our analytics and also did some quick guerilla user testing with a few colleagues at work, observing how they interacted with the filters. I found that many were happy with the filters, but the consumption of large lists was a point of frustration.

Some customers even missed the fact that they could filter products within a sale. Making filters more prominent became my top priority.

Canning the large lists and the movement back and forth between filter screens in favour for an accordion setup was a clear winner.

Sketching different options to make filtering easier
App filter updates
Web Filter Updates

Left left left right right right

Sounds like a cheat code right? Thats the path customers took browsing between multiple categories, sales and products. It left them with no sense of where they were in relation to where they came from.

The solution was to implement a visual transition between screens so customers had an idea of where they were and where they came from.

We tested this internally and when we pushed it out, customers were over the moon.

Mo money mo problems

Getting people to part with money is always an issue. No matter how small or large the sum is. This final part of the purchasing experience was key and making customers feel safe shopping online is extremely important.

Observing how customers shopped via user testing taught us a lot. We found that a honest and straighforward UI was a clear winner.

Holding their hands and clearly providing a cost breakdown was really appreciated. It made customers feel safe and more likely to return and shop with us.

Sketching out updates to shopping cart on web and the animation flow for app
Shopping cart on app & web

A little polish goes a long way

After pushing out updates to the web and app, I decided to push the envelope a little further. A great experience goes a long way and pays off in the long run.

Not content with the standard push up transitions that we had, I opted for a slighty more custom animation which also allowed us to tie in cues like reviewing previous purchases.

We didn't have to do this, but it showed customers that we care, value their business and feedback.

Has it arrived yet?

The feeling we get waiting for our packages to arrive after a purchase is always going to be there. We want it now!

Customers who shopped on the app primarily had to logon to the website in order to track and manage their orders or use AusPost and tracking numbers. An experience laced with friction.

We decided to bring it all to them instead. Something they absolutely loved. They could use the app to both shop, track and manage their orders.

Initial order management sketches
Different order states
Parcel tracking

It's not me, its you :(

Sometimes things go awry. Parcels get lost or even worse arrive damaged or torn.

In order to alleviate all the negative feelings associated with a bad delivery, we made it easy for customers to initiate returns within the app.

Furthermore we leveraged the device camera to allow customers to take and attach photos, which made initiating a return and the turnaround time of a return faster.

Returning items

Rolling out the red carpet

First impressions count. A lot. New customers who'd never heard of us and downloaded our app need to feel welcome and at home.

The solution was simple. A couple of easy pointers that explained how sales events worked and how we make the shopping experience a breeze.

Keeping with the friendly vibe, I decided on simple illustrations paired with clearly worded text to make new customers feel at home and comfortable shopping with us.

Sketching onboarding flow and accompanying illustrations
Final onboarding flow and completed illustrations

The cherry on top it all

The final part of the purchasing experience like invoices, warranties, etc... are all communicated to customers via email.

Our email templates were in dire need of some TLC. When I had some downtime, that was exactly what I worked on. Keeping in line with the friendly illustrations used in the onboarding process, I started work on updating our email templates.

I covered most email templates from welcome emails, order confirmation, address changes, reactivation and many more.

Ideas for email template updates
Updated email templates

Developers, developers, developers

Part of a designers job is to supply developers with as much information as we can. It not only makes their job easier, it also helps ensure that our designs are implement exactly how we'd designed it.

I created style guides for both the app and web team and specced out components used throughout both platforms.

iOS guide
Web guide