My role:

UI design through end-to-end process

Teammates:

Negin
Elnaz
Pegah

Tools:

Figma

Duration:

Sep-Nov 2024

Platform:

Website

Introduction:

Mastering UI Design: From September to November 2024, I took on an exciting challenge—a UI design masterclass focused on Figma for Professionals. Over three months, I deepened my skills and learned to design at a professional level.
One of the highlights was working on VRS (Voice Record Speak)—a project that pushed me to think purely in terms of UI. Unlike most projects where UX and UI evolve together, this time, the UX phase was already done. My job was to take that research and turn it into a clean, engaging, and functional interface.
It was a great exercise in trusting the data, making smart design choices, and refining my ability to create visually compelling user experiences.

What is VRS?

Voice:

The heart of every podcast is the voice behind it. VRS is designed to let those voices shine with a clean and modern interface.

Record:

Every podcast starts with a recording, and VRS makes discovering them effortless with sleek visuals, custom branding, and an intuitive design.

Speaks:

Podcasts are about storytelling, conversations, ideas worth sharing. VRS creates a space where these stories not only get heard but also stand out in a crowded digital landscape.

Color Palette:

We chose a trendy purple as the primary color, giving the design a bold and modern touch. To enhance the look, we went with a dark theme, using deeper background tones that matched our vision. This combination created a sleek, accessible, and visually striking design that we were proud of.

Colors Used:

#931DBC – Vibrant purple for a modern, standout feel.
#FF5418 – A bold accent color for contrast and energy.
#1C0C32 – A deep, rich background color for a dark theme.

The final palette not only looked great but also helped maintain strong visual hierarchy and accessibility.

Typography:

We initially chose Roboto, but after further evaluation, we switched to a combination of Lora and Inter. This decision was based on several factors: readability, accessibility, versatility, and a modern yet friendly feel. We also wanted fonts that paired well together and complemented our logo and brand identity. The final choice gave VRS a polished, cohesive look while maintaining strong legibility and performance.

Grids & Spacing:

We maintained consistent spacing and grid structures to ensure a balanced, well-structured layout.

By establishing these design foundations, we created a cohesive, scalable, and user-friendly system that gave VRS a distinct and professional feel.

Home Page

Categories Page

Podcast Page

Episode Page

Profile Settings Page

This section allows users to edit their profile, manage notifications, account settings, privacy, and payments—all in one place.

Subscribed Page

The Personal Hub page allows users to manage podcasts, track updates, and revisit past listens, featuring Favorites, Playlists, New Episodes, History, and Likes for a seamless experience.