Mobile & Web App Design

Client

5

Attra

Tools used

5

Adobe XD

5

Miro

Deliverables

5

Styleguide

5

Hifi Mockups

5

Prototype

Overview

Attra is a service-based company in the B2B domain. They specialize in the banking, finance, and payments industry. To showcase their expertise in the payment domain, they wanted to launch a payment app for in-house employees. The idea was to integrate their rewards system and provide employees with a more convenient way to make payments to the office vendors in the cafeteria and promote domain expertise and branding.

Challenges

M

Employees rewards platform was difficult to access

M

Failed transaction due to poor network connectivity

Solution

N

QR based payment app

N

Redeem rewards to wallet

N

Pay later option, incase of network issues

My Role

User Experience
Visual Design

Creative process

Since the project had a short timeline for launch, the process I followed was Double Diamond as it helped to align with stakeholders the work we will be doing in each phase and the value we can have by following the same.

Research

After discussing the project requirement with the project manager and business head, I started to interact with our employees to understand what challenges they face to make payments and the issues faced to interact with the rewards portal. The purpose of this research was to figure out the below areas.

To deep dive into the user’s actual needs, how they are dealing with the present situation, and what ideas they have to improve the challenge they are facing
To understand user’s reactions to integrating a rewards system into a payment app, which could also help them with coupons and offers in day-to-day transactions.

The process I used to conduct my research findings was MVR (Minimum Viable Research) as I needed to validate my hypothesis and have some insights to share with the stakeholders.

During the research, I observed that most of the users were not much interested in using a separate payment system, even though there were instances of failed and delayed transactions. But when they realized that the organization was also planning to integrate our reward system where they can avail of discounts and offers, they seem to like it.

Also, as mentioned, employees were very hurt as they were sometimes failing to redeem their rewards on time, with no reminder.

Define

In this phase, we actually did multiple ideations and brainstorming session with stakeholders. The goals of this process was to figure out the below areas.

To define the user’s journey and map out the activities.
To understand different tasks user might be willing to perform by creating User stories & HMW (How Might We) questions.

The product was designed for three different roles. One for the employees (user) and the other two for admin, agents with different tasks.

For users

Make payment for any purchase
Redeem rewards in the wallet
Apply coupons/offers in the transactions
Users can Pay later if required for situations like poor network or failed transaction

For admin

Approval for the vendors onboarding
Tracking of all users detail
Tracking of any disputes between vendors and employees

For Agents/Vendors

Payment accept
Offer discount
Menu uploading
Transaction details

Design

We started with creating the information architect, followed by wireframes to validate the content layout for the app. After creating the hifi mockups I also performed Usability to validate the designs.

Usability findings

Color scheme

The color scheme used was the brand colors.

Typography

Typography used was Source Sans Pro

Admin Dashboard

Usability findings

Q

Unclear, with profile and homepage

Q

Offers from vendors were difficult to find

Q

Transaction details was in side nav

User app (Employees)

Key impact

Once the app was launched, it was observed that there were still disputes in transactions, however, the wait time was reduced for both employees and vendors, as the Pay Later feature eased the transaction. Also, there was a great response due to rewards redemption and discounts.