Work

Introduction

Background

Splitwise is a platform where people can add, split and settle expenses with single or multiple members. It helps in keeping track of personal and group expenses. When users want to settle up any amount with their friends on Splitwise, they have to adjust the amount on Splitwise and pay the exact amount to the other party using alternative methods of payment (most commonly used methods in India are Google Pay, Paytm, Phonepay). This creates a detachment from the app causing a simple process to be unnecessarily complicated, which can also cause human errors while entering the amount in either the payment app or Splitwise.

Objective

By better understand the user’s journey, I aimed at creating a payment feature inside the Splitwise app. The users should be able to choose between popular digital payment methods (India only) like Google Pay, Phonepay or Paytm and send money to their friends directly from the app.

My Process

Understanding Users

Interviews and Surveys

Assumptions

Analyze data and Ideate

Competition analysis

Solutions to pain points

Workflow and key screens

Create Design Solution

Wireframes and key feature workings

User testing and design iterations

High fidelity design

User Research

Interviews

I conducted 10 interviews with Splitwise users to gain insight into their usage, needs and goals.

Surveys

I distributed among 20 Splitwise users to gather quantitative data on user needs and preferences.

Key questions & answers that aided the design solution

What is the target audience for the feature update?

The target audience for the feature update is the existing user base of the Splitwise mobile app. Since most of the users are educated young people in their 20s.

What is the user journey from getting a group bill to paying the users dues?

Generally the most common group expense in the target audience is restaurant bills and utility splits between roommates. The total expense is paid by one person and then equally divided in the people which participate. The addition of Splitwise allows users to create a cumulative expense report since most people pay some amount at some point, the total sum owed is given at a mutually agreed time. This amount is then given by the borrower using a digital payment method (most popular form of currency transfer between urban youth in India).

What are the usual methods of money transfer between friends?

The most common method of transferring money between urban youth is digital payment apps like GooglePay and Phonepay.

Target audience & Personas

The target audience for this feature is the existing user base of Splitwise. Young professionals and students in their 20s. These demographics usually go out to restaurants and bars and/or have rents and utilities to split with roommates. Based on this research and user interviews, I created the following 3 personas:

Finding the opportunity

Based on the user’s needs and goals, none of the features in Splitwise cater to the stage of “making payment” in their journey. To not consider it causes multiple points of potential errors and also forces the user to change platforms.

Assumptions

Users settle up expenses in a timely format and don’t just let it pile up over time

It is assumed that users generally settle up expenses in a timely manner even though there could be a back and forth in who pays and who owes. The users hence would use some kind of a payment transfer

Users prefer to transfer money via a digital method over cash

Since the pandemic in 2020, the urban population has shifted towards a digital mode of transfer over cash, especially the youth. Thus settling up expenses usually entails that the users would use some kind of a digital payments app.

There are no technical or regulatory limitations in adding this feature to Splitwise

Splitwise is a successful and well established company thus it is safe to assume that their data is secure. Apps like CRED, Swiggy, Zomato allows users to pay in-app or request ‘X’ amount via UPI apps.

Users use either GooglePay, Phonepay or Paytm

These are the most popular UPI apps used my millions of Indians. A post launch analysis can be performed to see if users prefer different methods, but for stage one it can be assumed that users use these 3 apps.

Ideation

Current Flow

The current flow causes the users to go outside the app for a part of the process. This leaves a gap between what is owed and what is paid and is a potential point for human error.

Usability Issues

Users need to go outside the app

Users need to remember what amount to transfer when they are out of the app

Users need to search and find their friend in the other (digital payment) app and then proceed to transfer the money. This causes an unwanted delay in the whole process

Competition Analysis

I carefully examined the payment process of two very popular apps, Swiggy and CRED. Swiggy uses an external method with payment request method and CRED uses an inline UPI integration. Their drawbacks and benefits paved the way for the flow of the feature.

Swiggy

Pros

Multiple payment method options

Direct payment request, user can click on the notification to directly go to the gpay app’s payment screen

Amount and person is prefilled in a request, thus no room for error

Feature is relatively low cost to build.

Pain points

User still needs to go out of the app

User needs to go back to the Swiggy manually app after the payment

CRED

Pros

The entire process is in-app, user never needs to step out.

Multiple payment methods available.

Pain points

User needs to register their UPI Id with the platform.

The in-app process takes higher amount of company resources (both business and dev)

New Task Flow

Since this is a brand new addition to the app, the request payment link is the best approach. After we gather further user data regarding adoption and preference, we can add the in-app feature. Error points are still controlled since there is no human intervention. Additionally, the new flow requires a shorter amount of time and effort from the user.

Storyboard

By eliminating the error loops (scenarios) and reducing friction in the flow, the new storyboard allows for a much positive user experience.

Design Solution

Initial Wireframes (Key screens)

Derived Solutions: Iteration #1

The initial design solution is aimed to introduce the feature to the users at minimum cost to the company. It aims to provide user with an option directly accessible through the app itself and reduce points of error and provide a seamless experience.

Failure cases and screens

There are multiple points of technical failures that can occur in the process, right from user enters the wrong passcode to server issues on the payment gateway.

User Testing

The objective of the user testing was to gain insight into how the users would use the new feature and their interaction with known pain points and search for new ones. These sessions were fundamental to create the Iteration #2 which addresses the key issues found in user testing.

Equipment and environment

I met several people in cafes and homes. The users were given an iPhone with the Figma prototype and other apps like Swiggy, CRED, etc to interact with.

Testing sessions and tasks

Users were given several tasks based on the prototype as well as other apps to observe their actions and behavior. The tests conducted were short, lasted for no more than 15 minutes each session.

Observations and analysis

User testing revealed that the notifications from payment apps are not reliably regular, thus users often switched to the apps manually. The users also had to confirm the success of the payment.

Key Takeaways

Switching apps

It was observed that the notifications didn’t always come immediately. Thus users had to manually switch apps to complete the payment step.

Manual confirmation from the user

Since the transaction was between two third parties, Splitwise cannot confirm the success of the transaction. Hence the user had to manually confirm, thus introducing a potential point of possible error.

Iteration #2 - Future scope

Analyzing the pain points through user testing and platforms like CRED, we can see that there are a few points that need to be addressed. After post launch data like user adoption, preferences, etc are thoroughly analyzed, then the company can allocate more resources to further develop the feature.

Learning

Learnings

As a UX Designer, we often discount the technical cost to build a feature. Creating a initial milestone feature with known pain points to gather user data, adoption and insight to later re-iterate on a well based feature gave me a greater knowledge and insight on creating a product, not just designing it. This is one of the most crucial learnings that I apply in my capacity as a professional Product Designer working in a startup with limited resources and an iterative environment.

Future Scope

Looking ahead, based on high user adoption of the feature and additional data, we can re-iterate iteration #2 to better the feature to accomodate users based on their behavior and needs.

Additionally, we could also work on an AI model integration that would allow Splitwise to track users expenditure, give insights regarding the same and send alerts based on limits set by the user.

Next Project - Uber

Previous Project - Splitwise

Introduction

Background

Uber, a pioneering transportation network company, offers seamless urban mobility through its user-friendly mobile app. With a focus on convenience, the app allows users to request rides, track their driver's location, and seamlessly pay for services. Real-time maps enable precise pickup and drop-off locations, while the rating system ensures quality service. Advanced features like upfront pricing and ride-sharing options enhance affordability and sustainability. Uber's app also offers additional services, such as food delivery and electric bike rentals. With its intuitive design, real-time updates, and diverse services, Uber's mobile app revolutionizes how people navigate and experience urban transportation.

Objective

The goal is to take advantage of the most popular wearable device, the Apple watch and the new widgets feature in watchos 10 to create an app that would allow users to use the functionality of the Uber mobile app without ever opening the phone. Since the Apple watch has much smaller dimensions compared to a phone, the primary goal while creating a design solution would be to create a compact UI with maximum functionality.

My Process

User Research

Key questions & answers that aided the design solution

What is the target audience for the feature?

The target audience for this app is people in their 20s and 30s who use Uber frequently to travel and have the Apple Watch as an accessory.

What aspect of using Uber does the user want on the go?

Users prefer to book cabs to saved locations and track updated on their ride on the go.

What are the users needs and goals?

The user’s goals are to complete repeated interactions like booking a ride to a saved location with ease and minimal friction. Since the user already has the watch on their hand, a few clicks can simply get the task accomplished.

Target audience & Personas

Based on the target audience of regular Uber users who own an Apple Watch and the interviews and surveys conducted during primary research, I created the three following personas:

User Research Results

Users travel to saved destination 70% of the time

8 out 10 users reported that their regular travel is always to saved destination. They travel to unsaved locations like restaurants usually irregularly like over the weekends.

80% of users pay after the ride using digital payment apps like Phonepay or GooglePay

8 out of 10 participants reported that they generally pay for rides after the fact with digital payment apps. This allows for the assumption that users would use their phone most of the times to complete payments

Observations and analysis

Sessions were observed and scored on different metrics. While most users were able to accomplish the tasks, several users faced issues. The insights dictated further iterations to cater to various pain points.

Assumptions

Users already have the Uber app installed

Since the watch app is a companion app, users would have to have the Uber mobile app installed on their phones, signed in.

Users have their target destination saved in their mobile app

Since the Apple Watch has very low real estate and small dimensions, typing is a hassle on it. Thus users would have to chose from their saved location added by them on the mobile app.

Users have their payment mode set in the mobile app

Uber offers both pre-payment and post-payment services. In case of pre-payment or post-payment, users can use their existing cards or Uber Cash or chose other to switch to the mobile app to complete the payment.

Users use their watch for other tasks

It is assumed that owners of the apple watch use it for many tasks like recording fitness, answer calls, glance at incoming notifications, etc. Thus they are familiar with interactions like using the scroll wheel and expecting data on scroll.

Ideation

Quick Brainstorming

I mean...

It will have the ability to book rides to saved locations

Ok, but why?

Because users typically traveling frequently to saved locations have all the presets like location and payment already configured. They simply need to choose the destination and click on book.

But

Users would need to use the mobile app to travel to unsaved locations, conduct pre/post ride payment. Users cannot completely rely on the watch app for complete functionality.

Therefore

The watch app will be a companion app that users who travel frequently to saved locations can use. IT will allow those users to select their destination, book their ride and view the ride’s status at a glance.

Scenario

It is 8:30 in the morning and Jeff needs to go to the office. His office location is already saved, hence he doesn’t need to type it. He opens the Uber app on his watch. On the home-screen he can see suggested locations as in the mobile app. He clicks on his office location saved as “Work”. After a few seconds, he is informed that Uber is searching for a cab driver. After two minutes, his watch buzzes and gives him a notification that a rider has accepted his ride and would be arriving in 2 minutes. The widget on his watch shows the progress of the rider and gives an ETA. Jeff walks from his house to his society gate in the meantime. Jeff gets his OTP on the watch as a notification when the driver arrives at Jeff’s location. When Jeff sits in the cab he scrolls down to view the OTP in his notifications and informs the rider. The ride begins. In the middle of the ride, Jeff swipes up to view the Uber widget which shows him the progress of the journey and ETA to his office. When he arrives at the office, he gets a notification from Uber to complete his payment. He takes his phone out of his pocket and opens GooglePay to pay the rider. He scans the QR code on the backside of the driver’s seat and completes the payment. Jeff then gets out of the car and goes to his office.

User Flow

The user flow prioritizes performing repeated actions from the mobile on the watch. Since it is a companion app, functionality would be restricted thus the user can perform repetitive tasks like booking a cab for a saved location and paying with existing methods.

Design Solution

Initial Wireframes (Key screens)

Low-fidelity Task Flow

‍To create the wireframes, I followed the watchOS guidelines for app screens as well as widgets. Using the wireframe stage, I illustrated the following task flow in detail.

High Fidelity Prototype

Open the figma link to use the prototype yourself.

Final Design

The final high fidelity design was created based on the general UI and branding of the Uber mobile app and watchOS guidelines to maintain the brand identity and create a familiar UI for users.

Learning

Learnings

This was my first project working on an Apple Watch app and creating a companion app. The fundamental features which a companion app should and can’t have was a learning step for me. Working with such a small screen was a challenge in itself, since I had to create a very compact UI without compromising on functionality.

Future Scope

Apple is trying to revitalize the Apple Watch with the new watchOS10. Their hope is that many companies would make apps for the Apple Watch considering the new features and UI elements. I feel that the Apple Watch is the most underrated tech having real world benefits.

Post-launch data drives the iterations of any application and thus depending on that data changes should be made. Additionally, Uber will have to think about every new feature being made for mobile from the perspective of watchOS as well, since if the watch app is neglected, user traction will fall.

Next Project - Google Calendar

Previous Project - Uber

Introduction

Background

Google Calendar is one of the most popular calendar and scheduling apps for both businesses and individuals. Users can add public calendars, create personal or work events, invite co-workers, conduct video conferences and much more. One of the most crucial aspects of event scheduling is the ability to create a recurring event. The current flow on the mobile app forces users to follow several steps, creating a high amount of friction and introduces potential points of possible error. First time users have a hard time creating and customizing recurring events to their liking. Additionally, users cannot share video conference links directly while creating an event.

Objective

By understand the pain points in a user’s journey, their needs and goals I aimed at redefining the process of creating a recurring event and sharing video conference links. The main goal was to streamline the process and create a compact UI which allows users to accomplish their tasks with minimum steps and friction.

My Process

Understanding Users

Interviews and Surveys

Assumptions

Analyze data and Ideate

Competition analysis

Solutions to pain points

Workflow and key screens

Create Design Solution

Wireframes and key feature workings

User testing and design iterations

High fidelity design

User Research

Key questions & answers that aided the design solution

What are the major pain points of the user in the journey of scheduling their events?

Users commonly encounter pain points during the event scheduling process, such as difficulty in navigating the app, time-consuming event setup procedures, limited customization options, and challenges in finding efficient ways to manage recurring events.

What is the target audience for the feature update?

The target audience for the feature update is the existing user base of the Google Calendar app on iPhone. This includes professionals, students, and individuals with busy schedules who rely on the app to manage and organize their events and appointments effectively.

What aspects of an event does the user customize?

Users have the ability to customize various aspects of their events, including the event title, date, time, location, duration, reminders, and recurrence patterns. They seek flexibility to tailor these elements according to their specific needs and preferences.

What are the users goals?

The primary goals of users are to efficiently manage their schedules, ensure timely attendance to events, and maintain a well-organized calendar. Users aim to achieve these goals by utilizing features that provide them with a seamless and intuitive experience for scheduling, customizing, and tracking their events.

Target audience & Personas

The target audience for the Google Calendar feature includes individuals who seek an efficient and user-friendly solution for managing their schedules and events. These users span various demographics and professions, ranging from busy professionals and students to retirees, each with unique scheduling needs and preferences. On the bases of this and the overall interviews, the following 3 personas were created:

Assumptions

Users have already determined the specific customizations they want to apply to their events.

It is assumed that users have a clear vision of the customizations they want to make, such as setting specific reminders, notifications, or recurrence patterns. They expect the app to provide an interface that allows them to easily apply these pre-defined customizations.

The existing logic and features within the Google Calendar app are sufficient to meet user needs.

It is assumed that the current functionality and logic implemented in the app are already capable of fulfilling the users' requirements. Users do not expect any significant technological innovation but rather expect the app to leverage its existing capabilities to provide a seamless event scheduling experience.

The customizations made by users will fall into daily, weekly, monthly, or yearly recurrence patterns.

It is assumed that users typically require event customizations that follow a daily, weekly, monthly, or yearly schedule. They expect the app to offer these recurrence options as part of the customization features, allowing them to easily specify the desired frequency for their events

Ideation

Current Flow

The current workflow in the app is very tedious and time consuming. Additionally there are multiple instances where users can make simple errors costing them additional time.

Usability Issues

Multiple unnecessary steps, thus the flow is very long

Options are confusing to the users

Error prevention is missing in certain instances

Users generally used the wording “I want to schedule the event daily except weekends” and not “I want to schedule the event every week on weekdays”. Current flow supports the later statement. Daily recurring events occur daily without exceptions.

Affinity Mapping

Affinity mapping revealed key themes from user research for the Google Calendar Scheduling Event Revamp:

Difficulty in customizing recurring events, such as setting recurrence frequency and event end dates (12 out of 18 participants).

Cluttered user interface, leading to confusion and overwhelming information display (14 out of 18 participants).

Lack of intuitive event management tools, including difficulties in adjusting event settings and finding customization features (15 out of 18 participants).

Time-consuming event scheduling process with long and tedious steps for creating and editing recurring events (11 out of 18 participants)

Competition Analysis

I did a thorough analysis of Apple’s Calendar and Microsoft Outlook Calendar, two of the largest competitors of Google Calendar to gauge existing solutions in the market, their pain points and advantages to gain a better understanding for solving the problem.

Apple's Calendar

Pros

Shorter task flow, thus less time consuming

Select increment number, duration, interval and days is in the same page

Compact design, yet intuitive

No additional custom option (doesn’t create confusion)

Pain points

User needs to click on add event, the button is not clearly highlighted

Less number of preset defaults, user has to add everything

Inability to add cross platform virtual meets (User needs to manually add a Google Meet link or Zoom link). Only FaceTime is supported.

Microsoft Outlook

Pros

Shorter task flow, thus less time consuming

Compact and overview page

No additional custom option (doesn’t create confusion)

Pain points

User needs to click on add event, the button is not clearly highlighted

Inability to add cross platform virtual meets (User needs to manually add a Google Meet link or Zoom link). Only Skype is supported.

Interval, On days and Until are all in separate page, increases the TACT time.

New Task Flow

The new task flow for customizing recurring events in the Google Calendar app was designed to improve efficiency and user experience. By implementing a simplified process with a single page, users could now easily select their desired interval, end date or occurrence, and other customizations.

Design Solution

Initial Wireframes (Key screens)

Derived Solutions: Choosing Intervals

Users have the flexibility to choose their desired interval and end date or occurrence, all on a single page. By providing complete customizability by default and eliminating preset options, the flow becomes more streamlined and less prone to errors.

End recurring event

The revamped "Ends On" section in the Google Calendar Scheduling Event Revamp project offers a shorter and seamless task flow, consolidating all recurring event scheduling actions on one page inspired by the Google Calendar UX on web.

More options in video conference customization and sharing

Users can directly share video conference links on other platforms like slack to share with their coworkers for a seamless process of joining meets.

User Testing

Equipment and environment

I conducted real-world testing with 20 participants in cafes, homes and offices with an iPhone with the figma app installed with the prototype.

Testing sessions and tasks

The sessions lasted 20-30 mins where participants were tasked with various tasks like creating recurring events with different customizations, sharing video conference links and more.

Observations and analysis

Key Takeaways

Confusing day picker

Day picker was a little confusing with only the first letter of the day. Adding the first three letter like “Mon” enhanced the experience and reduced the time taken by users to choose days as their options were clearer.

Redundant Ends On page

A simple three-option radio button menu now enables users to do all customizations on the same page. Displaying all three options upfront enhances user clarity in customizing the end for recurring events.

Lack of option to share video conference link directly

Users expressed their desire to share those links on their communication channels like slack immediately as they create the event. I assumed that there would not be any technical difficulty as that feature is present in the google calendar on web.

Learning

Learnings

I learned the impact friction reduction can have on user experience, and gained valuable insight from unexplored zones such as App Store and customer forums. These helped me to get a better understanding into getting a user-centric approach to design.

Future Scope

Looking ahead, exploring opportunities to integrate a smart suggestion feature for event management and scheduling with the help of Google’s Bard AI is an exciting avenue to explore. The AI integration can also be applied to customizing events, setting alarms and reminders, etc. IT can further be developed into an event prioritization feature to make the platform more intuitive.

Although Google’s workspace is an ecosystem in itself, we could consider avenues of partnership with 3rd party project management tools like Notion, Jira and more to increase the TAM and capture a larger range of audience which might prefer a variety of different tools.

Next Project - Hashnode

Previous Project - Google Calendar

Introduction

Background

Hashnode is a blogging platform primarily for developers, engineers and thought-leaders. Their goal is to create a tech community on their platform where users can share their blogs about new research, revolutionary ideas, etc. They currently (data from 2022) have over 2 million active users on their platform.

Objective

The objective was to redesign and improve Hashnode’s current Sign up flow to increase foot fall and user engagement by simplifying the process and revamping the UI to make it clean and modern. Since their user base is developers and engineers, having a good UX and clean, modern, and minimalistic UI is a must.

My Process

Understanding Users

Interviews and Surveys

Assumptions

Analyze data and Ideate

Competition analysis

Solutions to pain points

Workflow and key screens

Create Design Solution

Wireframes and key feature workings

User testing and design iterations

High fidelity design

User Research

Interviews

I conducted 10 interviews with Splitwise users to gain insight into their usage, needs and goals.

Surveys

I distributed among 20 Splitwise users to gather quantitative data on user needs and preferences.

Key questions & answers that aided the design solution

What are the different types of sign up flows in industry standard platforms?

There are multiple methods of sign up flows, most notable ones being staggered flow and forced onboarding. In a staggered flow, user is directly taken to the platform in less than 3 clicks and additional process like set personalizations pop up after the user spends some time on the dashboard. Forced onboarding is a process where the user has to fill out every detail to allow the platform to provide fully custom experience for each user. The advantages of staggered onboarding are that it increases the user count since the process to get to the dashboard is very easy. The advantages of forced onboarding are that the platforms aquire enough data from the user to give a custom experience and also it creates the “IKEA” effect where the user is already invested a lot of time and efforts to get to the dashboard, thus feels like using it which the conversion rate.

What is the target audience for the feature update?

The target audience for this feature is developers and engineers in their 20s, since this demographic spends a lot of time online developing their skills and learning new ones.

Currently which platform is the industry leader in this space?

Medium, Reddit and StackOverflow are the industry leaders in the space of blogs, vlogs especially catering to our target demographic of “techies”. YouTube is also a competitor, not in a direct way of being a blogging platform, but it is used my many users to complete their goals.

What are the users goals?

Users goal is to complete the sign up in as little time and effort as possible. Since the user is new to the platform, they just want to explore the functionality before they decide whether they want to invest their efforts to customize (set preferences, follow people, etc) the platform to their liking.

Target audience & Personas

The target audience for this redesign are potential customers of Hashnode. Sign up is the first process that the user goes through on a platform and can boost conversion rates when done the right way. The demographic that Hashnode targets are young engineers and developers in their 20s. Thus based on the target audience and primary user research, I created the following two personas:

Assumptions

Users initially just want to explore and not customize.

Since users are new to the platform and don’t know much about it, I have assumed that they initially want to explore the platform’s functionality and the quality of content on it before investing time and efforts in customizing their dashboard to receive targeted content.

Users are there to read blogs

The first actions performed by new users typically don’t involve writing as they don’t know much about the platform. Additionally, majority of the users are readers and not writers.

Users don’t know the content they wish to see and want to explore

New users are not yet aware of the type and quality of content available on the platform, thus it is assumed that they will initially explore more than search for content or appreciate targeted content.

Types of Onboarding

Forced Onboarding

In this process the user is taken through several steps to gather information and create a personalized dashboard. Typically they ask for preferences, personal details, etc.

Pros

The platforms acquire enough data from the user to give a custom experience and also it creates the “IKEA” effect where the user is already invested a lot of time and efforts to get to the dashboard, thus feels like using it which the conversion rate of the platform.

Cons

A long onboarding process creates frustration in the user’s mind. This might cause them to fill out incorrect information to complete steps or even drop out of the flow completely.

Staggered Onboarding

In this process the user is directly taken to the dashboard in 2 to 3 steps. Additional info required for creating a personalized dashboard and content targeting is asked in intervals while using the platform.

Pros

Minimal initial onboarding steps increase the footfall of the platform and give the users time to experience the platform before personalizing their feed. Additionally, users are more likely to fill out accurate data when asked in small increments over a period of time.

Cons

Initially users recieve generic content which might cause them to lose interest in the platform. Additionally, users might be performing tasks when additional info pops up which might cause the user to skip it and increase frustration.

Ideation

Current Flow

The current flow is in the form of forced onboarding where user has to go through a long series of steps before they are taken to the actual platform. This increases the time and effort which could cause the user to drop out halfway through the sign up process.

Usability Issues

Takes a very long time

Some screens like asking the user whether they are a reader or writer is unnecessary at the time of onboarding as most new users prefer to explore the content and gauge it’s quality before they write a blog.

Error prevention is missing in certain instances

The flow is focused more towards conversion rather than increasing the footfall, and since Hashnode is a new platform, their primary motive has to be to increase user traffic.

There is no option to skip any step

Unclear visual hierarchy in the UI can cause delays and increases error possiblities

Competition Analysis

Understanding the competition and gaining an advantage by carving a niche is a fundamental issue for new platforms to target audiences already used to other alternatives. This guides the product to be a reasonable alternative within an industry which is already populated with giants which in this case are Medium, CSS Tricks, StackOverflow and Reddit.

Key Takeaways

Established platforms generally onboard the user within 3 steps

Most platforms onboard the user in a staggered onboarding flow where the user is taken to the dashboard with minimum efforts and additional data to provide personalized content is asked later while the user is using the dashboard.

Success metrics of the platform on the sign up page builds credibility

Success metrics like total number of blogs published, total user count increases the credibility of the platform in the users eyes.

Users should have the option to skip platform customization steps

Asking for additional data without an option to skip might result in the user giving false information in a hurry to complete the step, thus invalidating the data.

New Task Flow

The new flow is based on the concept of staggered onboarding, where users will be taken to their dashboard 3 simple steps (last step is optional). Additional information for creating a tailored experience would be asked from the user after set intervals of time spent on the platform. This would increase the footfall and would then allow Hashnode to learn more about the users needs by analyzing their behavior on the platform.

Design Solution

Initial Wireframes (Key screens)

Derived Solutions: Old Design vs New Design

Comparing the old design with the new design. The new design was kept consistent with the dark mode theme of the platform dashboard.

The new flow will ask the user for only their email id, username and password. THe step to customize the content thay see from adding tags would be optional. If the users skip this step, they can easily add tags through the dashboard. Additionally, writer onboarding would start when the user clicks on the write button for the first time.

Staggered onboarding

Users can personalize their dashboard content via suggestions and recommendations in both bloggers and tags/topics. Users can fill out additional personal info like tagline through the account settings.

Learning

Learnings

As a UX Designer, I understood the functioning and success metrics for both lead conversion and increasing footfall of a product. It gave me a new approach towards bringing the users to the platform vs improving the patform for the current users, the later being more familier to me.

Future Scope

The current dashboard of Hashnode has some UI/UX irregularities like boxy design, unclear visual heirarchy, inefficient use of space etc. After gather more information about the users behaviour on the platform, I would like to propose a change in the dashboard design itself.

Additionally as a product, Hashnode should incorporate VLOGs as well as create a short-video post feature where users can easily browse content within seconds. It has already been proven by research that people prefer to see short videos as it brings a constant and instant dopamine rush and thus get addicted to platforms like Instagram and TikTok. Hashnode can turn this opportunity and convert a time wasting element to a fun and explorative learning opportunity for users.

Next Project - MyFitnessPal

Previous Project - Google Calendar

Introduction

Objective

The objective is to revamp the current meal planning feature in MyFitnessPal and add multiple new features along with it. The new feature aims to introduce goal oriented meal planning, customizable meal options, auto-curated shopping list for the weeks ingredient shopping along with a gamified user experience to keep the user engaged with the app.

What is MyFitnessPal and what do they do?

MyFitnessPal is a B2C SaaS mobile app service that provides users with macro-tracking, customizable workout plans, newsfeed with blogs and posts about healthy living and much more. Their recipe database has currently over 200 healthy recipes with detailed macro-nutrient splits. Although they provide various services and features, the primary focus of the app is to allow users to track their daily macro-nutrient intake.

Meal planning background and purpose

Diet is 70% of a person’s fitness journey, since most people eat home cooked food (either prepared by themselves or help) meal planning becomes a very crucial and essential part of a person’s fitness journey. People need to plan their weeks meal in advanced, and they have many constraints such as time, ingredients, monotonous meals and much more. A strong meal plan can aid a person to reach their fitness goals much faster and in an efficient manner.

User Research

Interviews

Conducted with 5 MyFitnessPal app users and others which used different solutions for meal planning to gain insights into their experiences, challenges, and preferences.

Surveys

Distributed among 20 MyFitnessPal app users to gather quantitative data on user needs and preferences.

Target audience & Personas

Target audience includes MyFitnessPal users who are interested in optimizing their nutrition to support their health and fitness goals. To better understand their needs and pain points, two primary personas were created:

Ideation

Affinity Mapping

I collected data from surveys and interviews and created an affinity map. The following were the key findings:
- Difficulty finding meal plans that align with specific fitness goals.
- Challenges with adapting meal plans to accommodate dietary preferences and restrictions.
- The need for a streamlined, user-friendly interface.

User Journeys

Based on the personas and interviews, I created user journeys for each of the personas. Each journey revealed key pain points, like in the case of Sonia, she had difficulty finding the right recipe that she liked and in case of Raj, he hardly found time outside of work and gym to make his meals everyday.

Competition Research

The competition analysis involved examining reviews on the App Store, feedback forums and testing of existing meal planning apps such as FitnessPal, MealMaster, and NutriPlan. Drawing inspiration from these existing solutions, I aimed at taking inspiration and solving new found pain points that users of these platforms have.

One of the key features adopted from FitnessPal was the concept of goal-oriented meal plans. This feature allowed users to select their fitness goals, such as weight loss or muscle gain, and generated personalized meal plans to support their objectives. This addressed the pain point of finding meal plans that align with specific fitness goals.

From MealMaster, I adopted the idea of customizable meal options. This feature provided users with an extensive database of recipes that could be filtered based on dietary preferences, restrictions and fitness goals to tailor the meals to each persons liking.

NutriPlan's emphasis on a user-friendly interface inspired the design solution. The aim was to provide a streamlined and intuitive meal planning interface that simplified the process of creating and adjusting meal plans along with clean UI and clear heirarchy.

New Task Flow

The new task flows and IA for were combined with the existing ones to create a unified experience which allowed the feature to take advantage of all the other features of the MyFitnessPal app.

Design Solution

Derived Solutions: Goal Oriented Meal Plans

Users have the ability to choose and create their own fitness goal. Thus the meal plan will be different for each user depending on their goal, target weight loss and restrictions of any.

Customizable Meal Options

Users have the customizability to add allergies and preferences (likes and dislikes), skip and change meals. All of these features combined give the user their own personal meal plan catering to all of their needs and goals.

Intuitive & Gamified Interface

A streamlined and user-friendly interface which combines existing features and journeys of MyFitnessPal. Key features include easy one click processes for shopping list, users can easily skip, change or cancel meals, users can change servings to adjust ingredient quantities and more.

User Testing

Think Aloud Protocol

To gain insights into the participants' thought process, I encouraged them to use the think-aloud protocol, where they verbalized their thoughts, feelings, and actions as they interacted with the prototype. This allowed me to understand the participants' expectations, frustrations, and satisfaction levels throughout the testing process.

Observation and analysis

During each session, I observed the participants' interactions with the prototype and took detailed notes on their behavior, comments, and any difficulties they encountered. These notes were later used to analyze the results and identify patterns and trends.

Post testing interviews

After completing the tasks, I conducted a brief post-test interview with each participant to gather feedback on their overall experience with the feature. We asked questions about their satisfaction with the feature, any challenges they encountered, and suggestions for improvement.

Key Takeaways

Integration with MyFitnessPal

Difficulty in tracking the progress of meal plans and their impact on users' overall fitness goals within the app.

Navigation

Difficulty finding the feature within the MyFitnessPal app.

Customization

Users struggling to modify meal plans according to their preferences, such as adjusting portion sizes.

Visual Design

Insufficient visual hierarchy, making it challenging to distinguish between different sections of the app, such as meal plans, recipes, and nutritional

Information Clarity

Users found it challenging to understand the relationship between their selected fitness goals and the generated meal plans.

Iterations and Refinements

After initial testing, I analyzed and addressed the key pain points discovered. After deriving the final solution, then I moved to the final high fidelity designs using the MyFitnessPal branding.

Validation Testing

After the design iterations, a round of validation testing was conducted to reassess and confirm if the new solutions addressed all key pain points.

Final Design

Initial Wireframes (Key screens)

Proposed Changes in UI

Considering the results of user testing and analysis, I have additionally also proposed a few changes in the colour scheme to improve the visual hierarchy, contrast and overall user experience to match with a modern minimalistic design that aligns with the message of the app, which is healthy living.

Learning

Learnings

While making this project, the biggest challange which also gave the greatest reward was creating multiple extensive flows. Since this was a big and detailed feature that combines with existing features, creating the current IA and task flows and integrating the feature into those was a learning experience for me.

Future Scope

As i suggested above, MyFitnessPal can rethink their color scheme to evoke a sense of healthy living with a modern theme, minimalistic UI components with clear visual hierarchy.

Additionally, some of the existing features like calorie counter can be integrated with AI to allow users to simply click a photo of their meal, upload the picture and get an accurate macro nutrient and calorie count. This feature can then be integrated with the meal planning feature to give a more immersive experience.