Smart Investment Championship Event — A UI/UX Case Study.

Smart Investment Championship event by Finin — a UI/UX case study. ???? In this case study, I will articulate the process of designing the landing page and mobile version of a Smart Investment Championship website. I will explain my process of design and the logic behind the decisions implemented. A Little bit of a Background ???? For the 2nd assignment of 10kdesigners, each one of us was assigned a particular niche and the goal was to design a website for an upcoming hypothetical event. ????Our task set out the following demands — why someone would consider attending , explaining every detail of the event, along with the timeline with the ultimate goal being getting registrations. It was our choice to design this concept for an already existing organization or create a brand new identity. My niche was Finance and Investment. Even though I had no experience in Finance and Investment, I took it as a challenge and decided to go for it. About the Project The Smart Investment Championship-2021 is a competition organized by Finin for young people well versed in the fields of investing and finance. Goal: The main goal of this competition is to increase awareness and interest among students on how they can handle their finances in a smarter way in today’s tech-dominated era. There is no better way to educate young minds than increasing their involvement through gamification or a competition. Thinking out loud: The championship tests young minds’ knowledge, on investing and awards them with opportunities to work with the Finin organization. (In a hurry!!!?? Don’t worry I have you covered. Here is a short video showcasing my landing page design. ????) https://medium.com/media/d01859d0852f8dd8d2437d8d9f58d723/hrefNow that you know how it all started, let me take you through my journey and my design process. The Research Process Before diving into the visual design, it felt necessary to learn more about the niche. I also wanted to know how organizing an event could benefit any company and its users as well. My investigation revolved around the following output of the event : “What is the Business Goal? “ ???? The event should have some goals in terms of value creation. ???? This could involve educating more people in finance and investing and encouraging them to make investments with the sponsor company. ???? In the bigger picture, fresh minds can bring better ideas for some potential improvements. “Which type of event can I organize? “ Now that I had the Business goals and user expectations, I had to choose the type of event I had to organize. ???? Some options mentioned in the assignment were events involving conferences, meetups, events, workshops, virtual events, hackathons, etc. ???? There are numerous finance and investment companies organizing conferences and workshops. I thought it would be interesting for the finance companies to organize an Investment competition. ???? I connected to few people from finance and investment background and did few polls in my social accounts to what people think about this idea… Not surprisingly !! people like events and something like championship with a winning prize money seemed to be cherry on the cake. Some screenshots of my Instagram polls“Which organization can potentially organize such events ? “ I began to search for companies that can be a good fit to meet the business goals and user expectations. I was looking for an organization with an interesting mission and vision in the niche. ???? In the process, I landed upon a startup company, Finin. A neo-bank company with an aim to help invest money in a smarter way. ???? Digging deeper into Finin’s social media presence at other platforms, I came across a Finance Literacy Championship being organized by Streak, and Finin being one of the sponsors. This was a moment I knew for a fact that this organization has taken interest in such kind of events and can potentially consider organizing championships in future too. ???? Finin Fact: Finin is a startup-based Fintech company, which aims at smarter and simpler ways of saving, managing, and investing money. It is India’s first consumer-facing Neobank. The cool thing is they call their customers– Finionaires! Finin Web And Mobile Version“What does the User Expect ?” The user would weigh the outcome of the time they will invest in attending the event. Right?!! “What can be a potential outcome for a championship event from the user’s perspective? “ ???? It can be related to education, awareness, career opportunities, or recognition. Since this is a championship event, why not organize it for students and job aspirants. User can either form a group (maximum 4) or play individually. Competitor Analysis Before getting into visuals, I was curious to know — “How did others do it?” — I went on my voyage of searching about few events for landing pages. This actually gave me a better direction on what I can include for my design and what were some common problems in the existing ones. I l

Smart Investment Championship Event — A UI/UX Case Study.

Smart Investment Championship event by Finin — a UI/UX case study.

Smart Investment Championship by Finin — A UI/UX Case Study.

???? In this case study, I will articulate the process of designing the landing page and mobile version of a Smart Investment Championship website. I will explain my process of design and the logic behind the decisions implemented.

A Little bit of a Background

???? For the 2nd assignment of 10kdesigners, each one of us was assigned a particular niche and the goal was to design a website for an upcoming hypothetical event.

????Our task set out the following demands —

why someone would consider attending , explaining every detail of the event, along with the timeline with the ultimate goal being getting registrations. It was our choice to design this concept for an already existing organization or create a brand new identity.

My niche was Finance and Investment. Even though I had no experience in Finance and Investment, I took it as a challenge and decided to go for it.

About the Project

The Smart Investment Championship-2021 is a competition organized by Finin for young people well versed in the fields of investing and finance.

Goal: The main goal of this competition is to increase awareness and interest among students on how they can handle their finances in a smarter way in today’s tech-dominated era. There is no better way to educate young minds than increasing their involvement through gamification or a competition.

Thinking out loud: The championship tests young minds’ knowledge, on investing and awards them with opportunities to work with the Finin organization.

(In a hurry!!!?? Don’t worry I have you covered. Here is a short video showcasing my landing page design. ????)

https://medium.com/media/d01859d0852f8dd8d2437d8d9f58d723/href

Now that you know how it all started, let me take you through my journey and my design process.

The Research Process

Before diving into the visual design, it felt necessary to learn more about the niche. I also wanted to know how organizing an event could benefit any company and its users as well. My investigation revolved around the following output of the event :

“What is the Business Goal? “

???? The event should have some goals in terms of value creation.

???? This could involve educating more people in finance and investing and encouraging them to make investments with the sponsor company.

???? In the bigger picture, fresh minds can bring better ideas for some potential improvements.

“Which type of event can I organize? “

Now that I had the Business goals and user expectations, I had to choose the type of event I had to organize.

???? Some options mentioned in the assignment were events involving conferences, meetups, events, workshops, virtual events, hackathons, etc.

???? There are numerous finance and investment companies organizing conferences and workshops. I thought it would be interesting for the finance companies to organize an Investment competition.

???? I connected to few people from finance and investment background and did few polls in my social accounts to what people think about this idea…

Not surprisingly !! people like events and something like championship with a winning prize money seemed to be cherry on the cake.

Some screenshots of my Instagram polls

“Which organization can potentially organize such events ? “

I began to search for companies that can be a good fit to meet the business goals and user expectations. I was looking for an organization with an interesting mission and vision in the niche.

???? In the process, I landed upon a startup company, Finin. A neo-bank company with an aim to help invest money in a smarter way.

???? Digging deeper into Finin’s social media presence at other platforms, I came across a Finance Literacy Championship being organized by Streak, and Finin being one of the sponsors.

This was a moment I knew for a fact that this organization has taken interest in such kind of events and can potentially consider organizing championships in future too.

???? Finin Fact: Finin is a startup-based Fintech company, which aims at smarter and simpler ways of saving, managing, and investing money. It is India’s first consumer-facing Neobank. The cool thing is they call their customers– Finionaires!
Finin Web And Mobile Version

“What does the User Expect ?”

The user would weigh the outcome of the time they will invest in attending the event. Right?!!

“What can be a potential outcome for a championship event from the user’s perspective? “

???? It can be related to education, awareness, career opportunities, or recognition. Since this is a championship event, why not organize it for students and job aspirants.

User can either form a group (maximum 4) or play individually.

Competitor Analysis

Before getting into visuals, I was curious to know —

“How did others do it?” — I went on my voyage of searching about few events for landing pages. This actually gave me a better direction on what I can include for my design and what were some common problems in the existing ones. I listed down few problems I noticed :

????Some landing pages lacked good visuals. They were too text heavy. This led to disconnect from their mission and vision.

????Few of them were good at visuals but lacked information and design hierarchy.

????Few of them had great visuals and were good with information but didn’t include action items. The page didn’t include good direction leading the users to be clueless about their next move.

Design inspirations and Comparative analysis

Information Architecture

After I had browsed through similar websites to identify content, themes, and formats that work well in the industry, I had a basic understanding of how to meet the user’s needs.

Next, I started creating an architecture of the website’s content.

Information Architecture

Wireframe

After I had a good idea of how to organize the website. It was time to start sketching. I started by sketching paper wireframe and lo-fi wireframes for a skeletal view.

Paper Wireframe
Lo fidelity wireframe

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.

AIDA Model

Visual Design

After I had done enough research on the niche. I had a rough idea of what my landing page would look like and what it would contain (from wireframe and information architecture). I went ahead with the next process of design process. The step which I like to call “the moment of reveal”.

It was time for the show to begin…

Drumrolls, please !!! ????????????????????????????????????

I started with my journey of visual design. And as most of us would think, this was NOT the last step of design process. Its a loop of iterations … the process never ends. LOL!! ????

Color palette and Typography

For the color palette, I used the colors used in the Finin app and the website to maintain the aesthetic.

Colors

For the Typography, I went for the font which is used in the Finin website. I went for Avenir Next.

Typography

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.

  1. 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).
  2. The second navigation link is ‘About’. This link navigates to the About championship section of the page.
  3. The third navigation talks about the ‘Judges’. The link navigates to “Meet the Judges” section of the Page.
  4. 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 :

  1. What is the page all about? — Header and Illustration
  2. Whether they’ve come to the right place and What key benefits do they get? — Value proposition
  3. 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. “
Hero Section — Web Version
Hero Section — Mobile Version

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:

  1. I can quickly talk about the users Interest .
  2. Users can build desire to scroll down to read what the page has to offer.
Why should you participate section

About Championship

This section talks about the championship more descriptively. It comes with a subheading talking about the type of audience it is for.

  1. It is there to answer the questions which would arise in the user’s head after getting interested in the championship.
  2. This part of the webpage answers the questions for eligibility criteria, last registration date, and venue for the event.
  3. This section also contains images that shows how the program was conducted last year, to arouse more interest in the audience.
About the Championship Section

What will I win

“The deepest principle in human nature is the craving to be appreciated” — William James

  1. 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.
  2. The first prize winner is given the maximum weightage with the highest prize, followed by the second and third prizes.
What will I win section

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.

What are the rounds section

Meet your Judges

The user is introduced with a glimpse of the mentors they will be judged by.

  1. Each of the cards includes the picture of the judge, name, and their current position.
  2. The user also gets to explore their social media profiles by hovering over the cards. (I also added it in the prototype.)
Meet your Judges section

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.

  1. The event not only offers competition but also creates a networking environment for its users.
  2. It also offers opening notes and closing notes from the CEO and head of design of Finin.
  3. 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.
  4. 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.
Schedule Section

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.

Winner’s Testimonial section

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.

  1. 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.

The Countdown section

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.

Frequently Asked Questions and Post your queries section

Footer :

The Footer section on the page has a logo of Finin and other social media links to check out their presence.

Footer section

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.

https://medium.com/media/a297e0d63f9efe13957fc22a491cdf68/href

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.

???? Getting feedback is the key to success. I am very thankful to my mentors Aishvarya Gupta ,Sagar Vijay and Akshata Chandra for guiding me through my design process.

???? 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 Abhinav Chhikara, 10kdesigners 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!! ????


Smart Investment Championship Event — A UI/UX Case Study. was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.