Redesigning a Service Trading App: A UX Case Study

My 2nd 3-week design sprint as a UX Design student

Anna Romanovskiy
Sep 1 · 10 min read

To see the UX writing work I did for this design sprint, check out my UX writing case study here.

Introduction

The history of bartering goods and services dates back all the way to 6000 BC and it’s been around since then in some form or another. To this day, people all over the world choose to trade products and services for pure convenience, practicality, and affordability. One thing that’s changed, however, is that now we have the wonderful world of technology at our fingertips (literally).

twoPLUGS is an online platform that allows users to trade services locally amongst each other using an internal currency system — everything from dog walking to tutoring to gardening to haircutting. The company is a budding startup with goals to expand its existing user base throughout Canada and the US, eventually reaching a global market.

Project Brief

My team and I were tasked with optimizing twoPLUGS’ existing iOS app to make it more user-friendly and intuitive, in addition to giving it a visual refresh.

My Role, the Team, and Our Design Process

I primarily worked on the UX for the project alongside Lily Li, and the UI was tackled by Sahil Lungani and Celia Fidalgo.

As a UX designer on the project, I conducted research, created user personas, visualized the user’s journey, designed mid-fidelity wireframes, and tested the prototype.

Our 3-week design sprint consisted of 5 phases: 1) Research 2) Plan 3) Design 4) Test, and 5) Iterate.

Research

Competitors

Like every design sprint, we began with research. Before diving into user research, we first conducted a competitive analysis to understand the current market landscape. We did our research in this order so that 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.

twoPLUGS is not the first online service-trading platform. There are quite a few others that have the same idea: some cater only to specific types of services or only offer product-trading (indirect), while others cater to a variety of services or offer both services and products (direct). We evaluated each platform’s features, design, and brand tone, discovering two main factors that can be used to compare them: 1) Ease of use, and 2) trustworthiness. Below is a visual depiction of the competitive landscape.

Competitive Analysis

After conducting a competitive analysis, it was clear that the key direct competitor here was Bunz — a platform for buying and selling products and services locally that uses its own cryptocurrency, BTZ. As a benchmark for ease of use and trustworthiness, Rover (indirect) 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

To understand our users, we sent out surveys to the general public via Facebook, Instagram, Reddit, and our own personal networks. We collected a total of 50 survey responses and interviewed 5 participants who said they have — at some point in time — used an online platform (similar to twoPLUGS) to trade services with other users. The main things we needed to find out about these participants were:

  • Their ages, occupations, and socioeconomic statuses (so as to get an understanding of who our target users are)
  • Their preferred method of communication (to determine how users would like to communicate amongst each other to trade services)
  • Issues or concerns they have with trading services with people they’ve met online
  • Things that are important for them to consider when trading services with people they’ve met online
  • Their likes and dislikes regarding service-trading platforms they’ve used in the past

Of the 42 participants who have used an online platform to trade services with other users:

  • 83% were students in their early 20s
  • 75% preferred to communicate via messaging apps rather than email and phone
  • 100% valued trust, credibility, and safety when trading services online

Persona and User Stories

To compile and visualize our user research, we created an affinity diagram from our participants’ responses.

Affinity Diagram

From this affinity diagram, we devised a persona and wrote accompanying user stories (see quotes below) that would represent twoPLUGS’ target user base.

User Persona

“As a loving dog owner in University, I need someone I can trust to walk my precious fur ball while I’m in class so that I can have peace of mind knowing he’s safe.”

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

This persona and these user stories will guide us throughout our design process to ensure that we design for our target user’s specific goals and needs.

UX Audits

To understand the issues with twoPLUGS’ existing iOS app, we conducted 4 UX audits with participants who we considered to be twoPLUGS’ target users. Due to the time constraints of the project, our team focused on identifying the major pain points in two key flows: 1) Onboarding, and 2) Finding and buying a service. Below are the screen-by-screen flows from the existing app and the respective user journey maps we created to help us visualize the user’s feelings (positive, neutral, and negative) as they progress through both flows.

Existing App Onboarding
User Journey Map for Onboarding
Existing App Finding and Buying a Service
User Journey Map for Finding and Buying a Service

From these UX audits, we deduced the following main pain points that needed to be alleviated:

  • The onboarding is too long and doesn’t explain well how the app works
  • The app is confusing, unintuitive, and hard to navigate
  • The app and the user profiles on it don’t seem trustworthy

Planning

After conducting extensive research, we dove into the planning stage of our design sprint. 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

Feature Prioritization

Before we jumped into designing any screens, we wanted to nail down the key features within the app that would meet the needs of our users. We brainstormed features and prioritized the most important ones.

Feature Brainstorm

User Flows

We then created user flows to help us visually map out and sequence the steps our users would take to create an account and profile, provide/sell a service to another user, and find and buy a service from another user.

User Flows

Because our project was limited to only 3 weeks, we decided to focus on the design of two key user flows: 1) Onboarding, and 2) Finding and buying a service. The onboarding process explains what the app is, its benefits, and how the internal currency system works, after which users are prompted to create an account or login if they already have one. In our second user flow, users are able to browse through services by category or search for a specific service, message a user offering a service they’re interested in, and then strike a deal with that user to purchase the service.

Design

Low-Fis and Mid-Fis

Finally reaching the design stage of our project, my UX partner and I began designing low-fidelity wireframes and then converted them into mid-fidelity wireframes in Figma.

Low-Fi Wireframes (left). Mid-Fi Wireframes (right).

UI Design Direction

The UI designers on our team, Sahil and Celia, focused on the style direction for the app redesign. They wanted the app to evoke a fun and friendly mood with a modern and liberating — but also trustworthy — feel that would resonate with our young millennial users. They used blues and orange accents, along with sans-serif fonts to emulate twoPLUGS’ cool and trendy brand 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. Below is the inception sheet, mood board, and style tile used to direct the design of the high-fidelity wireframes.

Inception Sheet (left). Mood board (center). Style Tile (right)

Design Decisions and Features

Profile

In the app’s original design, the user profile page showed the following: photo, username, first and last name, gender, about, and city. Based on our persona and user stories, we know that our users have “trust issues” when it comes to dealing with strangers online (as they should — cybersafety is important):

User Story: “As a loving dog owner in University, I need someone I can trust to walk my precious fur ball while I’m in class so that I can have peace of mind knowing he’s safe.”

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.

Original Profile (left). Redesigned Profile (right).

Wallet

twoPLUGS’ original system of buying and selling services was not a very secure one. Once a user purchased a service from another user, all it took was for the service provider to tap on one button confirming that they provided the service and the service receiver’s Eeds (internal currency) would be automatically transferred to the service provider. This is not a very safe system as people could easily confirm that they completed a service when in fact they did not. Going back to our persona and user stories, online safety and security are very important to our target demographic:

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

To ensure 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 provider confirms they have completed the service, the service receiver 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.

Original Transactions (left). Redesigned Wallet (right).

Testing

We tested our prototype on a total of 8 people — 4 of those people were the ones who we conducted our UX audits with, and the other 4 were people who we identified as our target users based on our user persona. We gave our testing participants 3 tasks:

Testing Tasks

The results from our testing showed that we needed to: 1) adjust the copy on the onboarding screens, and 2) fix the messaging feature.

For a high-level overview of the copywriting work I did for this project, check out my UX writing case study here.

We fixed the messaging feature by giving our users more freedom when sending the initial message to another user, while still keeping it simple and fairly effortless. Our 1st iteration only had the option to send a pre-written message (“Hi, I’m interested.”). In our 2nd iteration, we added a “Quick Messages” feature which allows the user to select 1 of 4 pre-written messages or to type out their own message. The inspiration for this design decision came from Instagram story’s “Quick Reactions” feature.

1st Iteration Mid-Fi of Messaging Feature (left). Instagram Story’s “Quick Reactions” (right).
2nd Iteration Mid-Fi of Messaging Feature (left). High-Fi of Messaging Feature (right).

Final Prototype

Our final prototype takes the user through the onboarding process to purchasing a dog walking service and confirming that it’s been completed. Check it out here!

Conclusion

Final Thoughts and Future Steps

This project was definitely a challenge but a very rewarding one. 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 side of the story — the user flow for selling a service to another a user — as well as the flows for posting an offer and a need.

Future Features

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

  • 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)

The Startup

Medium's largest active publication, followed by +500K people. Follow to join our community.

Anna Romanovskiy

Written by

UX/UI Designer | UX Writer

The Startup

Medium's largest active publication, followed by +500K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade