Project information
- Category: App design
- Client: EGfin-Company (Singapore)
- Project date: 15 May, 2023
- Project URL: www.figma.com
The EGfin Stock Market Fantasy Game App UI/UX design project aims to create an engaging and user-friendly mobile application for a daily fantasy quiz based on the National Stock Exchange (NSE). The app rewards weekly leaderboard winners based on their performance in answering a daily quiz and correctly predicting the top gainer/loser across indices and stocks. The design focuses on delivering a seamless and immersive experience that encourages user participation and competitiveness.
User Research
User research was conducted to understand the target audience and their preferences when it comes to stock market fantasy games. The research provided the following insights: User personas: The main user personas include stock market enthusiasts, traders, and individuals interested in learning about the stock market in a gamified manner. User goals and tasks: Users primarily aim to participate in the daily quiz, make predictions on top gainers/losers, compete in the weekly leaderboard, and win rewards based on their performance. User flows: User flows were designed to outline the steps users take from logging in to answering the quiz questions, making predictions, viewing leaderboard standings, and claiming rewards. Pain points and opportunities: Pain points, such as complicated quiz formats or a lack of engaging features, were identified as opportunities for improvement.
User research was conducted to understand the target audience and their preferences when it comes to stock market fantasy games. The research provided the following insights: User personas: The main user personas include stock market enthusiasts, traders, and individuals interested in learning about the stock market in a gamified manner. User goals and tasks: Users primarily aim to participate in the daily quiz, make predictions on top gainers/losers, compete in the weekly leaderboard, and win rewards based on their performance. User flows: User flows were designed to outline the steps users take from logging in to answering the quiz questions, making predictions, viewing leaderboard standings, and claiming rewards. Pain points and opportunities: Pain points, such as complicated quiz formats or a lack of engaging features, were identified as opportunities for improvement.
Information Architecture
The information architecture of the EGfin app was designed to provide intuitive navigation and easy access to various game features. Key elements of the information architecture include: Navigation design: The app features a bottom navigation bar or tab bar that allows users to quickly switch between essential sections, such as Home, Quiz, Leaderboard, Rewards, and Account. Content organization: The content is organized based on daily quiz questions, leaderboard standings, reward information, and user account details. Clear headings and sections help users find the information they need easily.
The information architecture of the EGfin app was designed to provide intuitive navigation and easy access to various game features. Key elements of the information architecture include: Navigation design: The app features a bottom navigation bar or tab bar that allows users to quickly switch between essential sections, such as Home, Quiz, Leaderboard, Rewards, and Account. Content organization: The content is organized based on daily quiz questions, leaderboard standings, reward information, and user account details. Clear headings and sections help users find the information they need easily.
Wireframes and Prototypes
Wireframes and prototypes were created to visualize the layout and interactions of the EGfin app. Key components of this phase include: Low-fidelity wireframes: Initial wireframes were developed to establish the basic layout, content placement, and overall structure of the app. This ensured a clear and consistent design foundation. High-fidelity wireframes: Detailed wireframes were created to refine the visual design, incorporate branding elements, and align with user expectations. Interactive prototypes: Interactive prototypes were developed to demonstrate the user interactions, allowing stakeholders to experience the app's functionality and flow.
Wireframes and prototypes were created to visualize the layout and interactions of the EGfin app. Key components of this phase include: Low-fidelity wireframes: Initial wireframes were developed to establish the basic layout, content placement, and overall structure of the app. This ensured a clear and consistent design foundation. High-fidelity wireframes: Detailed wireframes were created to refine the visual design, incorporate branding elements, and align with user expectations. Interactive prototypes: Interactive prototypes were developed to demonstrate the user interactions, allowing stakeholders to experience the app's functionality and flow.
Visual Design
The visual design of the EGfin app focuses on creating an attractive and immersive user experience that reflects the stock market theme. Key elements of the visual design include: Color palette: The color palette incorporates shades of blue, representing trust and stability, along with contrasting colors to create visual interest and highlight important elements. Typography: Legible and modern typefaces are selected to ensure easy readability of quiz questions, leaderboard standings, and other textual elements. Imagery and graphics: Relevant stock market imagery, such as stock charts and market indices, are used to enhance the visual appeal and create a cohesive theme.
Color palette The visual design of the EGfin app focuses on creating an attractive and immersive user experience that reflects the stock market theme. Key elements of the visual design include: Color palette: The color palette incorporates shades of blue, representing trust and stability, along with contrasting colors to create visual interest and highlight important elements. Typography: Legible and modern typefaces are selected to ensure easy readability of quiz questions, leaderboard standings, and other textual elements. Imagery and graphics: Relevant stock market imagery, such as stock charts and market indices, are used to enhance the visual appeal and create a cohesive theme.
Typography
Font Family
Exo
Aa Aa Aa Aa
Font Family
Exo
Aa Aa Aa Aa