My Social Calendar - Redesign
Summary
This is a case study showing a redesign for the My Social Calendar responsive web app. My Social Calendar is a social events club for people to connect and make new friends while doing fun and social activities in their communities. However, it is primarily marketed to single people who are looking for other single people to socialize with and potentially find a compatible romantic relationship in an organic way.
Timeline
2.5 Weeks
My Role
Solo Project: UX Research / UX Design / UI Design
Tools
Figma
Design Thinking Process
Problem Statement
Business Requirements
User Research - User Interviews / Competitive Analysis
Develop Point of View - Proto Persona / User Journey
Information Architecture - User Flow / Sitemap
Wireframes - Low Fidelity
Visual Design - Typography / Color / High Fidelity Wireframes
Recap and Review
Problem Statement
It can be challenging for adults to make new friends with people who share similar interests. It is also difficult for single people to meet other compatible singles organically. My Social Calendar needs a trustworthy, user-friendly website that can help their members find fun, social activities that will cultivate genuine friendships and potentially help single people find compatible romantic relationships.
Business Requirements
The below features/business requirements needed to be addressed on the responsive web app.
Show how My Social Calendar works.
Show locations where the business is operating.
Show examples of events.
Provide a Frequently Asked Questions Area.
Offer singles only events and open events.
Make sure pricing is displayed.
User Interviews & Tests - Existing Website
Testing Existing Website
To understand what users thought of the existing My Social Calendar website and learn about what they wanted, I conducted 5 virtual interviews over Google Meet.
I observed the participants click through the existing website and took notes as they talked about their decisions out loud. I also asked what they would want in an updated version.
Who were the participants?
5 people between 28 and 34 years old.
3 were in relationships and 2 were single.
All participants had experience with dating apps.
All participants had experience with apps that allow users to sign up for social functions.
Original Existing Screens
Key Takeaways
Competitive Research
I looked at direct and analogous competitors to see what was on the market for the My Social Calendar target customer. Three competitors I focussed on were: Hinge, Meetup, and ClassPass.
These apps combined features that could be useful for the My Social Calendar website. Hinge is a dating site where similar customers would spend time. Meetup provides social events for people sharing similar interests and has a sign up process. ClassPass has a well designed app with a sorting feature allowing users to sort for classes by location, day, time, and category.
Key Takeaways
Hinge and ClassPass have clean, modern designs.
Meetup and ClassPass allow users to sort events by day, time, location and activity.
Meetup photos were from real events.
Details about events are shown.
Clear explanation of purpose and process.
Proto Persona
After my research I created a proto persona to better define the target user and their needs, motivations, and pain points. I’ve found it is helpful to have a person in mind when designing products because it is easier to empathize and visualize what they need for a satisfactory experience.
Name: Erica
Age: 31 years old
Status: Single, no children
Occupation: Marketing Manager. Works from Home.
Location: Los Angeles
About:
Erica moved to Los Angeles 4 months ago from New York and has a couple friends from work but they are often busy with their families. She is very interested in meeting more friends to do things with around the city.
Hobbies:
Loves hiking, being outdoors, bike riding, finding new restaurants, cooking.
Pain Points:
• Feels lonely because her friends are in relationships and it’s hard to find people to do things with.
• Wants to do social activities but doesn’t know what to do or where to find them.
• Feels burnt out from online dating to meet single men.
• Her social calendar is filled with unsatisfactory 1st dates that feel like wasted time.
• Most social groups for single people feel forced, awkward, and sad because if seems like people are only there to find love.
Motivations:
• Wants to meet new friends and build relationships with people who share her interests.
• Wants to increase her chances of meeting a romantic partner in a genuine/organic way.
• Wants to explore her city, learn new skills and have new experiences.
Needs:
• A trustworthy service that organizes social activities for single people looking to have fun with shared interests.
• Easy way to filter activities by location, type of event, day and time.
• Visible itinerary to know what to expect during the events.
• Verified reviews of events with photos showing real people having fun. (Prominent social media presence).
• Clearly visible prices.
User Flow (Before sign up) - View outdoor activities.
To better visualize the screens that a user like Erica would use to complete a primary task on the website I created a user flow. This flow shows the happy path that Erica would take if she were to open the website, view the outdoor activities scheduled for the month and decide to sign up for My Social Calendar.
Site Map (Before sign up)
After figuring out what features would be needed on the website by looking at the business requirements and the user needs I created a site map. This site map helped me decide where features should be located on the website. I reviewed the site map with three potential users and created a few iterations until creating a version that everyone easily understood.
Site Map - Before User Makes Account
Wireframes and Prototypes
After organizing where the screens should live within the app, paper wireframes were quickly sketched out. Hand sketched wireframes were done first because that was the fastest way to start visualizing concepts and then I went directly into high fidelity wireframes due to the very fast time constraint.
Low-Fidelity Screens
User Flow - Explore events.
High-Fidelity Screens
User Flow - Explore events.
Visual Design
It was important for My Social Calendar to keep the original logo and have a color palette that coordinated to it. I used the colors from the logo to make up most of the palette and added in the Pool Blue as a complimentary color.
Arial was used for most of the typography because it is clean, modern and easy to read. Aleo was selected as the primary font because it was a fun serif font that complimented Arial well.
Typography
Color Palette
Reflections
Overall, I am pleased with the current state of the My Social Calendar redesign. Below is a list of improvements made.
Easier scan-ability.
Event sorting enabled.
Potential members can see events from previous month with itineraries and reviews and photos.
Updated wording to focus on relationship building.
Next Steps
Design the rest of the screens in the user flow.
Conduct user testing and preference tests.
Update designs.