Magic

I designed an iOS app that connects to an in-store bluetooth beacon allowing for queue-free shopping.

2017 · iOS

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.

Background

Our client had developed (and successfully trialled in the field) a Bluetooth hardware device enabling any Point of Sale (PoS) terminal to become a beacon allowing people to connect and buy products using mobile payment methods.

The client was applying for further funding to build their platform and wanted a prototype mobile app (with the working title 'Magic') to demonstrate the conceptual possibilities of their hardware.

Goals

  • Identify a core audience, discover their user needs and create a compelling customer experience.
  • Create a conceptual prototype of the mobile app demonstrating a new shopping experience.
  • Create a prototype that would help the client meet funding goals.

Constraints

  • The project scope was large: the target customer, their needs and behaviours, and the problem being solved were undefined.
  • We had a hard deadline of three weeks before an investor fundraising event.

My role

I led the product design phase of the project, working alongside the client's Product Manager and leading a UX Researcher.

Audience & research

Audience

We decided to create the product for young, tech-savvy urban users who would:

  • Be prepared to try new services.
  • Use mobile devices heavily.
  • Would likely have shopping habits that involved frequent, repeated purchases of goods.
  • Have disposable income, so were likely to use iOS devices.

Research

We conducted 5 user needs interviews. Key pain points we discovered were:

  • Queuing.
  • Not receiving purchase rewards with everyday frequent purchases.
  • Payment using a mobile phone.

We collected the user needs we discovered and prioritised them to give focus to our product.

UX Design

Ideation

I led brainstorming sessions where we rapidly brainstormed different concepts and features.

Early concepts included:

  • A bot-based and voice-driven app.
  • An AR solution allowing users to scan their shopping.
Concept 1 - Location based check-in to shop
Concept 2 - Voice-activated bot
Concept 3 - Augmented reality view of in-store shopping

Upon review, we choose a location-based solution and combined it with AR features. 
This app would:

  • Be location-based allowing users to discover new stores, check-in and order ahead.
  • Include a virtual wallet allowing users to pay with credit card and digital payment methods like PayPal.
  • Have AR shopping features, allowing self-checkout.
  • Include a loyalty scheme with sharing and referral mechanic reducing customer acquisition costs.

Prototyping

We rapidly sketched different possible concepts for each page before reviewing them as a team.

Key screens from the paper prototype

When we were happy with the key pages, we started to fill in the steps users would have to go through, joining together the key steps in the core experience.

After the client had reviewed and signed-off this paper prototype, we started to build a mid-fidelity InVision wireframe prototype.

UI Design

Interaction Design

To help people identify modules, I experimented with different layout options including using iOS table views and card.

Tables felt like a very flat way for people to interact with the content and didn’t feel very engaging, nor visually interesting.

Swipe-able galleries of cards felt more compelling and engaging.

Tables of items vs swipeable cards

I experimented with a menu nav vs a tab-bar approach.

I decided that:

  • The primary experience of the app was focussed on the map screen and all the main user interaction was driven by it.
  • Rewards, Purchase and Wallets were of secondary importance to the map so didn’t need to have as much prominence in the UI.
  • A menu bar was the best approach: it didn’t take up screen real estate and didn’t get in the way of discovering new stores.
Menu bar vs tabbed nav

I wanted the map to be the focus of the app, encouraging users to discover the range of different stores using the Magic hardware terminal.

With this in mind, I made the map about 66% of the height of the screen height.

I designed a variety of different interaction states for the search bar allowing for extensibility in the filtering options.

Search design states, map icons and tooltips

Final prototype

Results

  • We made our tight deadline and met the client’s requirements.
  • Our initial user testing was positive, revealing minor usability issues and people were able to complete core journeys.
  • The client was able to meet potential investors to secure funding for the next stage.

Next steps

  • Refine the user flows for the development process.
  • Build an MVP of the app.
  • Establish metrics we could track to measure engagement (open rates, time in the app, checkout conversion funnel, NPS score, App store ratings).
  • Establish acquisition channels and integrate into the product.

Next project

Healix