Redesigning Booking Experience: Cosmofeed
My process of redesigning the existing landing page for Cosmofeed booking, addressing UI/UX issues, and implementing enhancements for a more modern, user-friendly experience with the goal of boosting conversions.
Overview
Cosmofeed’s booking page plays a major role in uniting creators and users. The goal is to foster community engagement, monetize content effectively, and organize events.
Methods Used: UX Research, Heuristic Evaluation, Wireframing, Visual Design and Prototyping
Tools Used: Figma, FigJam
Duration: 3 days (February 18, 2024 — February 20, 2024)
❓ Problem Statement
The current user interface of Cosmofeed’s landing page lacks detailed information of the services that the creators offer. The information about the creator gets lost when the end user redirects to the creator’s booking link.
End users show a preference for utilizing a desktop application over mobile, and the user experience is not optimized.
The booking page also lacks unique elements to attract attention and encourage bookings.
From the business impact perspective, the redesign will encourage users to interact more with their creators. This will further lead to a higher volumes of bookings, thus inspiring creators to pursue more content and share their learnings with the end-users.
🎯 Goals
- Identifying UI/UX issues and address them with enhanced UX
- Redesign landing page of the booking screen
- Proposing ideas to increase booking conversions and increase in engagement
🔢 Design Process
My design process for this assignment started with identifying the problem, researching about it, moodboarding, jotting down information architecture, wireframes, visual design and iterations and the final prototype. Here is the design process that I followed:
👀 Exploring the problem at a surface level
I thoroughly explored the existing Cosmofeed booking page, employing heuristic evaluation to gain deeper insights into the issues.
🏛️ Information Architecture
Crafting information architecture played a crucial role in defining the overall structure and describing the precise content assigned to each section.
✏️ Wireframes
While wireframing, I was able to visualize the user experience on how a user can navigate smoothly from one screen to another.
🎨 Design Language
Colors
I picked colors from Cosmofeed’s logo and website, thus maintaining consistency.
Typography
I used the Hind Madurai font, the same as used by Cosmofeed.
🍥 Visual Design
Desktop UI
Booking Landing Page
- Once when the end-users enter the URL, they land on the booking landing page.
- On the left, the end-users will see the profile picture, name and role of the creator. Below that, a small introduction of the user is seen along with any URLs (depending on creators)
- Creator stats is added in the bottom to serve as a social proof, allowing end-users to gauge the creator’s professionalism and the extent of their impact on others.
- On the right, the list of sessions which are offered by the creator is present with short context so that the users can read the text fully without skimming. We can set a word/character limit depending on product discussions.
Once after a Session Card is Selected
- Once when the user selects a session card, the creator’s information on the left gets collapsed. The user can hover the collapsed section to preview the creator’s information.
- On the right side, the session card is present along with the selection of date and time. The timezone and the 12 hour and 24 hour format is handled inside the dropdown.
What if the users book a session after 7 days from today’s date?
If a user books at a later date, we can show users a subtle information stating that they can meet creators at an earlier date to avoid any waiting time.
Mobile UI
Booking Landing Page
- Once when the end-users enter the URL, they land on the booking landing page.
- On the top, the users preview the creator stats allowing end-users to gauge the creator’s professionalism and the extent of their impact on others.
- About Me section is present in the bottom
Once after a Session Card is Selected
- Once when the user selects a session card, the creator’s stats is hidden and the user can proceed to book their slot
- On the bottom, the users can see the process to select date and time, and add personal details to create a booking.
Prototypes
How to increase conversions?
Some of the following ideas can be considered to increase booking conversions and user engagement.
Social Proof
Social proof communicates to users that the creator has left a substantial impact on others, establishing credibility and demonstrating their influence within the community. This additionally encourages users to return for more sessions with the creators.
Feedback Mechanism
After a user successfully books a session with their creator, we can show a feedback widget asking how was the booking experience. Analyzing feedback can help identify areas for improvement and enhance user satisfaction.
Word of Mouth
We can also allow users to share the creator’s URL in their social media sites. This way, the creator’s profile becomes visible to the user’s friends and followers.
My Learnings
Visual Design
I experimented with the session cards, testing various blending techniques to achieve a seamless and vibrant gradient. Using this font for the first time was an exciting experience, especially exploring the versatility of a sans-serif typeface.
UX copywriting
Crafting UX copies involves thorough exploration and thoughtful consideration. I’ve discovered that enhancing the quality of the copy significantly boosts conversion rates. It holds a level of importance akin to visual design. Engaging with the target audience is a crucial aspect that I’ve come to appreciate during the design process.
Social Proof
Metrics have a very powerful impact. When reviewing a creator’s profile, the presence of metrics is essential for gaining insights into the creator. This not only helps users understand the creator better but also empowers them to make informed decisions, contributing to a more calculated approach.
