Sandy Galabada

Sandy Galabada

Product Designer

Case Study 02

Overhaul & Facelift for Algowinner

Transforming Financial Trading with Intuitive UX, Mobile Apps, and AlgoOracle Chatbot

Introduction

Algomerchant, an online trading platform, sought to enhance user experience, improve usability, and modernize their web application, Algowinner. As the UI architect, I embarked on a design thinking journey to lead the UI revamp for the web application, conduct comprehensive UX research and design for the mobile app, and create an exceptional UX design for their landing page. The ultimate goal was to attract and retain users while aligning the mobile app with the existing web application.

Industry

Fintech SAAS

Client

Algomerchant 🇸🇬 

Project Type

User Research, Product Design, UX

Roles

Branding, Researcher & Designer

Tools

  • ionicons-v5_logos
Website

Business Problem

In 2017, Algomerchant, recognized the need to enhance user experience, improve usability, and modernize their web application, Algowinner. As the UI architect, the project started with a thorough understanding of Algomerchant’s vision, goals, and the existing pain points in Algowinner.

Stage 1: starting the project with empathizing

The initial stage involved a detailed analysis of Algomerchant’s business objectives and the specific requirements for the UI revamp, mobile app, and landing page. Understanding the trading domain was essential to grasp the complexities of the financial market and users’ trading behaviors.

To gain insights from stakeholders, I conducted meetings with Algomerchant’s key team members, including product managers, developers, and customer support. These meetings helped align the project objectives with the organization’s vision and priorities.

Algomerchant Apps Structure

Understanding the Business Problem

The next step was to initiate the user research phase, which played a pivotal role in understanding the needs and pain points of Algomerchant’s target audience. User personas were developed by conducting interviews and surveys with existing users, market research, and competitor analysis.

Defining Project Goals

With a deeper understanding of Algomerchant’s goals and user needs, the project’s primary objectives were defined:
  1. Web Application UI Revamp: Simplify navigation for an intuitive trading experience. Enhance data visualization for real-time stock analysis. Modernize the overall look and feel for a visually appealing interface.
  2. Mobile App UX Research and Design: Ensure seamless navigation for on-the-go trading. Present clear and concise information catering to different user levels.Provide interactive features for efficient portfolio management.
  3. Landing Page UX Design: Effectively communicate Algomerchant’s brand message and value proposition. Showcase products and services to cater to diverse user needs. Encourage conversions through optimized user engagement.

Personas Development

Based on user research insights, I created four user personas to represent different segments of Algomerchant’s target audience. Each persona had distinct backgrounds, pain points, and goals, providing valuable insights to align the designs with users’ preferences.

User personas

2-7
3-6
4-5
1-7

Stage 2: Define

UX Matrix

Next, I constructed a UX matrix that identified the key tasks, pain points, and goals of each user persona. This matrix served as a roadmap for the UX redesign, guiding us towards implementing solutions that would directly address user needs and pain points. By aligning our efforts with the UX matrix, we aimed to create an intuitive and efficient HRM solution that resonated with our target audience.

PersonaTaskDifficulty (1-5)Importance (1-5)UX Related IssuesProposed Solutions
Alex TanAnalyzing Stock Trends35Complex Navigation and Data VisualizationImplement intuitive data visualization and simplify navigation.
Linda LimManaging Virtual Portfolio44Time Constraints and Portfolio ManagementDesign user-friendly portfolio management features.
John LeeMobile App Compatibility34Compatibility Issues and Outdated UIDevelop a responsive and modern UI for the mobile app.
Sarah WongLearning the Basics of Trading23Overwhelming Data and InformationProvide guided onboarding and educational resources.
We have Listed down the following problems that needs to be addressed:
  1. Complex Navigation: Users find it challenging to navigate through the web application’s multiple sections, such as Home, Virtual Portfolio, Chart GPS, and Auto Invest. Simplifying the navigation flow is essential to enhance user experience.
  2. Outdated UI Design: The current UI design of the web application feels outdated and lacks a modern and visually appealing look and feel. A UI revamp is necessary to improve aesthetics and align with current design trends.
  3. Data Visualization: Users face difficulties in effectively analyzing stock trends and real-time data visualization on the web application. Improving data visualization will help traders make informed decisions efficiently.
  4. Mobile Compatibility: The web application’s compatibility on mobile devices needs improvement. Users desire a seamless experience while accessing the platform on-the-go through their smartphones and tablets.
  5. Virtual Portfolio Management: Users find it challenging to manage their virtual portfolios efficiently. Streamlining the process will enable users to track their investments effectively.
  6. Onboarding Process: The mobile app’s onboarding process needs to be user-friendly and straightforward to attract new users and guide them through the app’s features.
  7. Responsive Landing Page: The landing page needs to be responsive across various devices to provide a consistent user experience and encourage conversions.
  8. User Engagement: The current web application lacks interactive elements and engaging features to keep users interested and active on the platform.
  9. Learning Resources: Novice traders need better access to learning resources and educational content to understand the basics of trading.
  10. Brand Message Communication: The landing page should effectively communicate Algomerchant’s brand message and value proposition to visitors.
By addressing these issues at the Define stage, the design team can set clear objectives and focus on creating user-centered solutions that cater to the needs and preferences of Algomerchant’s target audience.

Stage 3: Ideate

Web Application UI Revamp

The ideation phase involved brainstorming sessions and design workshops to generate creative ideas for revamping the web application. Wireframes and design mockups were created to visualize potential solutions and iterate on the designs based on user feedback.

Mobile App UX Research and Design

Ideation for the mobile app centered on creating an intuitive user experience. Key ideas included implementing a user-friendly dashboard, personalized notifications, and a seamless onboarding process. The goal was to provide a smooth and efficient trading experience for users like John Lee, who sought to access the platform on their mobile devices.

Landing Page UX Design

For the landing page, ideation focused on optimizing user engagement and encouraging conversions. Design decisions included a compelling headline, interactive elements, and a responsive design. The landing page needed to effectively communicate Algomerchant’s brand message and value proposition to visitors, like Sarah Wong, who were seeking a user-friendly platform to learn and trade.

Stage 4 : Prototype

Functional prototypes were developed for both the web application and mobile app designs. The prototypes brought the designs to life and allowed users to interact with the proposed features and interfaces. User testing sessions were conducted to gather feedback and validate the design decisions.

Web Application UI Revamp

The functional prototype of the web application was tested with real users, including Alex Tan and Linda Lim, to gauge the usability and effectiveness of the revamped UI. Their feedback and insights helped identify areas of improvement and informed further refinements to enhance the user experience.

App home

App Home
App Home

Chart GPS

Chart GPS

Chart GPS - Dark Theme

Chart GPS - Dark Theme

Mobile App UX Research and Design

User testing with the mobile app prototype provided valuable insights for users like John Lee and Sarah Wong. The interactive prototype allowed them to explore the mobile app’s features and navigation, ensuring that the design met their expectations and preferences.

Login

Mobile UI
Login

Charts on Mobile

Chart on Mobile app

Set Up Alerts

Set Up Alerts

Watchlist & portfolio

Watchlist & portfolio

Place an Order

Place an Order

Landing Page Design

The clickable prototype of the landing page was tested with potential users to understand their interactions and reactions. Their feedback guided the final adjustments to optimize the landing page’s user experience, increasing the chances of conversions.
Before vs After
Landing Page
Website
Chart on Mobile app

Stage 5: Test and Implement

Web Application UI Revamp

User testing with the prototypes guided the final design decisions for the web application, mobile app, and landing page. The approved designs were implemented into the live platforms. The web application UI revamp was launched, providing a fresh and user-friendly interface for traders like Alex Tan and Linda Lim.

Mobile App Launch

The mobile app was developed with the approved design and launched on app stores. Users like John Lee could now seamlessly access Algowinner on their mobile devices, enhancing their trading experience and increasing engagement.

Landing Page Launch

The landing page was integrated with Algomerchant’s website, effectively communicating the brand message to visitors like Sarah Wong. The optimized user engagement and conversion elements encouraged users to explore Algomerchant’s services further.

Results and Conclusion

The implementation of the UI revamp for the web application, the user-centric mobile app design, and the engaging landing page led to significant improvements for Algomerchant. The company witnessed a remarkable increase in registered users by 37%, daily logins by 66%, and a 55% increase in sales value after redesigning the brand and applications.

The design thinking approach, starting from empathizing with users and defining design goals to ideating creative solutions, prototyping, and testing with real users, played a pivotal role in delivering exceptional user experiences that drove business growth. Algomerchant successfully transformed its platform into a user-friendly and visually appealing online trading ecosystem, attracting both seasoned traders like Alex Tan and newcomers like Sarah Wong.

By prioritizing user needs and preferences, Algomerchant achieved significant business outcomes, establishing itself as a leading online trading platform in the competitive market. The success of the UI revamp, mobile app, and landing page demonstrated the power of design thinking in creating user-centered solutions that resonate with the target audience and contribute to business success. Through continuous user research, iterative design processes, and a focus on meeting user needs, Algomerchant continues to thrive and evolve in the dynamic world of online trading.