AYO

Case Study

AYO

AYO is a comprehensive, integrated platform designed to create a connected ecosystem for employees, employers, and service providers. It brings together a unified management of services, resources, workplaces, employee needs, community, finances, and team.

Figma UI Design Web
AYO platform mockup

Overview

AYO is a comprehensive, integrated platform designed to create a connected ecosystem for employees, employers, and service providers. It brings together a unified management of services, resources, workplaces, employee needs, community, finances, and team. The platform enables streamlined day-to-day HR management. By integrating all the necessary services and apps in a server integrated ecosystem.

UI/UX Designer

Role

Figma

Tool

8 weeks

Timeline

Problem Statement

Every employee is expected to handle multiple non-work functions, having to manage money across financial transactions, and maintain a productive workplace connection. With dispersed tools and disconnected digital systems, employees face inefficiency, poor communication, and fragmented workflows that reduce productivity and engagement.

Goal

  • Create a seamless ecosystem for multiple user types including employees, employers, and service providers.
  • Create a modular ecosystem for accounting services, analytics, and administration.
  • Design a solution that is component-based, consistent, and scales across the platform.

Typography and Color

#0B0E1A

Primary Color

#F5C518

Primary Accent

#F0E8D4

Primary Color

#FF2D6B

Text Color

#43C47A

Success

#5B8CFF

Info

Poppins

Primary Typeface

Poppins

Regular

The quick brown fox jumps over the lazy dog.

Thin / Light weight

Secondary Typeface

Semibold

Medium

The quick brown fox jumps over the lazy dog.

Medium / Thin weight

AYO screen 1
AYO screen 2

Design Process

A systematic approach to creating user-centered solutions

01

Research & Discovery

User Interface Mapping Market Research Persona Development
02

Ideation & Wireframing

User Journey Mapping Information Architecture Low-fidelity Wireframe User Flow Diagrams
03

Visual Design

Design System Creation Style Guide Interface Interaction Development Design Review
04

Testing & Iteration

Usability Testing Design Refinements Development Handoff
AYO screens
AYO screens
AYO screens
AYO screens
AYO screens
AYO screens
AYO screens
AYO screens
AYO screens
AYO screens
AYO dashboard