JOININ
Expand your social horizons one event at a time
CASE STUDY
This Springboard project was based on creating a fictitious platform by defining a topic that we, the students, would like to work within when solving a UX problem.
Initially, I was uncertain about where to start when brainstorming ideas for this project. However, reflecting on the lengthy and complicated process I went through to adopt my current dog made me realize that there could have been a quicker and more efficient way to achieve the end result.
Since my previous dog was an inherited rescue with lots of baggage and bad habits, I wanted to have a choice and start anew.
Problem
On average, application data shows that ONLY 20% of people who say they are going to attend an event, actually do.
Solution
Without trying to reinvent event apps, through attractive features on my platform, I aim to create stronger incentives so the number of attendees who commit to going is more closely aligned with the number of actual attendees.
In an attempt to create behavioral conditioning for users to reflexively return to JOININ, I aim to make the bells and whistles of the experience of their journey more appealing from start to finish.
In order to simulate what it’s like to work in a real-world context, the steps I took for my second major
Springboard Bootcamp project from start to finish were:
-
Writing a research plan
-
Conducting online secondary research
-
Write two test scripts for my personas throughout different parts of the research
-
Running two rounds of usability tests on my personas
-
Designing a userflow according to my findings
-
Sketching my wireframes on paper
-
Building wireframes on Figma
-
Creating the core UI kit style
-
Building the high-fidelity prototype
JOININ menu bar
TOOLS
-
Miro
-
Figma
-
A paper and a pen
TEAM
-
Springboard's given
-
1 UX designer
-
My mentor's guide
MY ROLE
-
UX research
-
Script writer
-
Usability tester
-
Information architecture
-
Sketcher
-
UX/UI designer
TIMELINE
-
Overall: 8+ weeks
-
Discovery & Research: 1+ week
-
Design & testing: 4 weeks
MY DESIGN PROCESS
PHASE 1: Discovery
PROJECT PLAN (3 hrs)
My project plan consists of six phases with deadlines and timelines throughout each phase. Below each phase, a rationale behind my process, and in the middle, the methodologies I used to get to my final design.
The schedule is laid out into a table with the use of my favorite tool, Figma!
COMPETITIVE ANALYSIS (10 hrs)
JOININ is a social networking platform that is committed to building a community for event goers to connect, discuss, and practice activities tailored to their interests.
I want users to be able to have an easy and seamless experience from the first step in finding an event according to their interests to the very last, going to the event and sharing their experience with their friends.
But first, an online competitive analysis on four leading industry examples:
1. Facebook (Social networking)
2. Meetup (Event networking)
3. Eventbrite (Event networking)
4. HotelTonight (Affordable last minute hotel deals)
All four have the following flow in common
Search > Select > Review > Pay > Attend
I have conducted an in-depth analysis of each competitor, providing a detailed preview of the pros and cons of each design. To access the complete study analysis, please click here
PHASE 2: Design I
USERFLOWS (8 hrs)
For a few weeks, I made an effort to communicate in Userflow-Lingo with my Springboard mentor. However, one day we both discovered that I had incorrect information about the shape functionalities, which caused the delay in our learning process. Nonetheless, it was a valuable experience that prepared me for real-world situations.
This is what it looked like at first [...]
My understanding of a userflow used to look like this. The yellow rounded square boxes represented “Interaction Pages + Explanations”, while the black rhombuses were for the “Process” - In my mind, that meant “The process the user went through”, and that complicated everything leading to a thing we say in Lebanon: The top of the pot is lost!
User flow, no bueno!
Finally, it made sense!
This is what the new legend of my userflow became:
-
The Display Page: The displayed.
-
The CTA / Action (orange pill) was any action one took (such as “Tap here” or “Select image”).
-
The Input / Output (black rhombus) was any information you would INPUT in a box (such as your name or your credit card information). The OUTPUT part is for things like “Save to calendar” or “Open in GPS ''.
Bless Rebekka's cotton socks for taking the time, a marker and a whiteboard to explain what I'd been missing.
The Happy Ending!
Once I became a little more fluent, I was able to build the following attachment for a returning user searching and joining an event. It has a start (green circle to the left) and an end (orange circle on the right) and in between a very clear flow that focuses on the user’s search for an event on the
platform.
My Takeaway
In order to empathize with a simple user experience for my event app, I had to learn (literally and figuratively) to go with the flow! The fundamental step to identify first and foremost was to concentrate on the “Search” part. The solutions to solve my problem were:
-
Where are we going?
-
When are we going?
-
What are we doing?
The rest was secondary.
SKETCHES (16 hrs)
Inspired by Meetup's interface, my main focus was the "searching for an event" part in my user flow. I sketched out clear item placements for my UI, with input boxes for keywords, event type selection, and location editing, arranged in a top row in the second sketch. Tapping on different options would lead to different pages.
PHASE 3: Validate I
In my initial testing, my questions focused on assessing the overall usability of an event app by an average user.
Five highlights of my first round of testing
TEST SCRIPT I (4 hrs)
The users I will be interviewing must fit the following criteria
-
User’s age: 30+
-
Users frequent web and mobile services regularly
-
Outgoing event-goers who enjoy in-person activities
I wrote up my first usability testing script with 5 tasks I needed them to perform to run a successful usability test for review.
Task 1: Find an event
Task 2: Register for the event
Task 3: Search for events on a different date
Task 4: Check your event details
Task 5: Purchase ticket for your chosen event
Click here to view my findings from first round of testing with my 5 user personas.
WIREFRAMES (4 hrs)
Conducting in-person user validation using wireframe designs have enabled me to obtain valuable feedback and ask questions in real-time.
I built a prototype in Figma while tweaking my sketches to my inspirations as well as basing them on my 4 usability test tasks.
See JOININ wireframes on a bigger scale HERE
PHASE 4: Design II
UI Kit 1.0 (20 hrs)
I established core styles, anticipating modifications as needed, to achieve a cool-luxury feel using the Louis Vuitton font Futura. Color-wise, I aimed for exclusivity and sophistication, with a gender-neutral palette to broaden audience appeal for VIP events.
Yeah ... but why the shoe?
At the time I had my thinking hat on, my mother happened to walk into the room with her brand new shoes. I fell in love with the lilac, dark purple and blood red color palette - it also makes for a good story. Until I learned something I’d missed in my hi-fi designs.
UI Kit One-Point-Oh Yeah! (2 hrs)
After going through my visual hierarchy, alignments and the many font sizes I used, the red color felt wrong. As red is mostly used for danger or alerts, I needed something less alarming.
Turquoise is on the opposite side of purple on the color wheel and is considered a cool color, whereas purple, a warm color. After playing around with hues, I found those two shades to look beautifully complimentary.
As for the icons and buttons, I preferred to keep the edges more rounded. It sets a less aggressive and more playful tone.
PHASE 5: Validate II
Five highlights of my second round of testing
TEST SCRIPT II (4 hrs)
My 5 new users I interviewed also had to fit the same criteria as my first round.
-
User’s age: 30+
-
Users frequent web and mobile services regularly
-
Outgoing event-goers who enjoy in-person activities
This time, the 5 tasks I needed them to perform were a little different.
Task 1: Sign up for JoinIn
Task 2: Searching for an event
Task 3: Pay ticket to reserve spot
Task 4: Check your event details
Task 5: Chat with event members
My Takeaway
The common incentives my interviewees talked about were:
-
Engaging with attendees / event hosts
-
Simple use of the app
-
Calendar notifications
-
Exclusive access: VIP access / Early bird tickets
-
Attractive features on the app
PHASE 6: Final Design
FINAL FIGMA DESIGN (8hrs)
My high fidelity designs were based on the 4 tasks I gave the 10 different users I ran for both my first and second round of usability testing.
On my second round of testing, I altered one of the tasks used improve my user’s experience. After I incorporated my user testing results, I made the necessary tweaks, found in the slider deck below.
My Challenges & Lessons
-
My biggest challenge was trying to finalize trivial details that didn’t look right before a set deadline. My meticulous focus on the little things rendered it almost impossible to stick to the time frame I had planned for.
-
Another one was coming up with a way to keep the user interested enough to come back to use the app frequently and to reflexively refer to this platform for their outings.
My Takeaway
I intentionally delayed to grasp techniques better, then adjusted and delivered within my new time frame to avoid recurring mistakes mistakes in the real world. Luckily, it's a simulated project, so stakeholders won't be kept waiting.
Since studies show people's attention span is limited to an average of 47 seconds per screen. This highlights the importance of quick, attractive, and practical design solutions that get to the point while still being enjoyable.
I aimed for JOININ's interfaces to be concise, visually appealing, and effective.
JOININ's before & after
JOININ Action Items
The initial problem in this project was how to align the number of committed attendees with the actual attendees by adding relevant features to the company's offerings:
-
Enabling “The hidden gem” feature, improving rare event discovery
-
“Surprise Me” CTA
-
In-person / Virtual toggle
-
Calendar has dates underlined clearly showing events on different days
-
Incentive: You can see how many of your friends are going to the same event
-
You can still be a headcount but be anonymous
-
In-app photos / videos of past weekly events and their reviews
-
Invitations can be sent via chats
-
Social proofing
Reasons to JOININ on the fun
THE GRAND FINALE
By integrating design elements and special features into my event app, I aim to boost conversion of accepted invites to committed event attendees, enhancing their overall experience.
SEE PROTOTYPE ON FIGMA 👉🏼 HERE 👈🏼
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.