loader image
View my resume
App Icon-UltraSync

UniteVibe

Fan Vibes Unity Application

UniteVibe’s mission is to harness the power of fans to transform the fans and the world. UniteVibe’s grander vision is to provide the #1 platform for people to connect and direct their intentions for good.

They want to build a mobile app measuring and displaying fan unity and emotions in live events to connect fans all around the world and make the home fans part of the game.

  • My Role
    UX Designer, UI Designer
  • Platforms
    Mobile Application & Web Admin
  • Used Tools
    Figma, Illustrator, Photoshop

Our Target

Since UniteVibe is a pioneer app capturing users’ emotions, it is vital to guide first-time users to understand how their vibes would be recorded in real-time. Furthermore, we must turn this data-collecting process into a unique and exciting experience to attract more users.

Design Process

01.

Kick-off Meeting

  • Create a shared understanding of the project’s background
  • Come to a mutual agreement on work methods, timeline, and scope of work to ensure everyone is on the same page
02.

Research

  • Get to know the client and their potential customer groups
  • Research similar products on the market or websites/applications having similar features
  • Research design trending, technical involved
03.

Brainstorm

  • Work closely with the client and business analysts to clarify requirements, identify pain points, and propose respective resolutions
  • Define sitemaps, user roles & permissions matrix, and user flows
  • Sketch some low-fidelity wireframes if needed and continue to research everything related
04.

Wireframing

  • Sketch out high-fidelity wireframes
  • Build simple prototypes to test user flows
  • Review with the stakeholders, gather their feedback and update the wireframes if needed
05.

UI Option

  • Set up a mini workshop to brainstorm ideas and create a mood board
  • Define designs concepts and apply them on some key screens to offer design options
  • Run review sessions with the client to bring out the final UI style
Selected wireframe
UI Option #1
UI Option #2
06.

Visual Design

  • Continue with a few improvements to complete the design concept
  • Create a style guide and a UI components library
  • Apply the style to the entire project and create essential icons and illustrations
Mockups are scrollable
Previous
Next
Previous
Next

How I resolve the problems

#1
How to guide first-time users and avoid any confusion

  • Obviously, guides are required; make it as straightforward as possible with some illustrations
  • Simple is the key. Don’t let users take too many actions. Because the recording process requires placing a finger on the camera, one hand is not free. Therefore, it’s better to use a time countdown to move to the next step instead of any user actions.
  • Demo Sync is offered to users, helping them practice any time to get more familiar with sync sessions, allowing them to get ready for actual sessions.

#2
How to find a balance between performance and appearance

This is what the customer expects:
  • They requested a world map showing the real-time united emotions based on users’ GPS
  • The world map is divided into a large number of points and the light intensity of each point is calculated by the number of users in that area and their vibe results
Don’t go too far, here is what actually happened:
  • Reduce the number of area sampling to increase performance. Based on customer’s agreement and technical advice, we divide world map into 6 areas
  • For simple, each pin has a fixed location on map and use size and color to present different intensities for them.

Let’s connect

It would make my day to hear from you.
huuthai37@gmail.com
/huuthai37
© 2022 Huu Thai