Back

Dating app MVP

Set and validate the product concept via a design sprint workshop and build the landing page for the pre-launch marketing campaign.

Project background

Problem statement
People are having a hard time finding their perfect match (romantic) and want a new way to inform their decision-making process.
Sprint questions
  1. How important to simplify the onboarding process to have more people to jump on?
  2. How useful to have a virtual wing-man(woman) while people have a conversation with their matches?
MVP goal
  1. Introduce astrology aspect early in the process
  2. Simplify the onboarding process
  3. Implement a conversation tip helper seamlessly
Project
Fig.2: Sprint process
Project
Fig.1: General process

Understand points and diverge ideas

Onboarding Process
  • Too many steps to go through
  • The onboarding process is generally tasteless
  • One way street communication - users don’t see any positive feedback until they finished
Chatting with a Match
  • Talking some you just met isn’t easy
  • The conversation starter/aid might be useful - e.g., icebreaker
Project
Fig.3: Idea sketch and vote 1
Project
Fig.4: Idea sketch and vote 2
Project
Fig.5: Idea sketch and vote 3
Project
Fig.6: Idea sketch and vote 4

Oversee user's journey

Critical path
  • Map out the overall flow of end-to-end user experience
  • Use this to see the cause and effect flow in the step by step process
  • Make sure those new ideas aligned with the final goal of users
Project
Fig.7: Critical path

Converge solutions

Conversational onboarding process
  • Utilize chatting method
  • Keep all input in one place
  • Direct feedback
  • Conversational interaction
  • Share the taste of astrology aspect
  • Shorten the interaction
  • Minimize the requirement
Project
Fig.8: Storyboard 1
Project
Fig.9: Storyboard 2
Project
Fig.10: Storyboard 3
Project
Fig.11: Storyboard 4
Project
Fig.12: Storyboard 5
Crystal ball - conversation aid
  • Utilize personal information
  • Add a gamification method
  • AI-ish wing-man/woman?
  • An icebreaker/chat starter kit
  • Suggestion maker based on the match’s status
Project
Fig.13: Storyboard 1
Project
Fig.13: Storyboard 2

Validation scenario

Assumptions Board
  • Breakdown sprint question align with sprint deliverables
  • Add validation method e.g., prototype test, interview
  • Add measurement of success
Project
Fig.14: Sprint assumptions board

Prototype

Onboarding interaction
  • Mimic a ‘chatbot’ to demonstrate conversation
  • Provide an astrological feedback during the process
  • Minimize the interaction gap between the steps
Project
Fig.15: Interaction
Project
Fig.16: Interaction sequence 1
Project
Fig.17: Interaction sequence 2
Project
Fig.18: Interaction sequence 3
Project
Fig.19: Interaction sequence 4
Chat with match
  • Add a conversation starter for ice-breaking
  • Users can opt-out and switch back on as they need
  • Keep the ‘crystal ball’ concept as a topic suggestion feature based on the match’s general information
Project
Fig.20: Interaction
Project
Fig.21: Interaction sequence 1
Project
Fig.22: Interaction sequence 2
Project
Fig.23: Interaction sequence 3
Project
Fig.24: Interaction sequence 4

Art directing

Key conceptual words
  • Moon > moon sign > night > Arabian night
  • Stars > starry night > dark > dark hair
Mood board
  • Collecting visual concept based on keywords tree
  • Utilize image search tools to validate the common acceptance of visual concepts
  • A mood board can be a good guideline for a color pallet
Project
Fig.25: Mood board
Concept illustration
  • Hand-drew concept sketch for early validation (Fig.27)
  • Vectorize illustration
Project
Fig.26: Vectorize image process
Project
Fig.27: Hand-drew sketch
Project
Fig.28: Vectorize image process

Implementation

Landing page
  • SVG animation for starry night scene on hero section
  • Parallax scrolling animation
Project
Fig.29: Scrolling animation
Project
Fig.30: Hero
Project
Fig.31: About
Project
Fig.32: How this works 1
Project
Fig.33: How this works 2
Project
Fig.34: How this works 3

Contribution

Product strategy
  • Participate product sprint process to validate the business concept
  • Refine the priority list with scoping workshop
UI / visual design
  • Creating a high-fidelity UI mock-up
  • Creating an interactive prototype using Figma
  • Directing overall visual concept
  • Illustrate hero image and visual elements
UX design
  • Conduct user testing to validate the MVP concept