Design system / BV Go user experience improvements

[bstiawan]

Goal:

• Triggering more interaction instead of expecting users to go to the page they want to see

Structure:

• Messages, instead of separate page between notifications and messages, we combine them as messages page. The message could be:
  • About guests (message, payout, updates, check in, etc)
  • About property (newsletter, league updates, non guest related notifications)
  • Support message (upcoming feature) Each of those message will still link to the relevant page.

Performance:

• Delayed real-time
  • Any data that have been fetched from the server is stored locally, when user opens it, the old data will be used first. This will remove any loading process.
  • Once the page opens, new data will be fetched in the background with small indicator. When new data arrives, the page will be updated (without refreshing the entire page). Reference app with similar approach: Slack, Coda, Twitter.
  • Apply this method for page: Dashboard, bookings, my property, messages, profile.

Readability

• Typeface
  • We are changing to a more readable typeface with thinner line but clean spacing
• Icons
  • Custom icons for brand consistency
  • 
• Spacing
  • Fixing size, empty space, and borders
• Colors
  • Refining better use of colors to emphasize simplicity and better visibility on important points

[bstiawan]

Projects:

• [ ] Quick load and delayed refresh
  • [x] Design figma
  • [ ] Development, implement to all pages
• [ ] Readability
  • [ ] Design system (typeface, spacing, color)
  • [ ] Development, implement design to 5 main pages
• [ ] Navigation
  • [ ] Design for navigation icons and animation
  • [ ] Development
• [ ] Messages page
  • [ ] Create new design
  • [ ] Development

[bstiawan]

Development principles

• We will create a reusable UI component, starting from the simplest ones, as a variable that can be set and affect all components
  • typeface
  • size
  • space (padding, margin, gutter)
  • elevation
• This should be implemented in alignment with the design provided in Figma
  • When we want to make changes to the UI, we only need to change the variable

[krisnaBukitVista]

First iteration: BVGO user experience improvements

Description

This project focuses on addressing readability issues in the platform by enhancing the UI design. The primary goal is to improve user experience through faster data access, seamless updates, and a more readable, visually appealing interface. The scope includes applying design updates across critical user pages: Dashboard, Bookings, My Property, Messages, and Profile.

Problem

Readability Issue The platform's readability is affected by the choice of typeface, iconography, spacing, and colors. Users may find it challenging to navigate the interface, leading to inefficient workflows and a lack of brand consistency.

Solution

• UI/UX Readability Enhancements
  • Typeface Update: Replace the current typeface with a more readable one that features thinner lines but retains clean spacing.
  • Custom Icons: Design custom icons to enhance brand consistency.
  • Spacing Adjustments: Refine empty spaces, borders, and sizing for a more balanced layout.
  • Color Refinement: Apply a simpler color scheme that highlights important content while maintaining visual clarity.

Measurement metrics

• readability feedback: Collect qualitative feedback on the new UI

SLA

• Readability Feedback: Collect qualitative feedback on the new UI, with a target of 85% positive responses on readability improvements.

[katibpasha]

Final Evaluation

Property Owner's side

• All main pages (dashboard, booking, my property, inbox, and menu) have implemented new design system
• section today di dashboard, inbox, and menu belum implement font baru
• Navigation icons have updated and aligned with the new design guideline
• My property page's performance has been enhanced by API chunking

Staff's side

• All main pages (dashboard, booking, my property, inbox, and menu) have implemented new design system
• section today di dashboard, inbox, and menu belum implement font baru
• Navigation icons have updated and aligned with the new design guideline
• My property page's performance has been enhanced by API chunking

Partner's feedback

You can see in this list: https://docs.google.com/spreadsheets/d/1aW_tr0hdARfUJNT1T9W0raq91FTX45MquRr1p_JjI9o/edit?gid=0#gid=0

We have sent out message blasts to 30 partners. Out of that number, only 14 people responded. All 14 responses provided positive feedback. However, we received the following notes from them:

• The current review feature displays outdated data, whereas it should show the most recent review data.
• When users try to exit the app using the back button on mobile, a black blank screen appears instead.

Other Finding not Related to Milestone

• When opening newsletter details from notifications, the back button doesn't work.

[Vidiskiu]

Overall Point: 5

Functional Complexity: 0.5

The changes requested are mostly UI/UX based, with minimal changes to functional complexity as they mainly involve altering how information is presented rather than significant changes to business logic.

Technical Complexity: 1.5

While there are not many architectural changes, the issue outlines a need for local storage of data and background updates which introduces moderate technical complexity due to the requirement for efficient data management and possibly some changes to the existing data flow.

UI/UX Complexity and Impact: 1.25

A substantial UI/UX overhaul is indicated, including changes to interaction design, typeface, icon design, spacing, and color usage which will have a significant impact on the overall user experience.

Testing and Quality Assurance: 1.25

The UI/UX changes will require thorough testing to ensure consistency across different screens and conditions. The real-time data feature mentioned will require cross-platform and performance testing to validate the new approach.

Risk and Dependencies: 0.5

Some risks are involved in ensuring UI consistency and performance, but the issue does not mention external dependencies or significant uncertainties.