twoPLUGS

iOS App Redesign

Scope

Redesign iOS app using agile methodology to optimize user experience, focussing on onboarding and service purchasing

Timeline
3 weeks
Role
UX Design
Tools
Figma
twoplugs_logo.png

twoPLUGS is an online platform that allows users to trade services locally amongst each other using an internal currency system.

Problem Statement

As twoPLUGS' existing iOS app was identified to have a lot of usability issues, it needed an app redesign to improve a noticeably poor experience.

Research

Summary

1 Competitive Analysis

50 Surveys

5 Interviews

1 Persona

2 User Stories

2 User Journey Maps

Before diving into user research, we conducted a competitive analysis to understand the current market landscape so that later we could question users on their experiences with twoPLUGS’ competitors (if applicable), so as to help us find any gaps in experience that our redesigned product could fill.

Competitive Analysis

twoPLUGS' key competitors are other online platforms that allow users to buy and sell services amongst each other. We evaluated these platforms' features, design, and brand tone, discovering two main factors that can be used to compare them: 1) Ease of use, and 2) trustworthiness.

As a benchmark for ease of use and trustworthiness, Rover (indirect competitor) really stood out with its super descriptive user profiles and simple in-app navigation. Moving forward, this helped us generate ideas for how we could set twoPLUGS apart from its competitors.

Surveys and Interviews

We surveyed 50 people and interviewed 5 participants who said that they have used an online platform (similar to twoPLUGS) to trade services with other users.

Areas of Interest

  • Ages, occupations, and socioeconomic statuses

  • Preferred methods of communication

  • Issues or concerns with trading services online

  • Likes and dislikes regarding service-trading platforms used in the past

Key Findings

Persona and User Stories

To compile and summarize our research findings, we took our participants’ responses and created an affinity diagram which we used to devise a persona with accompanying user stories. Our persona is a university student in her early 20s named Sarah who wants to save money while trading services with others.

Sarah's Story

“As a loving dog owner and student, I need someone I can trust to walk my precious fur baby while I’m in class so that I know he's in good hands.”

Sarah's Story

“As a cautious tech user, I want a safe way of electronically transferring money for products and services so that I don’t get ripped off.”

User Journey Maps

To understand the issues with twoPLUGS’ existing iOS app, we conducted usability testing with 4 participants who fit twoPLUGS’ target user criteria. Due to the scope of the project, we focused on identifying the major pain points within two key flows: 1) Onboarding and 2) Finding a service. We created 2 user journey maps to help us visualize the users' experience as they progress through both flows.

Onboarding

twoplugs_oldonboardingmockups.png
P4_CustomerJourneyMaps - Onboarding (1)_

Finding a Service

twoplugs_oldfindbuyservicemockups.png

From these user journey maps, we deduced the following main pain points that needed to be alleviated:

  • The onboarding poorly explains how the app and its internal currency system work

  • The app is confusing, unintuitive, and hard to navigate

  • The app and the user profiles on it don’t seem trustworthy

Planning

After analyzing our research and insights, we found that in order to create a successful online service-trading experience, we needed to:

  • Simplify the app’s navigation and make it more intuitive

  • Provide users with more information about the app, the services offered, and the users providing them

  • Establish trust between users through transparency

User Flows

Due to time constraints, we decided to focus on the design of 2 key user flows: 1) Onboarding and 2) Finding and buying a service.

Onboarding

twoPLUGS_onboarding.png

Finding and Buying a Service

twoPLUGS_userflow_findbuyservice.png

Design

Summary

Low-Fidelity Sketches

Mid-Fidelity Wireframes

High-Fidelity Wireframes

As we reached the design stage of our project, we began sketching low-fidelity wireframes and later digitized them into mid-fis in Figma.

For the style direction, the UI designers on our team focussed on giving the app a fun, friendly, and modern — but also trustworthy — feel that would resonate with our young millennial users. They used blues and orange accents, along with sans-serif fonts (SF Pro Display and Open Sans) to emulate the brand's cool and trendy image. Blue is often associated with trust and loyalty, and orange is often associated with joy and happiness — these are all feelings we wanted to evoke in our users.

twoplugs_lowfiframes.png

Design Decisions

Profile

Original Design

The user profile showed only photo, username, first and last name, gender, about, and city.

Pain Point

Users have “trust issues” when it comes to dealing with strangers online.

Design Decision

To make sure our users felt comfortable and safe doing business with people they don’t know, we had to make sure user profiles in the app contained enough transparent information so as to evoke trustworthiness and credibility. We added sections for age, social media links, and verification via phone number and/or government ID. We also added a star rating that is based on other users’ reviews as well as the date the user joined.

Wallet

Original Design

No secure system of buying and selling services. Once a user purchased a service from another user, all it took was for the service seller to tap on one button confirming that they provided the service and the service buyer’s Eeds (internal currency) would be automatically transferred to the service seller. This is not a very safe system as people could easily confirm that they completed a service when in fact they did not.

Pain Point

Users are worried about getting ripped off when electronically transferring money for products and services.​​

Design Decision

To ensure cyber safety and security, we introduced a two-way transaction confirmation feature where both users have to confirm that the service was completed. On top of that, we also added confirmation modals, in case of any accidental finger slips. Once the service seller confirms they have completed the service, the service buyer confirms they have received the service. The VLTs (renamed internal currency) are then transferred from the buyer to the seller and the buyer is able to write a review of the service.

Testing

Summary

2 Testing Tasks

8 Participants

2 Rounds of Testing

We completed 2 rounds of usability testing on a total of 8 people — 4 of whom we conducted our user journey mapping with, and the other 4 we identified as our target users based on our user persona. The results from our testing showed that we needed to fix the messaging feature.

Issue: Messaging

Problem
When given the 2nd task, 100% of participants became confused once they tried to message the other user. Our 1st iteration only had the option to send a pre-written message, “Hi, I’m interested.”, which is something the participants were not used to. They also said they wanted more freedom when choosing what to message another user. 
Solution
We added a “Quick Messages” feature which allows the user to select 1 of 4 pre-written messages or type out their own message. This gave users more freedom, while still keeping it simple and fairly effortless.
twoplugs_hifismockup.png

Final Prototype

Our final prototype takes the user through onboarding, finding a dog walking service, messaging the service seller, purchasing the service, and confirming it has been completed.

You can play around with our interactive prototype below or check it out here!

To Conclude...

Final Thoughts

Three weeks was obviously not enough time to redesign all the screens for twoPLUGS’ iOS app, however, we believe that we tackled the project successfully. Our prototype met the needs of our user persona by being simple, trustworthy, informative, and intuitive.

If given more time, we would love to explore the service seller’s user flow for selling a service to another user, as well as the flows for posting an offer and a need.

Some potential features that could set twoPLUGS apart from its competitors are:

  • Follow people whose services you use frequently

  • Accumulate “badges” or “trophies” for being an avid user (e.g., quick responder)

  • Notifications after some time has passed when no action has been taken (e.g., a reminder that a deal proposal is expiring)

Future Steps

twoPLUGS will be getting our design developed, as well as an Android app designed in the same style and its website redesigned to match. We expect that our iOS app redesign will increase the use of twoPLUGS as a service-trading platform and give it a more competitive edge in its market.

Learnings

This was my 2nd client project at RED Academy. It taught me that when it comes to design, sometimes the tried and true way is the best way. There's never any harm in trying something new, however, typically when people are used to seeing a certain design pattern, they're going to expect to see it in other products. So designing a feature that has rarely been seen before might not always be a good idea. The best way to find out is to test it.

See more of my work
binqit_portfoliohovertile.png

binqit

UX/UI | Responsive Web App Design

o+e_portfoliotilenew.png

Olive+Elliot

UX | Website Design

twoPLUGS

UX Writing | Branding & Copywriting