Magic

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

Overview

The client had developed a Bluetooth hardware device enabling any Point of Sale (POS) terminal to take contactless payments.

They wanted a prototype mobile app (with the working title 'Magic') for consumers that, once installed, would automatically connect to the POS terminal and allow users to buy products in and out of store using app-based payment methods.

Business challenges

The client was in the process of applying for seed funding in order to build the app, so wanted to demonstrate the conceptual possibilities of their hardware and software.

They had built the hardware technology, but didn't have experience of designing customer-centred software.

Potential investors would want an understanding of how the client would acquire and retain users so we needed to design in customer acquisition from inception.

Our high level goals were to:

  • Identify a core audience, discover their user needs and map their customer journey.
  • Create a conceptual interactive prototype of the mobile app showing how a new type of shopping experience could work.
  • Create a prototype that would help the client meet their funding goals.

My role

I led the Research and UX Design phases of the project.

I worked alongside the client's Product Manager and led a team of 2 UX/UI Designers.

I was responsible for project management, leading workshops, creating processes and Research & UX Design deliverables.

Constraints

We had several key constraints for this project:

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

Design process

In order to meet the tight schedule for the project I scoped a program of work that would allow us to define the problem as tightly as possible before starting on the process of delivery.

I used the following techniques to deliver the project:
1) Problem definition.
2) Ideation.
3) Design execution.

Problem definition

Stakeholder engagement & business objectives

Initial project kick-off meeting post it notes

To kick the project off, I conducted a business objectives meeting, where we established the client's goals, got an overview of their technology, and an understanding of what they were hoping to present to potential investors.

From this we were able to agree on a target audience for the project: young, tech savvy urban users who would have disposable income, use mobile devices heavily and be prepared to try new services.

User needs discovery interviews

Prioritised spreadsheet of customer user needs that would inform our conceptual thinking

I then carried out five remote Customer Development customer interviews with the target audience, giving us insight in to their current shopping behaviours and identifying problems and needs.

Major pain points we discovered were:

  • In-store queuing.
  • Rewards for everyday purchases without needing store loyalty cards.
  • Payment using a mobile phone.

Personas

From our customer development interviews we were able to create key user personas and recorded their wants, needs and demographics to ensure our design process was aligned to their behaviour.

Ideation

Customer Journey Mapping

I then carried out a customer journey mapping workshop where the project team gathered and brainstormed different potential customer journeys.

Based on our Personas and their user needs, we brainstormed potential different customer journeys based on the AARRR funnel (Acquisition, Activation, Retention, Referral and Revenues) before deciding on a chosen journey that would served as the basis of our MVP (Minimum Viable Product) user experience.

Conceptual thinking

Initial concept brainstorming using Crazy Eights technique

I then led a brainstorming meeting where we reviewed our personas and customer journey and rapidly brainstormed different concepts using Crazy Eight scamps and more detailed sketches.

Our early concepts included a bot-based, voice-driven app through to an Augmented Reality (AR) solution allowing users to scan their shopping in-store.

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 selected a Map-based solution, combined with elements of AR.

This app would:

  • Be Location-based.
  • Include a Virtual wallet.
  • Have AR shopping.
  • Include a Loyalty scheme with referral mechanic.

This solution would allow for users to select a store in any location, and because the app would connect to the stores POS terminal and know the users location, this would trigger either an in-store shopping experience (with an AR bar-code scanner and queue-free checkout process) or allow users to order products ahead for collection.

To meet the user need of customers wanting loyalty points from any shop, we included a new loyalty scheme that would allow shops to alert customers in store with offers, and for a referral mechanic that allowed users to share offers with one and another.

This would drive app referrals, reducing customer acquisition costs.

The app would also include a virtual wallet allowing users to pay with credit card, virtual payment methods like PayPal and loyalty points accrued from shopping with the app.

Roadmap

With an understanding of our target audience, a map of the customer journey from acquisition through to revenue, I created a prioritised roadmap of featured and functionality that would form the basis of our prototype.

This roadmap would give us focus and ensure we were delivering the key features in order to demonstrate the app, whilst meeting our tight deadline.

Design execution

Information architecture

Our final deliverable for the project was a mid-fidelity prototype demonstrating the core concepts of the Magic app.

I created an information architecture that would allow the user to understand the core experience of the app, yet get to key functionality (such as viewing their payment cards) in two taps.

I created a map of the different functionality and the associated pages screens required.

User flows & content

Using this IA, I led the development of user flows for the app.

Using the 37 Signals user flow notation technique we wrote down all the key customer journeys that we wanted to show.

Once we were happy with these flows, we wrote down all of the content for each page, and grouped these together to make logical page modules.

Prototyping

With our IA, user flows and page content mapped, we started constructing a paper-prototype.

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

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 clients had reviewed and signed-off this paper prototype, we started to build a mid-fidelity InVision wireframe prototype.

We used Sketch to setup core styles to ensure consistency of UI widgets.

Final prototype for ordering ahead and buying a cup of coffee

I led the team in producing the paper and mid-fidelity prototype, ensuring consistency and quality of the finished prototype.

I set up project management processes to ensure we completed all core screens, sketched screens, built a shared component library in Sketch and wireframed pages.

User testing

With our mid-fidelity prototype signed off by our client, we conducted 5 user testing interviews (I conducted two of these interviews) to ensure users could use the app.

In general, users could conduct the tasks we set for them in our test.

We uncovered a few usability issues such as building the mental model of being able to order ahead which we’d aim to address in the next version.

Results

We made our tight deadline with a high quality prototype that met the client’s requirements.

Our initial user testing was positive, revealing minor usability issues and users were able to complete core journeys.

The client was able to meet potential investors to secure funding for the next stage.

Our next steps would be:

  • shadow users in a real-life situation to see if we could discover potential solutions to some of the usability issues
  • Refine the user flows in the prototype
  • Design the UI ready for development

Read Next
Hardens