Innovative Investment Championship event by Finin — a UI/UX case study.
✍In this particular case study, I will elucidate the step-by-step process involved in creating a landing page and mobile version for a website that hosts an Investment Championship event. I shall delineate my approach towards the design process and the underlying reasoning that guided the implementation of various design decisions.
A Little bit of a Background
📕To provide a bit of context, as part of the 2nd assignment for the figcloudgroup program, we were all assigned a specific niche with the objective of designing a website for a hypothetical event in that niche. Our task required us to highlight the reasons why someone would want to attend the event, provide comprehensive details about the event and its timeline, and ultimately encourage people to register. We had the option of designing the concept for an existing organization or creating a new brand altogether.
📝In my case, my assigned niche was Finance and Investment, despite having no prior experience in this area. However, I embraced this challenge and decided to take it on.
About the Project
This project involves designing a landing page for the Smart Investment Championship 2021, a competition organized by Finin that targets young individuals with expertise in finance and investment.
The competition aims to raise awareness and generate interest among students regarding smart financial management in today’s technology-driven world. Using gamification or a competition is an effective way to engage young minds and educate them.
The championship assesses the investment knowledge of the participants and offers opportunities to work with the Finin organization.
For those who are short on time, a brief video showcasing my design for the landing page is available.
Having provided you with some background information, I would now like to take you on a journey through my design process.
The Research Process
Before delving into the visual design aspect, it was crucial to gain a deeper understanding of the niche and determine how organizing an event could benefit both the company and its users. To achieve this, I conducted research with a focus on the following event outputs:
“What is the Business Goal?”
The event should aim to create value in terms of achieving certain goals. This could involve educating more people about finance and investment, encouraging them to invest with the sponsor company, and potentially generating fresh ideas for potential improvements.
“Which type of event can I organize?”
Once I established the business goals and user expectations, the next step was to determine the type of event to organize. The assignment listed several options such as conferences, meetups, workshops, virtual events, and hackathons. However, given that many finance and investment companies already organize conferences and workshops, I felt it would be more intriguing for such companies to host an investment competition.
To validate this idea, I reached out to individuals with a finance and investment background and conducted polls on my social media accounts. As expected, people generally liked the idea of an event, and the prospect of a championship with a winning prize money proved to be the icing on the cake.
As part of my research process, I also sought to identify potential organizations that could effectively meet the business goals and user expectations. I searched for a company with an intriguing mission and vision in the niche.
In my quest, I stumbled upon Finin, a neo-bank startup with a mission to enable people to invest their money in a smarter way. Upon further investigation of Finin’s social media presence on other platforms, I discovered that they were one of the sponsors of a Finance Literacy Championship organized by Streak.
This discovery gave me the confidence that Finin was interested in similar events and could potentially consider organizing championships in the future.
Fun Fact about Finin: It is a fintech startup that aims to provide simpler and smarter ways of saving, managing, and investing money. As India’s first consumer-facing neobank, they refer to their customers as “Finionaires!”
What are the user’s expectations?
When considering attending an event, users typically evaluate the potential benefits they can derive from investing their time. Therefore, it’s crucial to identify the potential outcomes that a championship event can offer from the user’s perspective.
What are the possible benefits for users attending a championship event?
These benefits could include education, awareness, career prospects, or recognition. Given that this is a championship event, targeting students and job seekers could be a viable option. Users could participate as individuals or in groups of up to four.
Competitor Analysis
Before delving into the visual design, I was intrigued to know more about how others approached similar events. I embarked on a quest to research a few landing pages for similar events. This provided me with a better perspective on what I could incorporate in my design and what were some common issues in the existing ones. I noticed a few problems, which I have listed below:
💡 Some landing pages were text-heavy and lacked good visuals, leading to a disconnection from their mission and vision.
💡 Some had good visuals but lacked information and design hierarchy.
💡 Others had great visuals and provided ample information but failed to include action items, resulting in a lack of direction, leaving users clueless about their next move.
Information Architecture
Once I had explored other websites in the industry to gather ideas on content, themes, and formats that could effectively meet the user’s needs, I began to develop the website’s content architecture.
Wireframe
Once I had a clear understanding of how to structure the website’s content, I began the design process by sketching out rough paper wireframes and low-fidelity wireframes to create a skeletal view of the site.
AIDA Framework
My landing page needed to have a story to communicate a clear message and direct users towards the desired goal.
As a principle that heavily relies on the ways people perceive online pages, I chose to go for the AIDA approach.
AIDA the acronym stands for A = Attention, I = Interest, D = Desire, A = Action, which is the exact flow of emotions a user should feel when he or she lands on the page. This way, we can ensure that a visitor will not only like the page but will also be motivated to interact with the page.
Visual Design
After completing my research on the niche and having a rough idea of the wireframe and information architecture, I proceeded with the next step in the design process, which I like to call “the moment of reveal”. This was the time to start with the visual design, but I knew that it would not be the last step since the design process is a continuous loop of iterations.
Color palette and Typography
For the color palette, I used the colors used in the Finin app and the website to maintain the aesthetic.
For the Typography, I went for the font which is used in the Finin website. I went for Avenir Next.
1. Attention
Hero Section
According to the AIDA framework A stands for Attention. The hero section of the web page grabs the first attention. This section should explain what the website is all about.
Navigation : The navigation section of the landing page serves as a directory of the content of the website.
The first glance at the left side- pins your focus on the company’s logo. This develops trust among the users that they are interacting with the genuine organization. It’s important for the users to readily identify the event’s organizers.
I included the most important sections on the page, which will help the user take action. Single-page navigation methodology has been used.
- As the website loads the first visuals are of the ‘Home’ section. Users can navigate back to the home section by scrolling up or clicking on the logo (which is the Hero section of the webpage).
- The second navigation link is ‘About’. This link navigates to the About championship section of the page.
- The third navigation talks about the ‘Judges’. The link navigates to “Meet the Judges” section of the Page.
- The fourth navigation link is ‘FAQs’. The user can easily switch to the last section by clicking on this link and resolve their doubts.
💁 I also created a prototype to navigate to each section of the page from navigation.
Home : The basic idea behind this section was being to the point. It had to be simple as well as interesting. I sub divided this section to maintain hierarchy.
I designed this section keeping the following questions in mind :
- What is the page all about? — Header and Illustration
- Whether they’ve come to the right place and What key benefits do they get? — Value proposition
- What should they do next? — CTA
💡 The Nielsen Norman Group says “It takes people 10 to 20 seconds to decide whether to leave a web page or not. “
2. Interest
Why should you participate
Building interest is very crucial for a landing page especially when the page is not static but requires the user to act. Here comes the second letter “I” of our AIDA framework.
In this section, the main goal was to help the user make informed decisions whether they want to be a part of this program or not.
I included this section this section just after the hero section so that:
- I can quickly talk about the users Interest .
- Users can build desire to scroll down to read what the page has to offer.
About Championship
This section talks about the championship more descriptively. It comes with a subheading talking about the type of audience it is for.
- It is there to answer the questions which would arise in the user’s head after getting interested in the championship.
- This part of the webpage answers the questions for eligibility criteria, last registration date, and venue for the event.
- This section also contains images that shows how the program was conducted last year, to arouse more interest in the audience.
What will I win
“The deepest principle in human nature is the craving to be appreciated” — William James
- The user is thrilled with prizes distributed to the winners. The goal of this section is to motivate users by awarding them for their skills.
- The first prize winner is given the maximum weightage with the highest prize, followed by the second and third prizes.
What are the rounds
This section explains the steps involved to win. Again, it comes with a subheading. The event has three rounds with dates mentioned ,starting with registration and finally ending with winning prizes.
Meet your Judges
The user is introduced with a glimpse of the mentors they will be judged by.
- Each of the cards includes the picture of the judge, name, and their current position.
- The user also gets to explore their social media profiles by hovering over the cards. (I also added it in the prototype.)
Schedule
In this section, I describe the two-day agenda with the chronology of events. This section is required to track the itinerary of the program. The schedule can further solve the doubts regarding the time to be invested for the different championship rounds.
- The event not only offers competition but also creates a networking environment for its users.
- It also offers opening notes and closing notes from the CEO and head of design of Finin.
- The user can check the schedule and register for the championship with one of the call to action (CTA) designed in this section. I also added another CTA to download the schedule brochure of the event.
- There is an interactive prototype for different schedules for two days. The user can switch between the two days on a single page. This has been so provided, as not to overwhelm the users with too much information to grasp at once. The user has the option to concentrate on a single day then move to the next day.
3. Desire
Testimonials
I designed this section to build desire among the users. Here comes the third step of the AIDA framework — Desire. This section uses social proof, to show that the service the page provides is trustworthy and is worth the time investment.
This section is crucial for building the confidence among the users to take action on the CTA.
4. Action
The final Countdown
Right after building confidence through the testimonial section, we head to the countdown section.
After we have built enough desire, the user has to take the final action.
- A catchy line “The Championship begins in” and a timer clock is introduced with the days and time left to register for the program.
2. This is used to raise FOMO (fearing of missing out) inside the users to quickly think and take action.
3. Finally, I added a CTA to register for the event.
Frequently Asked Questions and Post Queries
Although most of the questions get answered, there might be some doubts, questions, and queries for the event. The user can clear their doubts from the FAQs section and can also reach out and post their queries in case of further doubts.
Footer :
The Footer section on the page has a logo of Finin and other social media links to check out their presence.
Mobile Version and Figma File
Here is a link showcasing mobile version of the design. I kept the designs similar to the web version except few required places like I used hamburger menu for navigation.
Some sections are displayed vertically to improve visualization.
Please feel free to go through my figma file to get a sneak peek of my design process and iterations I made throughout.
My Key Learnings throughout the process
Designing a landing page allowed me to think in a different way. Each and every section is created to add value to the users and business as well. This was my first design project and I learnt a lot throughout the process. Here is a gist of my takeaways :
😄 Never underestimate the power of research. The initial processes research, IA and wireframe are meant to make the rest of the process a lot easier. Each and every process of design has its own importance.
😁 The design process never really ends, we can just hope to improve it enough to meet user expectations. Its a roller coaster of iterations. We can assume that improvement in work reflects how much you have learnt. Moral of the story is, never feel intimidated with the amount of time and iterations it takes for completion. At the end, its all about personal growth.
✌️ Your design should speak on its own!!! It should be smart enough to explain everything to the user. Always think on the users perspective.
✊Last but not the least, keep your files organized… LOL!! 😜
And That’s all for now!!
I would like to thank figcloudgroup team and all the mentors for giving me this opportunity to work on this assignment. It was fun learning and improving.
I am currently looking for Product Design roles. Feel free to reach out and connect. I would be happy to help.
Till then hit me up on LinkedIn and my website.
I hope you liked my work. Please do give a clap of appreciation!! (PS. You can give upto 50 claps) 👏
