UX Design Process

Before going to Interfaces, first you should read the UX Process by Ghoniyyu Maulidi On This Link

High Fidelity

Translate Wireframe to High Fidelity Design for explore menu mostly is using the components & assets we have already build on Mola Design System. working closely with UX & Developer to discuss about function / style limitation.

The Icons

First step i making the explore icon, the goal for the icon is making the icons looks consistent each other on the navbar bottom & making the icon feels like exploring / discovering video.

Explore Detail Page

There are 2 thumbnails at the top (A) and bottom (B), the top thumbnail is Autoplay trailer movie / series which the first user focus to see.

Bottom displaying a movie / series thumbnail poster with a some black overlay and very low visibility to see. so users can focus with the top Trailer.

Movie / Series Player

Player have 2 function, seekbar to set exact time want to user watch or just let it flow. then mute & unmute icon button, default condition if user access this page the sound of Trailer will be muted but the trailer video still playing.

Edge Cases Trailer

If the trailer runs out, video player change to movie / series poster and replay button showed on the middle of poster.

‍

Video Short Information

Hierarcy on the short information of the video have 3 step

1. Title Video is the the Primary Information that have much bigger font size 16px than the others, Uppercase fontstyle, and White 100 #FFFFFF font colors.
2. Genre is the Secondary Information, which have 12px font size and White 70 #C1C2C2 font colors.
3. Short Description is the Support Information, which have same font size with Genre and more darker font color White 30 #838586

Limitation on Short Description

Movie / Series short description have line limitation that we’re decide, so 4 line the max line for short description. If user want to see full description they can click on Video Information area to move Video Detail page.

Spacing

So we’re deciding before the creating design system, that we used (4, 8, 16, 24 ...) px margin and spacing system to every task.

Call to Action (CTA)

So the Goals is user watching movie / series from this page, the main action we must bold / highlighted is Watch Now, otherwise Share and Favorite as secondary action.

‍

Action States

User can used Favorite if they interested with the movie / series and want save to watch later, or share movie / series to other people.

Favorite states if active, text and icon will turn into Primary Color which #1F93FF and showing snackbar to make attention to user the movie / series succesfully favorited.

Share states active, showing popup of social media options.

Interaction Preview

So that’s the end of the process, actually after approval and developer phase. we’re working closely with developer to guide and validate, to make our design and production have same look and feels to used by user that we’re deciding.

‍

Thanks for read, Cheers

UX Designer by Ghoniyyu Maulidi, Myself as UI Designer, and Sandy Syahbana as Interaction Designer