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 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
_.jpg)
Finding a Service
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
Finding and Buying a Service
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.
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.
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
UX/UI | Responsive Web App Design
Olive+Elliot
UX | Website Design
twoPLUGS
UX Writing | Branding & Copywriting
