Alice WinterGet in touch
Concept & UX Design · 2018-19 • 4 min read

Finnish dating in your pocket

A modern mobile app for a historical dating service.

Client
Aller Media
Role
Concept & UX Design
Duration
June 2018 - July 2019
Outcome
Small but steady Beta user base • increased engagement • new visual identity
Access
Open
Three phones on a dark ground with a pink sphere behind them, showing the Treffit Beta app in Finnish: a user’s profile, with a large photo, his bio and a blue Send message button; the feed as a list of men’s profiles in Helsinki, each with a photo, name, age and the start of their bio; and a chat with a user, keyboard open.
TREFFIT BETA APP - where one can find and get to know potential dates

01 — Context

The Finnish dating service, Treffit24, has been around for almost 2 decades, and it feels like it. As it exists only as a web application, the client wanted us to extend it into a modern mobile application, to help reach the business goals of:

  • reaching a new audience via the App and Play Stores
  • attracting more women to the service
  • increasing premium sales conversions
How might we increase love-seekers engagement to find a significant other - and eventually delete their profile?

02 — Discover

What I did

  • Qual research: interviews, concept tests
  • Quant research: polls, surveys, CS feedback
  • Benchmark

Users insights

Around fifty sticky notes on an office window, orange and grey, arranged in the shape of a heart. One user insight each, the buildings outside showing through. Among them: brand has bad reputation, waiting for something else than Tinder, it’s oh so quiet, description is more important than picture, women don’t answer, always the same faces, scammers away, inbox spammed, I don’t want to risk to be recognised, cheaper is better (free is best!), hard to write a good description, it’s hard to take a good picture, want real people, want to feel secure, not mobile friendly.
USERS INSIGHTS IN VIEW FOR THE WHOLE TEAM — to make sure everyone is in touch with users needs
  • A smart service that learns and curates content, instead of always seeing the same few profiles
  • Not another Tinder
  • Stop the open messaging to anyone
  • Icebreakers
  • Real people with real names, and their faces

In their words

In their words

Treffit has been awfully quiet this year, and many people have said that.
Woman, 61 · Interview, 2018

In their words

[Writing about myself] is the most difficult thing. That’s what I hate, I absolutely hate it.
Woman, 71 · Interview, 2018

Technical constraints

Treffit24 shares its architecture with Suomi24, its parent service, so we couldn’t fundamentally scrape everything and start from scratch.

03 — Explore

What I did

  • Service blueprint
  • User flows and wireframes
  • User tests

Service blueprint

With the help of my whole team: business, development, marketing, sales, and analytics, I ideated a service blueprint.
From the first version, I iterated and detailed it during the following months, and made it visible to our stakeholders by stapling it to a wall. Tape was too weak for such a large and heavy document.

The first service blueprint for the Treffit app, hand-drawn across two pages of a dotted notebook. Rows for time, evidence, user actions, onstage actions, backstage actions, support processes and metrics. The user’s journey runs left to right: hear about the service (“a friend told me to check it”), consider using it, join, explore (“I could find someone here”), evaluate, then engage with other users and dates over days or months, commit and buy, and finally exit (“I found the one”). Underneath, what the service does at each step, such as stories, automated search, spam filtering, block and report, date suggestions and profile curation, and a metric for each stage, ending with the share of leaving users who found love on Treffit.
THE FIRST VERSION OF THE SERVICE BLUEPRINT — and also the simplest

With her massive effort to understand complicated legacy system and converting it to a modern mobile app that users would prefer she really impressed me and the whole team. Alice is well organised, she has eye for details as well as for big picture.

Marketing Manager - Treffit24

Process flows

I mapped possible interactions for the different stages of the user lifecycle.
The maps includes basics functionalities but also new ideas to test out.

A hand-drawn process flow titled Messaging, dense with arrows. Users arrive from a push or in-app notification for an incoming message, from a user profile (send message, or suggest a date), or from the navigation anywhere in the app. They land on the messages list, where they can search, or select conversations to mute, pin, block, download or delete. From there into a conversation, which branches out to typing and sending, attaching, sending a suggested message, recording an audio message, a video or audio call, quoting, copying, favouriting or deleting a message, viewing media, muting, blocking, and back to the other person’s profile.
AN EARLY PROCESS FLOW FOR MESSAGING — it gets hairy, quickly

Concept sketches and wireframes

From the process flow, I sketched paper wireframes. They include the basics, but also some ideas to test out.

A sheet of pen sketches of messaging screens. Along the top: the conversations list with an unread count, a conversation with date and unread-messages dividers, the same conversation with the keyboard open, and a new conversation that shows what the other person is interested in above the message field. Below: a selection state for the list, an invite to a date with activity options chips, and a screen offering ready-made replies for when you don’t know what to say, such as a polite no thanks.
EARLY SKETCHES FOR MESSAGING — including new ideas like reply suggestions (bottom) and date preferences (top)

User validation

I ran some rounds of user tests to try out low-fidelity concepts (picture), or test usability on high-fidelity prototypes.
I also leveraged our web service to A/B test some concepts; some other ideas where A/B tested straight into our Beta app.

Two paper prototype screens with cut-out, pasted-on elements and handwritten messages. On the left, a chat with Mimosa: a star in the header, annotated “or + (add to fave)”, and a heart labelled flirt next to the message field. On the right, a first message from Sara_Connor, “Moi! :p”, with two buttons at the bottom, Not interested and Reply, instead of a message field.
A FUN WAY TO TEST WITH PAPER PROTOTYPES — low fidelity, and accessible for anyone to interact with, comment and annotate

Early visuals

With the app, we also wanted to renew our brand identity. As a junior service designer, I was quite out of my depth! My mocks were visually good enough for testing the concept, but not for implementing. From there I became art director for a UI design consultant.

Four early high-fidelity screens in a plum and pink palette, in Finnish and English. The feed, with Feed, Bookmarks and History tabs, profile cards for women of different ages, one swiped aside to reveal Hide from feed and Bookmark, and a travel ad in between. A profile, REDGINGER, woman, 38, Espoo, with a large photo and a heart button. The messages list, with names, previews, dates and unread counts. And a conversation with REDGINGER about her poodle, with a 2 unread messages divider and a microphone button next to the message field.
IS IT A WIREFRAME? OR IS IT A READY DESIGN? — maybe it's neither

04 — Deliver

What I did

  • Art direction
  • Handoff high-fidelity design
  • Developer support
  • Implementation planning

Art direction

While I wasn’t anymore responsible for producing high fidelity design and refreshing the brand identity, I was in charge of directing our external designer, and supporting the developers.

Three phones on a pink-to-purple gradient, showing the new visual identity in Finnish. The feed as a list of men’s profiles in Helsinki, each with a photo, username, age and bio; the same feed as large photo cards, with a toggle between the two views; and a user’s full profile, with a photo carousel, his bio, a blue Send message button and arrows to the previous and next profile. A bottom bar carries Discover, Feedback, Conversations and Profile.
FRESH MOCKS WITH A NEW VISUAL IDENTITY — the new visual identity was implemented in the app, and also in the web service

Beta app and MLP (Minimum Lovable Product)

What I believe is pivotal for any business to succeed is to have someone, like Alice, to bring out the voice of people to the development team. […] The data Alice provided for the team was not only helpful to prioritize, but also crucial to make the service better. Her organisational and analytical skills as well as her ability to work as a facilitator to any brainstorming, makes her an unique package.

Product Owner • Treffit24

We started with a very small Beta app, fully dependent on the web service, where users could only chat (continue ongoing conversations).
We then added features phase by phase: feed, view profile, edit profile… and I made sure that the design and dev status was visible to the whole team in our space.

A whiteboard wall titled Treffit app development status, with a hand-drawn legend in the top-left corner. Printed screens are grouped into boxes drawn in green marker: sign up, feed, conversation list, conversation view, profile view, profile onboarding and profile edit, joined by arrows that follow the user’s path. Some screens are wireframes, others final designs; orange boxes and hatching mark some areas, and blue and green sticky notes carry further notes.
THE SCOPE ON THE WALL — with designs at whatever stage they were for each feature, and other annotations to show the status

“[Alice] is a great team member and always ready to help the teammates. She is one the most organized person I ever met in my life.”

Fullstack Developer • Treffit24

05 — Results

What I did

  • App analytics monitoring
  • App feedback

Steady user base

in our native iOS and Android Beta apps

Increasing engagement

over time and compared to the web service

A line chart of the Beta app’s active users, over 28 days, 7 days and 1 day, from April to the following February, with the numbers blurred out. After launch in spring, all three lines spike in June and fall back over the summer. From September they climb steadily, the 28-day line most of all, and all three are at their highest at the end of the chart.
ACTIVE USERS — showing the growth of our Beta app

Unfortunately, when the mother company Aller Media, sold the product and team to City Digital in January 2020, priorities changed and the app never made it out of Beta.

06 — Learnings

Anti-personas

I briefly worked on personas - mainly from a marketing approach. I realised that it was useful for us to also build personas of users we wanted to get rid of (the pervs, the stalkers, the scammers), to design a user experience that would turn them off.

Project management

We had good team dynamics, yet project management was difficult as we had 2 to 4 developers working simultaneously on at least 3 products at the same time, all the time. I worked closely with my Product Owner to try different methods and tools.

07 — Team

Core team

Alice • Service UX Design | 2 to 4 Developers | Product Owner | Marketing Manager

Accountable

Head of Digital Services

Contributors

UI Designer

Consulted

Data Analysts | Tech Lead | Suomi24 team (Product Owner, 2-3 Developers) | Dating service users

NextFlying window to happiness →