How I got my first ‘landing page and dashboard’ off the ground!
A rundown of my experiences with learning, visualising and creating an event landing page for Upstox, an online investment brand of RKSV Securities.
For the second assignment, as part of my 10kdesigners journey, we were to design a landing page and dashboard for any event of our choice (webinar, conference, expo, or anything out of the box!) in the niche assigned to us for a pre-existing or a made-up brand.
Although a visual design challenge with the goal to be as creative as we could, we were to use the design thinking process to do our research, create the information architecture, wireframes and finally, the web, mobile-web and dashboard design for the event. It was quite challenging as we all essentially had to create the same end product i.e., a landing page but due to the large number of niches and, of course, individual variances, there was a lot of space for creativity and individuality which made it very exciting.
With my blog, I hope to share my thought process, experience, and most importantly, lessons learned with anybody who requires a helping hand!
Project background
Prior to the assignment, I had little understanding of and interest in the niche (Finance and investment) that had been assigned to me. Despite the fact that we were given the choice of changing our niche, I opted to stay with it as:
- It would enable me to explore realms/fields that I would not otherwise be exposed to. 😖
- Allow me to broaden my horizons. 🤓
- It would be a fantastic learning opportunity for me. 😉
- At the very least, learn about the industry. 😁
- It would be a fantastic learning experience for me to learn how to deal with tasks that I may or may not be interested in doing. 📖
- Due to prior responsibilities, I started this task a week after the brief was provided, and so, I was determined to make up as much ground as possible. 🕑
So how did I get started with the process?
Many of us adhere to pre-determined procedures or routines, which, in my opinion, may result in a highly redundant and monotonous problem-solving technique. As Abhinav Chhikara also suggested, you may use them as frameworks and do what is required and necessary to arrive at a beneficial conclusion rather than doing it to cross it off a list. As a result, I developed my own technique based on the ‘design thinking methodology’.
1. Defining Personal goals
By setting my personal project goals, I felt more driven and responsible to give my all and stay accountable, allowing me to fulfil my growth objectives and become 1x better than I was the day before. A few goals that I hoped to achieve from this assignment are as follows:
- As I don’t know much about my niche, I need to understand and learn about it. 😁
- Understanding, attempting, and learning web and mobile web design (never attempted before). 🤓
- To learn how to create a dashboard and how to utilise it (never attempted before). 💻
- To develop visually appealing visuals designs that are both beautiful and useful. 🙇♀️
2. Creating a roadmap
As I was working under a time constraint (as are most other projects), creating a roadmap for how and when I wanted specific deliverables to be worked on was extremely helpful in completing the assignment on time helping me get past the loop of pointless productivity.
3. Research
This was definitely one of the most difficult stages for me as I had very little knowledge in this sector. To produce a well-designed product with a deeper grasp of it than just surface level, I began by learning the basic industry terminologies. For example, what are the many sorts of investing possibilities, and how does one build a portfolio?
I next moved on to conducting extensive assignment-specific research, which I split into three areas to ensure that I covered all bases:
- Content research
I attempted to comprehend the types of events, the types of individuals who are interested in attending these events, previous events and highlights, their aims and expectations from such events, and so on. This allowed me to have a deeper knowledge of the niche as well as the potential attendees. For example, who may attend an event in my specialty? Stakeholders, firm partners and leaders, Non-Banking Financial Companies (NBFCs), Micro Finance Institutions (MFIs), and so on. - Competitor research/analysis
In order to give my event a brand identity it might take on, I compared, analysed, and comprehended the aims, missions, and visions of other firms, especially startups in this sector who could or already organise events in this niche. I decided to use Upstox as the brand identification for my event as:
- It is a trusted platform,
- Guides and educates people to make the right investments,
- The people are benefited as the company is transparent about its role,
- They are focused on empowering people,
- They are committed to make investments easy and accessible to everyone.
**Edit: They made a couple of changes to their brand identity (colours, logo, buttons, etc) post the completion of my assignment.😖**
I also went ahead and defined the brand voice, taking into account of the demographic for whom the event was curated (youth), and aligning it with the company’s business goals. For example, because this event was designed for young adults interested in learning about investment and finance, I believed that using a voice that is not too serious, technical, or friendly would be more inviting and engaging for our users, allowing them to connect and reciprocate more effectively.
Post this, I was able to define the event as I had all the necessary information for an event in this niche that is not only unique to its kind but also adheres to the brand’s values and goals, allowing it to gain more traction and, as a result, meet its business objectives.
“A Finance fest by Upstox to educate, create awareness, and empower the youth (under 25), to manage their finances better and invest.”
3. Design research/inspiration
Like the great painter Pablo Picasso once remarked, “Good artists copy. Great artists steal.”
“All excellent designs are adaptations of previously inspired works.”
I drew my inspiration from a variety of sources (Landingfolio, Behance, Dribble, Awwwards, and so on) by taking screenshots of features, designs, layouts and components that I liked. For example, screenshots of interesting layouts for the Footer, FAQs or Speakers sections, design inspirations from other event websites etc.
I also learned about what a dashboard is, what it should have, and what metrics my event dashboard should/could include. For example, as part of the pre-event metrics, it could include numbers of registrations, sign-ups, the sources from where they’re coming in, drop-offs etc to better plan and allocate company resources (business model) and make efficient and effective designs.
4. Information architecture
Now that I had a plethora of information at my disposal, it was time to organise it into readily digestible chunks. I reorganised all of the data in the order that the user would need it in order to complete the intended objective, viz, registering for the event.
While doing so, I took into account a few user concerns by answering the following questions for the user before they could even query it:
- Is this event for me?
- Can I trust this company and their intentions?
- Can I get better offers someplace else?
- 5W’s and a H (what, where, when, why, who and how) of the event.
This organisation of information can help the user feel much more comfortable, build attraction, validation, credibility and excitement to attend the event which in turn would reinforce them to take the necessary action- registration!
The various sections of my IA for the landing page
- Hero section
The idea behind the structure of my IA was to offer a basic description of what the event is, who it is for, and when and where it is, when the user first comes on my website. I also made sure to include a CTA button right here with details of the event fee (which was free!) to compel and convince people to register for the event. - Social Proof
After a lot of study and my gut feeling, I decided that if my user wasn’t already convinced, the next set of facts that needed to be presented should be some social evidence to build validation, excitement and most importantly FOMO (Fear-of-missing-out) by adding aspects such as the number of estimated attendees, the number os speakers or sessions or the number of sponsors. - USP of the event
I believed that being open about the company’s and event’s goals would help people establish trust and take action if they were interested. I attempted to do this by capitalising on the USP and reinforcing it by including a CTA. - Perks of attending
The event’s perks enable users comprehend what they’ll get out of it, especially once the company and event goals have been discussed. This aids people in recognising and answering the question, “Is this event for me?” - Speakers
As the event was a conference, knowing the speakers ahead of time is critical because their names, titles, and topics of discussion may help attract huge crowds. - Schedule/Agenda
The dates, times, and speaker schedule support individuals in planning and making necessary changes to their personal calendars in order to accommodate the event. - Other reinforcing agents
Sponsors, testimonials, FAQs, and ways to contact the organisers were all provided. This encourages consumers to reconsider and persuade them if they want to attend the event, whether they can trust the firm and its objectives, and whether it is relevant for them.
I did the same for the dashboard as well keeping in considerations its users (company employees- marketing, social, advertising etc, event organisers and so on…) and their needs from a dashboard.
5. Hands on time! Designing 😁
As this assignment was a visual design assignment, the real work only began when I started designing the landing page. 😉
- Rough sketch
I began by sketching up a basic flow structure utilising my IA and all of the ideas I had gathered during the research process. This made it easier for me to see what and how my final landing page would appear or feel by allowing me to work around wire-framing. - Wire-framing
I took the rough sketch and IA to come up with a concept for my unique and authentic landing page. This allowed me to create early revisions, which saved me a lot of time. - High Fidelity Designs
I could work on the final designs with more clarity now that I had my wireframes. I began by establishing the style guide, which covered the colour and text styles, as well as gathering illustrations and pictures for my landing page.
I then went onto actually designing the website. Not going to lie, this was definitely one of the most difficult tasks as creating a landing page requires a lot of thought and imagination. Despite having a plethora of examples and inspiration pieces, the ultimate design concept only came to me after a few trials. At @10kdesigners, I received frequent feedback from my peers and mentors. This not only allowed me to make the required adjustments sooner rather than later, but also helped me learn about the intricacies of web design, the principles and guidelines that could be followed to create feasible, functional and easily graspable designs (Check the comments on Figma to view the changes in detail). - Prototype
Since the assignment was to create just the landing page for the event, there wasn’t much to prototype except for the chatbot feature and the FAQ dropdown menu. But nonetheless, Click here to play with the prototype 😉
I was unable to work on a handful of dashboard ideas due to a time constraint on the project. But, in order to build it, I followed the procedures outlined above and requested feedback from my mentors and peers on the same.
My learnings!
- Work smarter, not harder. There are two sorts of productivity: useful and illusionary. Don’t fall into the latter’s trap.
- Personal objectives help you stay focused and determined throughout the work and complete it to the best of your ability.
- Get as much FEEDBACK as you can. Because what you believe or feel is correct may not come easily to them, the more input you collect, the more you’ll be able to help your product’s customers. I was lucky to have a constant feedback loop of mentors like Yugandhar Bhamare, Chethan KVS and Akshata Chandra, who helped us with whatever was on our minds around the clock.
- Designing a landing page is definitely not an easy game. Practice and iterations, on the other hand, can make all the difference. Don’t let the process intimidate you. Just get started and see where it takes you! You’ve got this 😁
- Fun note: I started this assignment not knowing where it was heading as I had minimal interest in this field but now I’m more than excited to equip myself better and to learn about the same! This assignment turned out to be an eye-opener to many more opportunities and niches that I could explore. “Never stick to your comfort zone if you want to get ahead in your life".
Closing notes
Show some love to my first Dribble shot on this very project! 😉 And for those interested in a more detailed look at the project, here is a link to my Figma file or check out the visuals at my Behance!
Please do not hesitate to contact me via the comments area or my social media accounts if you want further clarification, explanation, or want to drop in any feedback!
Until next time, keep designing 😁
