Sitemap
Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Intera: UX Case Study on Transforming Campus Events for Students

10 min readAug 9, 2024

--

Intera aims to make campus life more engaging by simplifying event discovery, enhancing ticketing experiences, and fostering connections within the college community.

Press enter or click to view image in full size
Banner

Story Time ✨

Back in college, I often found myself unaware of the events happening around campus. It wasn’t just me — most of my classmates were out of the loop too. Events were mostly advertised on social media platforms like Instagram or Facebook, but even then, it was scattered and unreliable. Every club, big or small, relied on these platforms to spread the word, yet there was no central place for students to easily discover or stay updated on all the activities happening. This gap left many events unnoticed, simply because students didn’t know they were happening.

About Intera 🪩

Intera: A combination of “inter” and “intra,” representing its connection to both events within a single campus (“intra”) and events across multiple campuses (“inter”).

Intera bridges the gap between students and campus events, offering a centralized platform where every event gets the attention it deserves. It makes it easy for students to discover, attend, and enjoy campus activities, ensuring that no event goes unnoticed.

If you’d prefer to jump straight to the video and skip the reading, you can watch it right here.

Problem Statement 🤔

College students struggle to stay informed about campus events, leading to missed opportunities for engagement and connection.

Target Audience

College students, aged 18–24, who are digitally connected and actively seek a seamless way to discover and engage with campus events.

Assumptions 💭

  1. No Technical Constraints: I assumed there were no limitations in the backend or frontend, allowing me to leverage any technology necessary to create the best possible user experience.
  2. Design Autonomy: As the sole designer, I had the freedom to make independent design choices, ensuring that every decision aligned with the overall vision for the app.

My Design Process 🎨

Press enter or click to view image in full size
My design process for this UX Case Study
Design Process

In my UX design process, everything begins with Empathy — understanding the users’ needs and challenges by stepping into their shoes. I then Define the core problem to stay focused on what really matters.

Next comes Ideation, where I brainstorm creative solutions, exploring different ideas. I then create Prototypes to bring those ideas to life, making them tangible and testable.

Finally, I Test the prototypes with real users, gathering feedback to refine and improve the design.

This process is dynamic, often looping back to earlier stages to ensure the final product truly meets user needs.

Empathize 🫱🏻‍🫲🏻

I. User Research

Based on the user survey conducted with 21 participants and user interview with 3 students, several key insights emerged that highlighted the challenges and motivations students face when it comes to campus events. U can find questionnaire here

Here are the few inshot of survey response that I got.

Press enter or click to view image in full size
These are some key findings from user survey
Some key findings

Based on the user survey and interviews, I developed personas and created empathy maps to better understand user needs and behaviors.

Press enter or click to view image in full size
Press enter or click to view image in full size
Persona Map & Empathy Map

Key insights from the user survey include,

  • There is a lack of proper information about event organizers and event details.
  • Users face difficulty in finding relevant events.
  • There is low awareness of clubs and societies in colleges.
  • Better promotion and visibility of events and clubs are needed.

II. Competitive Analyis

During my research, I discovered that there isn’t any event ticketing app specifically designed for university events.

To gain insights, I analyzed three popular platforms: BookMyShow, Eventbrite, and Paytm Insider.

This helped me understand what works well and what doesn’t in the event ticketing space, guiding the development of a platform that truly meets the needs of university students.

Press enter or click to view image in full size
User reviews from google play store
User Reviews
Press enter or click to view image in full size
Competitive Analysis of Bookmyshow, Paytm Insider, eventbrite
Competitive Analysis

Define🎯

After thorough research and analysis of user needs and competitive landscape, I identified the following key insights:

  • Lack of Proper Event Advertisement and Information: College students often miss out on campus events due to inadequate promotion and a lack of detailed information.
  • Poor User Experience in Event Booking Apps: Current event booking apps present challenges like clunky ticket purchasing, unreliable app performance, and inadequate support, leading to user frustration.
  • Limited Awareness of Campus Clubs and Societies: Students have low awareness of the various clubs and societies at their colleges, impacting engagement and participation.
  • Difficulty in Finding Relevant Events: Users find it hard to discover events that match their interests due to poorly organized and limited event listings.
  • Need for Better Event Promotion: Both students and event organizers require improved methods for promoting and advertising events to ensure better visibility and attendance.

Based on the insights gathered from user research and competitive analysis, I identified the following problem statement:

College students struggle to stay informed about campus events, leading to missed opportunities for engagement and connection.

Ideate💡& Prototype🖇️

With a clear understanding of the problems and user needs, I moved into the ideation and prototyping phase. This stage focused on generating and testing ideas to create effective solutions.

To start, I mapped out the very raw form of Information Architecture. This blueprint outlines the structure and organization of the app to ensure a smooth user experience.

Press enter or click to view image in full size
Information Architecture of Intera
Information Architecture

I. Sketching

Here’s a glimpse of my initial sketches, capturing the early ideas and concepts that laid the foundation for Intera’s design.

Press enter or click to view image in full size
Sketched of the app I did in starting
Sketches

II. Mid-Fidelity Wireframe

Press enter or click to view image in full size
Mid-Fidelity of the app

III. Visual Design

  1. Splash Screen
Splash Screen of the screen
Splash Screen

2. Onboarding flow

Onboarding flow of the screen
Press enter or click to view image in full size
Congratulation screen as gif and it have a small animation
Congratulation Screen
  • Challenge: As a student-only platform, the primary challenge was to ensure that only students could register, preventing non-students from accessing the app.
  • Solution: I designed a secure sign-up process offering two methods of verification:
    - Students can register using their campus-provided email.
    - Alternatively, they can upload a document issued by the campus for verification.
  • Verification Technology: To ensure authenticity, I looked to existing student verification technologies like SheerID, which companies like Spotify use to confirm student status for discounts. This ensures only verified students can access the platform.

CTA Button

Get Sourab Jha’s stories in your inbox

Join Medium for free to get updates from this writer.

When I started designing the button for the app, my first instinct was to go with a simple, straightforward design. It was clean and functional, but something felt missing.

Press enter or click to view image in full size
Iteration of CTA Button
Iteration of CTA Button

Main thing was, I realized that for an event-based app, simplicity might not always convey the excitement and importance of the action. The button needed to do more than just blend in; it needed to stand out.

I began experimenting with different iterations, looking for a design that would not only be functional but also add a bit of flair and significance to the user experience.

  • The second button, featuring a star icon, emerged as the clear winner. It wasn’t just about adding a visual element, but about enhancing the user’s perception of the action they were about to take.
  • By incorporating the star icon, the button sets itself apart from standard actions. It’s more engaging and adds a layer of excitement that a plain button wouldn’t achieve.
  • The subtle gradient and polished look of the button with the star icon contribute to a more professional and appealing user interface. It’s a small touch, but it can make a big difference in how users interact with the app.

3. Home Page

Press enter or click to view image in full size
Home

The homepage of the Intera app was designed with a user-centric approach, ensuring that essential features and personalized content are easily accessible to users.

  • Header Section: This section includes Intera’s logo, a search icon, a barcode scanner, and a notification icon. These elements are placed prominently to provide users with quick access to key functions, enhancing usability and efficiency.
  • Event Banner Carousel: Positioned just below the header, this carousel showcases upcoming events in a visually appealing manner. The large, rotating banners draw users’ attention and keep them informed about what’s happening around them.
  • Interest-Based Categories: A sliding carousel featuring various event categories, such as sports, food, and music. Instead of using the term “genre,” this section focuses on different event types that cater to users’ varied interests.
  • Recommended Section: This section displays event cards based on the preferences users selected during onboarding. The swipeable cards make it easy for users to explore events that align with their interests, enhancing personalized user experiences.
  • Trending Section: Another swipeable card section that highlights popular events. By placing trending events here, users are encouraged to engage with what’s currently popular, fostering a sense of community and relevance.
  • Sponsored Banner: This section is dedicated to ads or sponsored content, integrated in a way that doesn’t disrupt the user experience while still being noticeable.
  • Category Sections: These are dedicated to different types of events, grouped by interest areas. This organization makes it simple for users to find events that match their specific preferences.

By designing the homepage this way, I aimed to create a seamless, intuitive user experience that aligns with users’ needs and preferences.

Event Card

Event card show the details about the events happening

Press enter or click to view image in full size
Iteration of Event Card
Iteration of Event Card

At first glance, both event cards seem to offer a visually similar experience. However, upon closer inspection, the second card on the right stood out for a few key reasons.

  • ‘Price’ and ‘Buy Now’ in the second card as a single entity let user focus more on the CTA which can also helps in increasing of buying rate which will also increase the business sale.
  • The second card benefits from a more defined visual hierarchy. The placement of elements and the spacing between them make it easier for users to scan the card and digest the information quickly. This helps users focus on what matters most without feeling overwhelmed by clutter.

Banner

Press enter or click to view image in full size
Iteration on Banner
Iteration of Banner
  • In the second banner, the inclusion of a clear and prominent CTA button labeled “Check it out now” is a powerful element. This button invites immediate interaction, guiding users to take the next step without hesitation. It’s a small detail that can significantly boost user engagement.

4. Club Section

Press enter or click to view image in full size
Club section of the app with description
Club section

The club section shows user different type of events happening on either their followed campus clubs or on other followed campus clubs. This section is divided into 3 pages:-

  • Club Selection Page:
    - Users are greeted with a toggle to switch between their campus clubs and those from other colleges.
    - Users are greeted with a toggle to switch between their campus clubs and those from other colleges.
    - Club cards with “Follow” buttons are displayed, and a cross icon appears once a club is followed, allowing easy navigation.
  • Followed Clubs Page:
    - This screen shows events from the clubs users have followed.
    - The campus toggle remains at the top, with event cards displayed below.
    - An “Explore More Clubs” section encourages users to discover additional campus clubs.
  • Other Campus Page:
    - Users can explore clubs from other colleges with the same campus toggle.
    - The screen highlights events from other campuses and includes an “Explore Other Clubs” section for further discovery.

5. Event Page

Press enter or click to view image in full size
Event page of the app
Event Page
  • Event Image Carousel: Displays event photos with name, price, and niche tags for quick info.
  • Club Profile: Shows the club hosting the event with a “Follow” button for easy engagement.
  • Event Details: Provides clear location and logistical details.
  • Event Description: Offers a deeper look into the event.
  • Accordion Menus: “More Information” and “Terms & Conditions” sections are neatly hidden until needed.
  • For You Section: Suggests similar events based on user interests.
  • Sticky Action Bar: “Buy Now” and “Save Event” buttons remain accessible at the bottom.

6. Tickets Page

Press enter or click to view image in full size
Ticket Page of the app
Ticket Page
  • The first screen has a toggle with two options: “My Tickets” and “Saved Tickets.” It defaults to “My Tickets.”
  • Below the toggle, the page displays event cards for the tickets the user has purchased.
  • On the second screen, clicking an event card reveals the ticket details, including a barcode and essential information.

7. Booking Flow

Press enter or click to view image in full size
Booking flow
Booking flow
Payment confirmation page
Payment confirmation gif

Key Takeways & Learning 📝

  • Understanding user needs is crucial for building a successful product.
  • Iteration and feedback are essential in the design process.
  • Keeping the user experience at the core leads to better design outcomes.

Wrapping Up 🗞️

Hope you enjoyed reading this case study

This journey has been an exciting blend of creativity, problem-solving, and putting students at the heart of the design. Every step was an opportunity to shape something truly valuable for college life, making the process as rewarding as the final product. I will appreciately accept your feedback.

Want to see more of my work? Check out my portfolio. If you’re looking for collaboration or opportunities, feel free to connect with me on LinkedIn. Let’s create something great together!

Also you can click the clap icon to see a magic ;)

Thank you

--

--