How I Designed a Ticket Booking Landing Page for an Event
This project is done for my 10k Designers cohort Assignment 2
The Story behind this problem Statement Chosen
My second assignment was an exciting one. My task was to craft a Single page Landing website. It is an opportunity for me to hone my visual design skills in Figma, and delve into the world of problem-solving and design processes.
For this project, I chose to ‘Design a Landing Page Website for Empower Women in Spiritual Through Worship Workshops by a “group of women worship leaders“. The reason I chose this problem Statement is, that I spent most of my time hearing these women worship leader’s songs, and I got goosebumps to be like them. So I have thought and dreamed of training myself like this event with these wonderful talented leaders. with this dream in my mind, I crafted this landing page for my assignment. This Event and project is completely hypothetical for my assignment. It’s not real. Join me as I explore this web design endeavor!
Final Design
Here is the final design teaser of my project.
Problem statement
I chose the problem statement Design a Landing website for X to do Y” among the 120 Prompts.
Here My “X” is “Women Worship Workshop(WWW) Event” and my “Y” is “ The Group of Worship Leaders”
Future Outcome of WWW:
“The vision for this worship workshop is to facilitate profound encounters with God’s love, power, truth, and the presence of the Holy in the personal life and the Churches. The goal is to draw people closer to God through the act of singing and playing musical instruments, understanding that God’s presence is the catalyst for transforming lives. It believes in unveiling the latent potential within women, ensuring it isn’t obscured by misconceptions or doctrine.”
Project Duration
14 Days
My Role
Research, Design Decision, Strategy, Branding, IA, Visual Design
My Design Process
Research(Mood Boarding based on visual inspiration, Jobs to be done List Insight from Persona, Problem Statement) <->IA -> Sketch <-> User Testing <-> Low-Fi Visual <-> Branding <-> Style Guide <-> Testing <-> Hi-Fi Visual <-> Prototype
Research
Persona
The primary target audience for this event → 15+ years women
Persona 1 → Age: 15, India. her parents want her to become a better worship leader in the future and now, and want their wards to have a better relationship with God.
Persona 2 → Age: 18+. India. The church wants it already its existing worship team to perform better than now in its church service.
Jobs To Be Done List
- Promote the Workshop event by providing the exact details, such as date, time, location & guests attending
- Sell tickets, by attracting visitors with the perks & fun at the event
- show the importance of attending this workshop.
Mood board
I was struggling to pick a vibe for the visual in the initial. So I was drifting a lot in the mood board. Then, As my mentor guide, I started to stick to a few visual theories initially, and based on that I collected the mood board. So that I was able to develop an eye for exactly how I wanted the move forward with the visuals.
I sorted the inspiration in a unique way which helped me to make better decisions. It is like the following: 1. Visual Inspiration, 2. Pattern Inspiration, 3. Content Inspiration -> Creators, Competitor, 4. CTA Inspiration.
Information Architecture
After the research, I got pretty good insights for IA, and then taking down the data on the page helped a lot to lay out all the information clearly according to priority.
Sketches
After the IA Part, I just poured my all of ideas for the solutions into the paper.
I took more iterations of my thinking loop in the sketch itself.
Branding
Iterations for a Simple characters Logo for this event.
Style Guide
I wanted to have holiness, calmness, and energy with a sense of strong pursuing feeling toward Godly kind of vibe. My Mood board helped me, how the competitors have used it.
Color Choices
I did a few iterations with my chosen color. Finally, I ended up with the below colors.
Typography choices
I chose “Helvetica Neue”. It offers a clean and neutral appearance that can convey a sense of purity and reverence.
Visual Design
After numerous rounds of refinement, I underwent over 10+ iterations for the final UI, primarily focusing on adjustments to my Information Architecture (IA) and wireframes. Here, I’ll guide you through several pivotal iterations that played a crucial role in shaping the final design.
Hero Section
I wanted to make an engaging hero section as it is the first thing visitors see and can significantly impact users’ decisions to explore further. So having the following things in mind, I started to craft the hero.
Headline & Sub-headline: So I Made a concise and compelling headline that grabs attention and communicates my value proposition.
Call-to-Action (CTA): Included a prominent and action-oriented CTA button that directs users to the next step.
Visual Elements: Used high-quality images or graphics that resonate with my event.
Some remarkable Feedback from the above iteration
- The location, time & event time counter needs to be more prominent and it would be good if it were in the hero section instead of a separate section to be visible in the first view.
- The Headline can be shortened and crisp.
- CTA should be very prominent to take action.
- The Visual part should be about the event instead of the event trainer.
The Improved Version
“Why this WWW” Section
while I started designing, I ensured that visitors, whether new or returning, have to quickly grasp the gain out of it and feel motivated to explore further.
Some remarkable Feedback from the above iteration
Emotional Connection: I used Images and stories of the trainers that were particularly highlighted for their ability to evoke emotions, making the event feel more personal and appealing.
Anticipation Building: I’m overjoyed to share that the feedback has resonated with my intent to effectively build anticipation. Users have personally expressed their excitement about the trainers and their details. This reveals that the section has successfully stirred curiosity and anticipation, motivating them to eagerly mark the event on their calendars.
Clarity, Understanding, and Engaging: So that I can streamline the decision-making process for potential attendees.
The Improved Version
“Schedule“ Section
This is the cornerstone of user engagement. I ensured that It has to provid a clear, intuitive, and visually appealing for attendees to access event timelines effortlessly.
Some remarkable Feedback from the above iteration
Clarity in Presentation: The schedule is presented in a visually clear and organized format, ensuring users can quickly grasp the sequence of events.
Visual Appeal: Have in mind of making it not only functional but aesthetically pleasing
Speaker Connection: Attendees are forming a strong connection with event speakers through the detailed profiles. The personal touch provided by visuals and bios has not only increased familiarity but also elevated the perceived value of the expertise these speakers bring to the event.
The Improved Version
“What You Can Expect” Section
This section is strategically designed to be a gateway to a seamless and enjoyable event experience. This section serves as a comprehensive guide, offering attendees a preview of what awaits them and empowering them with the information this event needs to maximize their participation.
Some remarkable Feedback from the above iteration
Anticipation Soars: Users have expressed a significant surge in anticipation after exploring the “What You Can Expect” section. The carefully curated highlights and engaging visuals have successfully set the stage for an exciting and memorable event experience.
Community Building: The “What You Can Expect” section has unintentionally fostered community building. Users have started sharing their expectations and excitement, creating a buzz around the event that extends beyond its schedule.
The Improved Final Version
“Testimonies” Section
“This section has to emphasize the real impact of the project on users. By sharing authentic experiences, we not only build trust but also create a sense of camaraderie within the community” With this in mind started to work on the testimonies section.
Some remarkable Feedback from the above iteration
- Testimonials have to be presented in an engaging visual format, combining compelling quotes with user photos or avatars.
- Visual elements have to enhance the emotional connection, making the testimonials relatable and reinforcing the authenticity of the shared experiences
The Improved Final Version
FAQ and Footer
Figma Prototype
Lesson Learnt
- Stick on to the Project time frame. Set a time boxing for every task to be done.
- Learnt the power of Iteration and feedback loop.
- Creating a branding and and eye for aesthetic sense
- Creating the initial Mood boarding for choosing apt visual for the project
It’s a wrap!
🚀 Ready to elevate your design team? Let’s connect!🤝 am currently open to Product Designer opportunities. Find me on LinkedIn or Twitter, and let’s chat about the exciting possibilities ahead.
👏Tap that clap icon up to 50 to show your love!👏 I would love to read your feedback in the comments.
👋🏻Thankyou!
