Custom Mobile App Design Process: From Prototyping to UX Optimization for PLAYWRK

ux/ui, product design  ⁕  8 nov 2024

ux/ui, product design  ⁕  8 nov 2024

Overview

Timeline: August 2024 - September 2024
Team: Client: Co-founders, INSAIM: Designer and Project Manager
Client: PLAYWRK is an early-stage app designed for networking through gaming, inspired by the "Random Coffee" concept. It connects users based on shared career and gaming interests.

Challenge

Our task was to update PLAYWRK’s branding and design the app. The client provided clear technical specifications and desktop version drafts to help guide the structure.

About PLAYWRK

Company:
PLAYWRK merges gaming with professional networking. Users connect over multiplayer or co-op games (Call of Duty, Warcraft, Dota, Counter-Strike, and more) based on shared career interests. The app creates a casual, fun environment for fostering professional relationships.

Product:
PLAYWRK employs a "Random Coffee"-style approach, with key features including:

  1. Onboarding: Collects user info like name, gaming preferences, professional status, and social profiles (LinkedIn, Instagram).

  2. Main Screen: Shows daily match availability at 11:00 AM.

  3. Matching: Based on language, gaming preferences, platform, region, and professional background.

  4. Profile: Displays game preferences and location.

  5. Chats: Open with matched users, requiring mutual confirmation within 24 hours.

  6. Referral Program: Users earn rewards by sharing referral links or adding "playwrk.xyz" to their Steam username.

Approach

Research and Prototyping
We analyzed an indirect competitor, The Breakfast, an app that matches users with similar interests. This helped us shape the wireframes and screen flows, providing a foundation for how PLAYWRK would function.

Visual Design
Initially, the client had no specific visual direction, as their focus was on functionality. We proposed a dark theme with bright accents to reflect the gaming industry. After reviewing two concepts, the client chose the dark theme over the purple option.

Iterative Development
We first designed the onboarding flow to give the client a clear vision of the app’s overall look. Once approved, we developed wireframes for each section, progressively adding design elements.

Collaboration
We communicated primarily through Telegram, using Loom videos and Figma comments for feedback. The client was highly engaged, making the process smooth and efficient, with both sides being on the same page throughout.

Development Support
Using the Shadcn UI design system, we avoided the need for a separate UI kit. Our role involved linking screens and preparing presentations for the development team, while the client handled development.

Challenges

The main challenge was gaining the client's trust in our ability to deliver a high-quality product. However, after the first presentation of the app concepts, their concerns were resolved.

Key Takeaways

  1. Trust professionals and delegate tasks effectively.

  2. Focus on delivering an MVP. Don’t delay release by perfecting every detail—test ideas with users early.

Client Feedback

Here’s what PLAYWRK’s team had to say:

“We hired INSAIM DESIGN to create the UX/UI for our app, focusing on user-friendliness and engagement. They handled key screens like onboarding, profile, and chat, and integrated important features like match preferences and game platform selection.

The team communicated with us through virtual meetings and messaging, delivering everything ahead of schedule. User feedback during testing was very positive.

What stood out the most was their proactive approach and creative ideas from Alina, the UX/UI designer. Communication was smooth, using Loom and Figma comments. Overall, they exceeded our expectations.”

A pixel hurt standing for a like button
10
3D illustration of a yellow rubber duck

Get exсlusive content right
in your inbox

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
brief