Halfprice: My first client project

Results from 10-weeks of UX training

Hanny Yeung
Hanny’s Portfolio
8 min readJul 24, 2017

--

Halfprice is a platform for timed-service businesses to fill their idle times with 50% discounts, and for customers to discover nearby deals happening in 6 hours.

Introduction

As my final project in General Assembly, I worked with a client from Hyper Limited. In 3 weeks, we designed a platform from scratch, validated it with 2 rounds of user testing for 4 persona types, and delivered a high-fidelity prototype.

My key responsibilities in a team of 3:

  • All documentations (agendas, minutes, client reports, questionnaires, participation agreements)
  • User interviews: Field research
  • Low-fidelity prototype (Balsamiq)
  • Usability test: Tasks & flow design
  • High-fidelity prototype (Sketch)
  • Product demonstration

Backstory

Businesses relying on appointments (massage, beauty, etc) have idle hours. With fixed costs such as rent and staff salary, having any customer would be better than none.

Customers have struggles using platforms such as Groupon — random discounts, fine-prints, credibility issues... A better solution would focus on simplicity and immediacy when looking for services.

Case study contents

1: Team & client communications
2: Field research
3: User-driven design
4: Usability validation
5: Design iterations
6: Going beyond
7: Outcome

As students, we made countless mistakes. But I always asked: “How can this be better?” This gave born to reflection sections at the end of chapters.

Chapter 1: Team & client communications

In our team, the 3 of us have very diverse personalities. It was rough at the beginning, but we later found that timebox-planning facilitated effective collaboration —first agree on a plan, then work individually in timed periods, and come together as needed.

Example of timebox-planning

Precision to me is most important in client communications, and preparation is the key to achieve that. Before kickoff, our team developed a system for internal reviews before every communication with client, and assigned one of us as the single point of contact.

Too many screens to organise

Creating a platform from scratch for both businesses & customers, we had over 30 wireframes to draw in a weekend while preparing for usability tests. This screen checklist was made for the team to distribute tasks and make sure the prototype is complete.

Screens checklist

Chapter 2: Field research

The most challenging part of data collection was to recruit business owners for their insights. One way to find them was cold visits.

“If you can spare 15 minutes answering some questions, your business can have 1 year of free advertising opportunity on the platform after its launch.”

We had a high success rate because instead of randomly visiting businesses, we scoped down on targets by collecting leaflets on the streets and looking for discounts online — they were in need of a marketing boost , and would more likely be attracted by our incentives.

Map of targeted businesses in Central and Causeway Bay

Reflection: Research process

  • A better invitation. We initially required interviewees to sign a participation agreement, which scared some of them off. We should’ve removed the signature, and made an invitation letter instead of just detailing confidentiality / incentives. So we could leave useful information in stores even when owners were absent.
  • Interview businesses before customers. We let customer-interviewees choose their preferred services (beauty, hair, etc.) for their answers because we didn’t know the target industries. By first identifying the more in-demand industries, our interview protocol would be more focused.

Chapter 3: User-driven design

We identified a total of 4 personas from our research. We came up with features and made decisions to address their specific needs and pain points.

Merchant — Independent professionals

Need freedom to create their own deals, and not be bound to a single location.

Decision: Throughout the app, use the word “merchant” instead of “business”
Features: Skippable address while onboarding; deal-specific locations

Onboarding // Address input // Create new deal

Merchant — Business owners

Oftentimes 50% off is too much for them to even cover commission costs. They are also too busy to set up deals during working hours.

Decision: Report to client about business findings
Features: Reusable deal templates; quick publishing

Flow: saving template and quick publishing from template

Customer — Roamers

They look for nearby places, cheap and fast.

Decision: Because their goals align with our values, mark persona as primary
Features: Map view with my location; time & price filters; fast checkout

Map & filter views // 2-step checkout

Customer — Planners

They care about quality and reputation of providers. They want to see what others say, and they are loyal to what they like.

Decision: Because price may not be their main concern and our product may not appeal to them, mark persona as secondary
Features: Location search; ratings & reviews; merchant profile; favourites & sharing

Deal details // Merchant details

Chapter 4: Usability validation

While my teammates were creating low-fidelity wireframes in Balsamiq, I drafted the tasks and ideal user flows for usability tests, which the protocol was later based on.

Tasks for merchants included create new deal, schedule deal for multiple continuous slots and changing the date/time for a slot.

Tasks for customers included book a service and review a merchant.

Tasks & flows in usability tests (left: buyer, right: seller)

Critical task: Hamburger switch

The app is a platform that consists of users from both sides, and they have the ability to switch modes on-the-go. For the switch, we had 2 options: inside a hamburger menu, or inside settings if we use bottom tabs bar instead.

To maximise screen estate for the map view, I took the hamburger approach. All users landed on customer mode, and we expected merchants to do the extra work by finding the switch in the hamburger menu.

We also decided to introduce onboarding for merchants to collect information on first launch.

Drafted flow for hamburger menu & seller onboarding

Reflection: Usability tests

  • Time. We left too little time between low-fidelity prototype and the tests. We kept changing the test protocol, which affected the performance of the moderator. We shouldn’t have allocated a weekend for this, so we could speed up with pen and paper instead of relying on online collaboration.
  • Unsatisfying merchant recruitment. We only did usability test with 3 merchants. We couldn’t validate trends based on frequency of occurrence. We should’ve utilised the cold visits in user interview stage to also recruit and schedule for usability tests.
  • Lack of independent professionals. We identified this persona but tested with none. As a result, no validations, design iterations or suggestions were made based on this persona. This can be easily avoided by using personas instead of type (merchant & customer) as a basis for recruitment.

Chapter 5: Design iterations

Goodbye hamburger

0% of our merchant-testers found the switch, or even knowing the menu is a button. This was our top priority as merchant’s participation is the fuel of the platform.

Sacrificing some screen estate for the map view, a bottom tab bar is now used. We also added a global first-launch screen to choose modes.

Bottom: Global first-launch screen // New locations for mode switch

Time slot management system

It was one of the main tasks tested with merchants, and the original design turned out to be very problematic.

Original time slot management screens

Originally, the merchant defined time slots available for the deal, and customers would choose one from the list to book.

But what if a customer’s preferred time (e.g. 2:30 to 3:30) overlaps multiple predefined, available slots (2:00 to 3:00 and 3:00 to 4:00)?

After many redesigns, we arrived on a system that prioritises flexibility for customers:

New time slot management system

No compromises were made for the new design and I think it is the best solution. Merchants who prefer more control (like the original system) can define multiple opening periods that can only fit 1 session each. Then, customers will be forced to a single start time when they book.

Chapter 6: Going beyond

After finishing my screens checklist (see chapter 1), I wanted to deliver something beyond key features demonstration. At last, I created a whole package — a prototype that feels like an actual app.

Empty states

Besides key user flows, I also created the wireframes for empty states, taking care of empty messages and hints & descriptions on unfilled forms.

Empty states and empty forms with hints

Preview feature for merchants

On top of features identified for personas, I created a preview feature for merchants so they can be confident about what they publish.

Edit and preview merchant details

Instant-adjustment system for future iteration

Despite knowing this is a 3-week project, I treated it as if it will continue to iterate for months. There is no brand guidelines for this new product, so with InVision Craft I laid an instant-adjustment system for fonts & colours. This will allow the team to quickly try & decide on branding at a later stage.

Instant colour adjustment

Chapter 7: Outcome

Our client was impressed by the product, especially with the merchant template flow (see chapter 3) and time slot management system (see chapter 5).

We also convinced the client to loosen the restriction on 50% discounts. We proposed that it simply won’t work with businesses that can’t afford their practitioner’s commission fee. A possible model would be to allow a range of fixed discounts, e.g. 50%, 40%, 30%…

Reflection: Presentation

  • Design-presentation for business audience. Our presentation had a process-based structure. We should’ve used a result-oriented structure, putting product demonstration first and then explain how we got there. We should’ve also included more statistics.

Epilogue

In this project, I experienced the power of communication. Designers always seem to dislike clients, but what I felt is that with mutual education, we each took a step back and built a better product together.

As UXers, we approach problems with an open mind. We are the barricades keeping our client from arriving on a predominant solution, and I think we did that brilliantly. All decisions were supported by research, and we believe that the product is one that users will truly love.

Let’s have a conversation 👋

yeunghanny@gmail.com · www.linkedin.com/in/hannyyeung

--

--

Hanny Yeung
Hanny’s Portfolio

UX/UI Designer with a Psychology background. Touching people’s hearts and making them smile. www.linkedin.com/in/hannyyeung/