From Confusion to Clarity: Designing Hyppe’s Real-Time Transaction System

Revamping the transaction feature in Hyppe to improve internal transaction monitoring, enhance the user experience during transactions, and adapt to the new coin-based transaction ecosystem.

Company Name

Company Name

Company Name

Hyppe

Industry

Industry

Industry

Social Media

Role

Role

Product Designer

Platform

Web & Mobile App

Status

Released

Aboout Hyppe

Hyppe, a indonesian local social media app that provides new experiences for urban youth sharing their everyday moments with everyone. By using Hyppe, creators can create their own monetization opportunities by sharing content or receiving rewards and protect their privacy and personal information on social media.

Challenge

  • Difficulty in Transaction Monitoring
    Internal users experienced difficulties understanding transaction records when monitoring company revenue through the console dashboard.

  • Suboptimal Transaction Experience
    The transaction flow in the Hyppe application was not fully optimized, causing confusion during the buying and selling process.

  • Transaction Ecosystem Change
    Hyppe changed its transaction system from using Rupiah to Coins as the primary currency for buying and selling. This shift affected the overall transaction ecosystem and several transaction interfaces.

Pain Point

+10 User feedback Collected on Playstore and App Store from Q2 April - June 2023:

  1. Users want to filter transaction history.

  2. Users can’t see transaction details.

  3. Users want to see updates to their digital balance.

  4. Users want to know their withdrawal status.

  5. Added coin balance [New Feature].

Goals

  • Identify gaps and deficiencies in Hyppe's transaction process by comparing it with similar applications and competitors.

  • Review the risks and limitations within Hyppe’s transaction system.

  • Redesign the transaction dashboard based on user needs.

  • Adapt the transaction design to the new coin-based transaction ecosystem.

  • Simplify the transaction record interface to better support business monitoring.

Technical Constraint

During the process of revamping the transaction feature, several technical constraints that me and my team experienced and affected the design process:

1. Dependency with Other Features
The transaction feature is connected to many other features within the Hyppe platform. This means every change must consider its impact on the existing system.

2. Different Understanding Across Teams
At the beginning of the project, there were differences in terminology and understanding between the Product, Design, and Engineering teams regarding the transaction feature. This caused longer discussions during the alignment process.

3. Transaction Data Complexity
This feature includes several components such as tracking, invoice numbers, and transaction activities that must be properly recorded across all platforms.

4. System Consistency
Every transaction activity needs to be displayed consistently across the platform, requiring alignment with the existing system architecture.

Solution

1. Redesigning the Transaction Dashboard
Simplified the transaction dashboard interface in the console to help internal users monitor revenue, transaction activity, and financial records more clearly and efficiently.

2. Providing Detailed Transaction Information
Added a transaction detail page that displays important information such as invoice number, transaction status, timestamp, and related activities.

3. Improving Transaction Status Transparency
Enhanced visibility of transaction statuses, including withdrawal status and balance updates, allowing users to track their transactions more clearly.

4. Integrating the New Coin-Based Transaction System
Adapted the transaction design to support the new coin-based ecosystem, including the addition of a coin balance feature so users can easily monitor their digital balance.

Research & Finding

Gather User Feedback

To address this issue, the Product Manager and I gathered user feedback from our community and conducted interviews to collect more specific data.

Competitor Analysis

In this project, I conducted a Competitor Analysis to research and understand the value of competing products. I identified gaps in their offerings, gathered valuable insights, and compared their user journeys. By using this method, I aim to design a product that is both successful and well-received when it launches in the market.

User Persona

Using the research and problem identification methods, I developed User Personas to better understand user goals at the start of the design process.

Use Case

To understand the complete transaction ecosystem, We mapped the key user interactions within Hyppe's transaction system.

Final Outcome

After understanding the problem and conducting competitor research, I created a UI that addresses the user issues with the transaction feature.

Additional Design Highlights

To further support the transaction revamp, several additional screens were designed to improve transaction transparency, monitoring, and usability across the Hyppe ecosystem. These designs complement the main improvements by enhancing supporting features within the transaction experience.

Mockup Previews

Conclusion

Reflection from this project highlighted how complex transaction systems require not only clear interface design but also a deep understanding of the product ecosystem behind them. By aligning user needs, business requirements, and technical constraints, the redesign was able to improve both the transaction experience for users and the monitoring capabilities for internal teams.

Through simplifying transaction visibility, introducing clearer status indicators, and adapting the interface to the new coin-based ecosystem, the revamp created a more transparent and structured transaction experience across the platform.

This experience reinforced my belief that effective product design is not only about improving interfaces, but also about bridging user needs, system complexity, and business goals into a cohesive experience.

Lessons Learned

This project provided several key insights about designing complex transaction systems:

  • Clear communication between Product, Design, and Engineering is essential, especially when working on features connected to multiple systems.

  • Understanding the transaction ecosystem as a whole is critical before proposing design solutions.

  • Small improvements such as transaction filters, status clarity, and balance visibility can significantly improve user trust.

  • Designing financial features requires a strong focus on transparency, clarity, and system consistency.

This experience reinforced the importance of aligning design decisions with both user needs and business ecosystem changes.

Create a free website with Framer, the website builder loved by startups, designers and agencies.