Project information
- Category: Web design
- Client: EGfin-Company (Singapore)
- Project date: 15 May, 2023
- Project URL: www.figma.com
The EGfin Stock Market Fantasy Game Website UI/UX design project aims to create an immersive and user-friendly website for a daily fantasy quiz based on the National Stock Exchange (NSE). The website rewards weekly leaderboard winners who participate in a daily quiz consisting of 5 multiple-choice questions (MCQs) with 3 options each. Users are also required to predict the top gainer/loser across indices/stocks to compete in the weekly leaderboard and have a chance to win rewards. The design focuses on delivering an engaging and informative experience for stock market enthusiasts.
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, investors, and individuals seeking a gamified learning experience in the field of finance. 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 have an opportunity to win rewards based on their performance. User flows: User flows were designed to outline the steps users take from landing on the website to registering, accessing the daily quiz, making predictions, viewing leaderboard standings, and claiming rewards. Pain points and opportunities: Pain points, such as complex quiz formats or lack of clear instructions, 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, investors, and individuals seeking a gamified learning experience in the field of finance. 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 have an opportunity to win rewards based on their performance. User flows: User flows were designed to outline the steps users take from landing on the website to registering, accessing the daily quiz, making predictions, viewing leaderboard standings, and claiming rewards. Pain points and opportunities: Pain points, such as complex quiz formats or lack of clear instructions, were identified as opportunities for improvement.
Information Architecture
The information architecture of the EGfin website was designed to provide intuitive navigation and easy access to various features. Key elements of the information architecture include: Site structure: The website features a clear and organized structure, including Home, Quiz, Leaderboard, Rewards, About Us, and Contact sections. Navigation design: The navigation menu is prominently displayed, allowing users to easily switch between different sections of the website and access relevant information. Content organization: The content is structured logically, with the quiz questions, leaderboard standings, reward details, and additional resources categorized for easy exploration.
The information architecture of the EGfin website was designed to provide intuitive navigation and easy access to various features. Key elements of the information architecture include: Site structure: The website features a clear and organized structure, including Home, Quiz, Leaderboard, Rewards, About Us, and Contact sections. Navigation design: The navigation menu is prominently displayed, allowing users to easily switch between different sections of the website and access relevant information. Content organization: The content is structured logically, with the quiz questions, leaderboard standings, reward details, and additional resources categorized for easy exploration.
Wireframes and Prototypes
Wireframes and prototypes were created to visualize the layout and interactions of the EGfin website. 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 website. 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 and provide stakeholders with a realistic preview of the website's functionality and flow.
Wireframes and prototypes were created to visualize the layout and interactions of the EGfin website. 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 website. 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 and provide stakeholders with a realistic preview of the website's functionality and flow.
Visual Design
The visual design of the EGfin website focuses on creating an appealing and informative user experience that reflects the stock market theme. Key elements of the visual design include: Color palette: A gradient color scheme incorporating shades of blue and green is used to evoke a sense of trust, stability, and financial growth. The colors reflect the stock market environment while adding a touch of excitement and engagement. Typography: A combination of legible and modern typefaces is selected to ensure easy readability of quiz questions, leaderboard standings, and other textual content. Imagery and graphics: Relevant stock market visuals, such as charts, indices, and financial symbols, are incorporated to enhance the visual appeal and create a cohesive stock market fantasy game theme.
Color palette The visual design of the EGfin website focuses on creating an appealing and informative user experience that reflects the stock market theme. Key elements of the visual design include: Color palette: A gradient color scheme incorporating shades of blue and green is used to evoke a sense of trust, stability, and financial growth. The colors reflect the stock market environment while adding a touch of excitement and engagement. Typography: A combination of legible and modern typefaces is selected to ensure easy readability of quiz questions, leaderboard standings, and other textual content. Imagery and graphics: Relevant stock market visuals, such as charts, indices, and financial symbols, are incorporated to enhance the visual appeal and create a cohesive stock market fantasy game theme.
Typography
Font Family
Exo
Aa Aa Aa Aa
Font Family
Exo
Aa Aa Aa Aa