Fars Innovation Center
A platform that empowers students through competitive learning, fostering innovation and skill development.
Designed with:
Role:
UI/UX Designer
Date:
Feb 2021 - Jul 2021
Highlights:
Focuses on student learning and competition
Teamwork and project-based learning
Skill development and portfolio building
Rewards and recognition
Main Challenges:
Balancing Fun and Education: Designing a user interface that is engaging and enjoyable while still promoting learning and knowledge retention.
Integrating Competition and Teamwork: Creating a seamless experience for both individual and group competition, including functionalities for learning and managing group projects.
Building User Trust: Encouraging users to register and participate in competitions by establishing trust and demonstrating the platform's value proposition.
Process:
Inspired by fostering a competitive learning environment, Fars Innovation Center took a user-centric approach to its website. Here's the journey:
Student Needs First: Interviews and user mapping uncovered student goals (skills, teamwork) and challenges (limited engaging learning, team competitions).
Learning & Collaboration: The platform offers both individual learning resources and tools to build and manage teams for collaborative projects.
Fun Meets Education: Balancing fun and learning was key. The UI should have, bright colors, and clear and interesting visuals to engage young users.
Building Trust & Participation: Success stories, clear registration, and highlighting rewards are crucial to attracting and retaining students.
User Research:
In the first step, I made a survey. The survey results indicate a strong potential user base for potential users (particularly students aged 18-22). There is a clear demand for a platform that addresses the challenges of online learning, such as the lack of engaging materials and motivation. Students are interested in opportunities to apply their skills, compete with others, and collaborate on projects. The key features of the platform should be ease of use, access to learning materials, a variety of competition options, clear rewards and recognition systems, and collaboration tools.
Empathy Map:
After the persona, I made the empathy map. This empathy map dives into potential users' thoughts, feelings, and actions. It reveals their frustrations (unclear competition structures), desires (real-world application), and motivations (collaboration, friendly competition). Understanding these aspects helps design a website that caters to their needs.
Persona:
According to the results of the survey I made my persona. Amanda, a computer science student, craves real-world coding experience. She thrives in online communities, seeking collaboration and friendly competition to hone her skills.
User Story:
Based on the persona and empathy map, I made the user story. User stories capture the desires, keeping the design team focused on what students like Amanda need to succeed in their learning journey.
Problem Statement:
Then there is the problem statement. A problem statement clearly defines the issue a product aims to solve. It focuses on the user's needs and the gap in the current market. This helps prioritize design solutions that address those challenges.
Goal Statement:
For the next step, I made a goal statement because it helps me to focus on users' needs and guides design decisions. It defines success metrics and aligns stakeholders for a winning user experience.
User Journey Map:
In the ideate phase, we have the Fars Innovation Center user journey map that takes us on Amanda's experience. We see her thoughts, feelings, and actions as she navigates the website - from initial to becoming a regular, engaged user. It helps designers understand her pain points to create a smooth rewarding experience and motivate her.
Sitemap:
In the first step of the prototype phase, I made the sitemap. This sitemap visualizes the layout, showing key sections like learning resources, competition listings, and user profiles. It helps users navigate efficiently and find the tools they need to fuel their learning journey.
Low-Fidelity Prototype:
Think of the Fars Innovation Center prototype as a sketch of a house. It's a basic version of the website, focusing on layout and core functionalities like competition browsing or team formation. It helps test user interaction and identify areas for improvement before investing in a polished design.
High-Fidelity Prototype:
Landing page optimization
Landing page optimization is like fine-tuning the Fars Innovation Center's storefront window. By testing different designs and messages, we can ensure they grab students' attention, clearly communicate the value proposition, and entice them to enter and explore the exciting learning world within. This testing happens during the design process to create a landing page that converts visitors into engaged users.
Clear Communication: I implemented clean and readable fonts, with better contrast for ensuring users can clearly understand the platform's value proposition.
Brighter and Bolder: I reduced the dark color scheme for a more vibrant and visually appealing layout. Improved contrast between elements makes the page easier to navigate.
Active Projects Take Center Stage: Gone are the inactive projects section. Students only see ongoing exciting projects they can participate in.
Eye-Catching Cards: The project cards received a makeover! We enhanced their design to attract more student attention and encourage clicks.
Focus on Action: Detailed process descriptions are not attracting attention (change color while hovering). This keeps the landing page concise and focuses on prompting user action.
Visual Appeal: I streamlined project images and added engaging visuals to enhance the overall user experience.
Informative Footer: I included a contact section and additional visuals, providing users with valuable information and resources.
Impact:
Enhanced skill development
Improved career readiness
Expanded learning network
Streamlined skill acquisition
Greater access to learning opportunities
Key Learnings:
Design a goal-based platform for a healthy competition
Design clear navigation & competition structures
Familiarity with gamification
Design collaboration tools (team formation)