top of page

Overview

Improving the user experience of an existing app

Problem

Due to its outdated navigation bar, the existing version of the app has very little in the way of accessibility and is clumsy to navigate. I was also able to identify that the home screen, browsing, and video player were the places with the least amount of design and a revamp is also needed for the overall appearance and feel. 

My Role

Solo UI/UX designer

Duration

2 weeks

Project

University redesign project

Tools

Adobe XD

Main Focus

  • Improving browsability by making it clear to the user what to expect from each screen and making any essential information easily accessible.

  • Creating a simple user interface that emphasizes essential information.

Site map

sitemap-funi.png

Wireframes

wire-frames-funi.png

Home screen

The burger menu was replaced with a bottom tab bar, which allows users to quickly switch between the most important features.

home before.png
burger before.png
home after.png

The Video Experience

The existing control buttons are too small, and the color scheme makes the experience less engaging. I think it's best to keep a large tap area for key actions and make sure they're transparent so the viewer can get a better sense of what's going on.

video player before.png
video player.png

Emphasizing the play button and rearranging other key components such as the show description and the total number of episodes and seasons.

episode before.png
episodes screen.png
seasons screen.png

The Browsing Experience

The existing control buttons are too small, and the color scheme makes the experience less engaging. I think it's best to keep a large tap area for key actions and make sure they're transparent so the viewer can get a better sense of what's going on.

Browse funi.png
Browse after funi.png
search after.png

Improving Simuldub Experience

The existing control buttons are too small, and the color scheme makes the experience less engaging. I think it's best to keep a large tap area for key actions and make sure they're transparent so the viewer can get a better sense of what's going on.

simuldub before.png
simuldub after.png
coming soon after.png
bottom of page