twoPLUGS

Optimize the existing iOS app to give it a visual refresh
and make it more user-friendly and intuitive.

 
twoPlugs banner.jpg
 

WHAT IS twoPlugs

 

Two plugs is a mobile app that allows users to trade and exchange services amongst each other using an internal currency system.

 
 
 

platforms

iOS Devices

 

Tools used

Adobe Photoshop CC
Adobe Illustrator CC
Sketch
Figma

 

Role

UI UX Designer

 
 

 

Opportunity

The opportunity for this project was to design an intuitive iOS app which would educate the user about the way the app works and also about their internal currency system through a well-designed Onboarding. There was an opportunity to change the colour-way of the app to make it more accessible.

 
 
 

Research

 

From 5 interviews, 20 surveys and 4 UX audits, the team arrived at the following insights.

  • 83% of the respondents using the app are in their 20’s

  • 75% of the respondents prefer to communicate via messaging apps rather than email and phone

  • 100% of the respondents value trust, credibility, and safety

 
 

Problem

  • Difficult to navigate

  • Seller perception is not trustworthy

  • Services are not very informative

  • The app colours are inaccessible

  • Users do not understand how the app works

solution

  • Simplify navigation

  • InstIll trustability

  • More informative service page

  • More accessible

  • Design on-boarding

 
 
twoplugs-01-final.gif
 
 

ON-BOARDING

After user testing, it was evident that the majority of the users didn’t know how to use and navigate the existing app. That means users found it hard to buy and sell services and were confused by the internal currency system. The on-boarding is designed to educate the user about the service of buying and selling, the verification of seller profiles and how the internal currency system works.

 
 
 

Home Screen

The home screen is designed to make the app more user-friendly and intuitive. The user can search for a service with the search input field or switch between services offered or services needed with the top toggle.

The lower menu lets the user switch between the different screens of the app for example, services, wallet, messages, and profile making the app easy to navigate.

 
twoPlugs-02-.gif
 
 
2twoPlugs-03.gif
 
 

Service screen

The service screen has a description section, availability of the service provider and the service cancellation policymaking the service transparent and clear to the buyer. Additionally, there is information about the service provider, the area the service is provided and reviews of the people who have used it making the service page informative.

Seller profile

The seller profile has a checkmark that only appears once the seller has verified their government ID and their phone number. The buyer can see the verification and trust it as a verified seller.

 
 
 

In-app messenger and wallet

The in-app messaging option makes it convenient for the buyer and seller to communicate and come up with a deal. One of the major reason why the buyer doesn’t trust the seller is the fear of getting duped- paying for the service and not receiving it. To tackle this I designed an invoice feature within the messenger. After both parties agree to a service, the seller can send a deal proposal with all the details outlined as when, where and the cost of the service going to be provided. This in return keeps both parties on the same page and helps in solving any service-related disputes later.

 
twoPlugs-04-export.gif
 
 
 

Design Process

MOOD BOARD

Using words as inspiration like social, creative, trendy and freedom I created a mood board fit for the app twoPlugs. Here we finalized the colour palette. We used a navy blue, teal, and orange that is bright and accessible.

 
Moodboard tryout.png
 
 

LOGO REFRESH

The client wanted to keep their current logo but after 12 user testing, we concluded that the logo was not clear and the majority of testers didn't see the plugs. Also, the testers thought the logo holds the letters ‘E’ and ‘D’. As the client loved their current logo we decided not to redesign from scratch, rather tweak it a bit so it would be more clear to the user. The new logo is rotated clockwise and has two separate colours to make it look like a plug in the socket.

 

OLD LOGO

Asset 5@3x.png
 

NEW LOGO

Asset 4@3x.png
 
 
 
 

STYLE-TILE

 

I created a style tile to illustrate the different colours, textures, buttons and font sizes the iOS app would include.

 
 
twoPlugs styletile.png
 
 
twoPlugs-all screens.jpg