Sproutly

Sproutly

Mobile App Design

Mobile App Design

UX/UI Design

UX/UI Design

Creating a personal calendar app that can generate free days between college students, reducing the hassle of making plans with hectic schedules.

Type

Type

End to end mobile app

Role

Role

Solo Designer Research &

UX/UI

Tools

Tools

Figma

Photoshop

Illustrator

Background

Background

Through my own personal observation, making plans are hard and when I briefly talked about it with other people, it wasn’t long for me to realise I’m not the only one.


I wanted to design a tool to help people make this experience better. For this project, I aimed to explore the problem space around peoples ability to make plans, then create a solution that helps them simplify that process.

Challenges

Challenges

There is a lot of time management apps. There so many features which tries to fix this problem of group planning. So, how would my app be different?

What I Accomplished

What I Accomplished

Designed an end-to-end mobile app — part personal event tracker, part community based, all about generating time slots which all parties are available to attend


I learned that most solutions require joint collaboration which dismiss the need of personal plans, that's why I made this app a private calendar that still connects with other people.


Discovered how unorganized schedules can overwhelm people to the point of isolation and loneliness.

How does it work?

The app acts as a personal calendar to put in work, college lectures and personal plan schedules, creating a private space for people. When creating an event you can either choose to make it a flexible day with the icon on the top right. This is helpful for the generate feature.


Generate feature is when you select the friends you want to make plans with, press generate, and it will generate the days which you and your friends are free by checking all the days with no plans in them and those days which says your flexible.

How does it work?

How does it work?

The app acts as a personal calendar to put in work, college lectures and personal plan schedules, creating a private space for people. When creating an event you can either choose to make it a flexible day with the icon on the top right. This is helpful for the generate feature.


Generate feature is when you select the friends you want to make plans with, press generate, and it will generate the days which you and your friends are free by checking all the days with no plans in them and those days which says your flexible.

How does it work?

How does it work?

The app acts as a personal calendar to put in work, college lectures and personal plan schedules, creating a private space for people. When creating an event you can either choose to make it a flexible day with the icon on the top right. This is helpful for the generate feature.


Generate feature is when you select the friends you want to make plans with, press generate, and it will generate the days which you and your friends are free by checking all the days with no plans in them and those days which says your flexible.

How does it work?

Summary

My process put into stages. Hover to view.

Research

Defining

Designing

Usability Testing

Final Design

Summary

My process put into stages. Hover to view.

Research

Defining

Designing

Usability Testing

Final Design

Summary

My process put into stages. The whole project took around 1 month and 2 weeks Hover to view.

Research

Defining

Designing

Usability Testing

Final Design

Summary

My process put into stages. The whole project took around 1 month and 2 weeks Hover to view.

Research

Defining

Designing

Usability Testing

Final Design

Research

Research

Research Goals

Research Goals

Discover the process of making plans and finding pain points

Define the problem & Identify the users

Explore different tactics users use to solve this problem

Identify any existing
apps or solutions

Defining the Problem & Users

Defining the Problem & Users

I had a general view of what the problem is, it all started when I observed in my own friend group the saying -

“Its so hard to make plans”

“Its so hard to make plans”

This made me go research on the Why?

Research Interviews - Demographics

Research Interviews - Demographics

Based on assumption I wanted to see if age was possibly a factor for a person to have this kind of problem, or if they are even related at all.

To conduct this research I talked briefly to all age ranges (3 of each category), asking quick basic questions about making plans and their relationship with it.

1 - 18

Interviewed Age Range: 8 - 18

Younger end don't usually make any plans.


Plans mostly involve the parents involvement.


For ‘teens’ they have school routines, friend group is there also so they don't really need make any plans.


Part-timers usually work on the weekends, so after school activities was easy to plan.

18-40

Interviewed Age Range: 18 - 36

Late teen years and 20s - 30 there seems to be a negative relationship with planning.


They find it overwhelming to plan anything with friends.


Feeling hard to have a personal life.


From late 20s - 40 routine takes course, everything has to be planned in months advance, even for small things.

40 - 60+

Interviewed Age Range: 44 - 62

In this age group not much planning occurs.


Mostly routine based lives without that many discrepancies.


Occasional planning is months or even a year in advance.


Retirees have much more free time but also is occasionally planning. Enjoys leisure time or just time with family and spouses.

Insights

Insights

The one group that I found had the most negative relationship with planning was those in late teens and mid twenties. There was a few things which they all had in common, they were all students in some sort of education or freshly graduated, was working part time and some having their own hobbies.

Education

Work

Hobbies

Understanding our users

Understanding our users

After defining the users, I conducted another, more in depth, interview with potential users.

I interviewed 10 users (current college students and recent graduates)

to understand their own experiences with making plans.

Interview Goal 1

Interview Goal 1

Why they feel/find planning is hard

Interview Goal 2

Interview Goal 2

What they find is the most complicated part of the process?

Interview Goal 3

Interview Goal 3

Their current process of making plans with people

Interview Goal 4

Interview Goal 4

How did they try to resolve it?

Interview Goal 5

Interview Goal 5

How they organize their own personal schedules?

Interview Goal 6

Interview Goal 6

What negative effects the problem had done to them?

What they had to say

What they had to say

Photos displayed are not the acutal interviewees

Renz

Marketing Student (2nd Year)

Works part time

Volleyball team

“I think it’s because me and my friends are in different courses so our time clashes, ohhh and also I work and have trainings on some days too”

Stacey

Nursing Student (3rd Year)

Works part time

No extra curricular activities

“Finding the date where we are all available. Bro, it’s nearly impossible when there’s like more than 2 people involved”

Khiel

Design Student (4th Year)

No work

Basketball when free

“I propose in our group chat then see if people are down, then usually in a week of yes and no’s. we get a date and hope for the best it pulls through”

Kenan

Biomed Student (1st Year)

Part time

No extra curricular activities

“My group actually used one app to plan. It was them ones where you share a calendar. I dropped it though, because I didn't want to make all my plans public.”

Eilyn

Comp-Sci Student (3rd Year)

Part time

In Committee of Gaming Club

“I have a notebook with me but that’s for studies, not really plans. I try to put stuff in my calendar but most of the time I’m just hoping I remember”

Anas

Psychology Student (3rd Year)

Part time

Part of table tennis club

“It has been a really hard on my mental and my social life. There are times where I have to be with myself for hours on days, not really living the college life”

Primary User Needs

Primary User Needs

  1. Make it quick

Make the process of finding the free days which the people are available quicker.

  1. Connection

Make the process not be disconnected with their friends.

  1. Privacy

Let the user be able to have their own personal belongings without sharing, but let them have the ability to.

Primary User Pains

Primary User Pains

  1. Stressful

Making plans are super stressful, too many variables to manage, like other peoples schedules.

  1. Time Consuming

Relying on other peoples responses to make the plan makes it take time, leading to it being scrapped.

  1. Feeling Disorganized

Having no plans for social events because of a hectic schedule can make users feel disorganized, leading to overpressure to isolation.

Secondary Research - Psychology

Secondary Research - Psychology

I wanted to see the effects of a lack of social connection in a college setting would lead to.


What I found in multiple research papers is listed:

  1. Risk of loneliness

  1. Risk of loneliness

Lack of social connections can lead to feelings of isolation and rejection, This can lead to reduced motivation.

  1. Reduced Academic Performance

  1. Reduced Academic Performance

Social interactions often help students process information, get academic support and motivation.

  1. Risk of mental health

  1. Risk of mental health

More likely to develop mental problems due to not having a support system to manage stress.

  1. Harm social / communication skills

  1. Harm social / communication skills

Social interactions is needed for college and in their future workplaces since communication is critical.

  1. Physical health decline

  1. Physical health decline

Social isolation can impact physical health. Loneliness and stress can lead to weakened immune function, increased inflammation and higher blood pressure.

Storyboard

Storyboard

  1. Make plans

  1. Make plans

  1. Propose

  1. Propose

  1. Waiting & Responses

  1. Waiting & Responses

  1. Redo Process

  1. Redo Process

  1. Finalize

  1. Finalize

  1. Event Happens

  1. Event Happens

User Journey Map

User Journey Map

Competitor analysis

I then researched the current market for time management solutions or apps that helps a group of people to plan an event together. I tried to use all apps for at least a few days.


These are the top 5 apps:

TimeTree

Apple Calendar

Google Calendar

Outlook Calendar

Fantastical

TimeTree

A collaborative calendar. Make groups to collaborate a joint calendar together.

Competitor analysis

I then researched the current market for time management solutions or apps that helps a group of people to plan an event together. I tried to use all apps for at least a few days.


These are the top 5 apps:

TimeTree

Apple Calendar

Google Calendar

Outlook Calendar

Fantastical

TimeTree

A collaborative calendar. Make groups to collaborate a joint calendar together.

Competitor analysis

I then researched the current market for time management solutions or apps that helps a group of people to plan an event together. I tried to use all apps for at least a few days.


These are the top 5 apps:

TimeTree

Google Calendar

Outlook Calendar

Fantastical

Apple Calendar

TimeTree

A collaborative calendar. Make groups to collaborate a joint calendar together.

Competitor analysis

I then researched the current market for time management solutions or apps that helps a group of people to plan an event together. I tried to use all apps for at least a few days.


These are the top 5 apps:

TimeTree

Google Calendar

Outlook Calendar

Fantastical

Apple Calendar

TimeTree

A collaborative calendar. Make groups to collaborate a joint calendar together.

Competitors Key Takeaways

Competitors Key Takeaways

After testing these apps and their user experience, I gained 3 main takeaways which I believe would help me in making the features and user experience of my own design

  1. Messy

  1. Messy

Current calendar apps rely on collaborating calendars with others, creating a messy overly cluttered user experience.

  1. Reliant on others

  1. Reliant on others

Collective calendars still rely on others

for accurate updates and day planning.


Invite systems also rely on other people abilities to communicate, with the use of external platforms such as social media groupchats or in person meetings

  1. No privacy

  1. No privacy

All the collaborative calendars need users to put in every plan which could be a problem with privacy. This is where I think invite systems for events is a much better approach.

Define

Define

How might we?

How might we?

With the user pains from the interviews I created How Might We? questions.

How might we make collaboration between friends but also keep the privacy of personal calendars?

How might we remove the reliance of others in the process of making plans?

How might we make the process of making plans quicker and smoother?

Persona

Meet Josh. Josh is a persona created by the needs, pain points, lifestyle, experience and personality of the users in the interviews I conducted

Defining everything

Defining everything

Identify the needs & KPI

Identify the needs & KPI

Why am I creating this app?

Why am I creating this app?

Im creating this app to tackle the problem people who might be juggling educational studies, part time work, extra curricular activities and their social life.


To make sure to have those needed social breaks in an environment as stressful as higher educations.


Make the process much easier to navigate through without its additional stress, hopefully leading to a more happier experience in higher education, and the decline of isolation and mental problems.

How will I measure success? / KPI

How will I measure success? / KPI

  • Duration of average planning times dropping

  • Customer Satisfaction

  • Shares + Reviews

  • Users perspective of planning - less hesitant or burdened to make plans

Making goals out of ‘pains’

Making goals out of ‘pains’

I simplified the goals, based on our for the functionality of the app into to 3 things:

Simplify

Simplify

Simplifying the process of

creating events, through minimal design and smooth UI.

Individual in a community

Individual in a community

Create a personal experience

for the user and their friends, giving them the sense of community within the app but still be able to enjoy the privacy of their own.

Offload

Offload

Making the process of making plans rely on less factors and offload the stress that it gives to those involved in the planning.

The Features

The Features

Simplify

Simplify

  • Add schedules


  • Repeat ‘Events’


  • Reminder Timer Notifications


  • Colour coded event system

Individual in a community

Individual in a community

  • Customizable personal calendars


  • Invite System, no collaborative calendars


  • Add Friends

Offload

Offload

  • Free day finder generator that generates common free days between the set of friends.


  • Give date options

Focusing on User Flows

I then wanted to focus on the main user flows which the user will be mainly doing during the process.

The 3 main task flows are:

Onboarding

Make an Event

Find a date that suits

Onboarding

“I want to get started and try out the app.”

Logo - Loading Page

Welcome

Login/Sign Up Page

Details Page

Home Page

Focusing on User Flows

I then wanted to focus on the main user flows which the user will be mainly doing during the process.

The 3 main task flows are:

Onboarding

Make an Event

Find a date that suits

Onboarding

“I want to get started and try out the app.”

Logo - Loading Page

Welcome

Login/Sign Up Page

Details Page

Home Page

Focusing on User Flows

I then wanted to focus on the main user flows which the user will be mainly doing during the process.

The 3 main task flows are:

Onboarding

Make an Event

Find a date that suits

Onboarding

“I want to get started and try out the app.”

Logo - Loading Page

Welcome

Login/Sign Up Page

Details Page

Home Page

Focusing on User Flows

I then wanted to focus on the main user flows which the user will be mainly doing during the process.

The 3 main task flows are:

Onboarding

Make an Event

Find a date that suits

Onboarding

“I want to get started and try out the app.”

Logo - Loading Page

Welcome

Login/Sign Up Page

Details Page

Home Page

Design

Design

Exploration - Low Fidelity Sketches

Exploration - Low Fidelity Sketches

Explore layout and feature implementations.

Mid - Fidelety Wireframes

Mid - Fidelety Wireframes

After experimenting with a lot of low fidelity wireframes to get the layout of the app and mapping of the features, I decided to go straight in to mid fidelity wireframes so I can start with the Ui.

Focusing on User Flows - High Fidelity

After doing mid fidelity designs I wanted to go straight into high-fidelity for user testing since I already had something in mind for the UI while making the fidelities.

Onboarding

Make an Event

Find a date that suits

Onboarding

“I want to get started and try out the app.”

Focusing on User Flows - High Fidelity

After doing mid fidelity designs I wanted to go straight into high-fidelity for user testing since I already had something in mind for the UI while making the fidelities.

Onboarding

Make an Event

Find a date that suits

Onboarding

“I want to get started and try out the app.”

Focusing on User Flows - High Fidelity

After doing mid fidelity designs I wanted to go straight into high-fidelity for user testing since I already had something in mind for the UI while making the fidelities.

Onboarding

Make an Event

Find a date that suits

Onboarding

“I want to get started and try out the app.”

Focusing on User Flows - High Fidelity

After doing mid fidelity designs I wanted to go straight into high-fidelity for user testing since I already had something in mind for the UI while making the fidelities.

Onboarding

Make an Event

Find a date that suits

Onboarding

“I want to get started and try out the app.”

Usability Testing

Usability Testing

Test Goals

Test Goals

The Users that I focused on is more likely be used to digital products, so I wanted to see how they found the experience. I set myself goals for this user test so I can see what changes to do before the final design.

Goal 1

Goal 1

Test onboarding and see if the user understands what the apps goal is.

Goal 3

Goal 3

Find opinions on the friend list and the process of adding, generating, choosing and saving a plan.

Goal 5

Goal 5

Get their thoughts of the app and if they would install this app.

Goal 2

Goal 2

Test the user if they understand the layout, structure and functions in the home page.

Goal 4

Goal 4

See their thoughts of the home page displaying multiple events.

Results

Results

The testing for this design consisted of 4 college students and 1 recent graduate.

Goal 1

Goal 1

Test onboarding and see if the user understands what the apps goal is.

4/5 knew what the apps goal is.


0/5 knew how the app would achieve that goal.

Goal 2

Goal 2

Test the user if they understand the layout, structure and functions in the home page.

2/5 understood the layout and structure


3/5 understood how the functions worked (not sure of the ‘3 bubble button’

Goal 3

Goal 3

See how they find the friend list and the process of adding, generating, choosing and saving a plan.

5/5 understood the process of the ‘free day generator’


5/5 didn't know how to make groups

Goal 5

Goal 5

Get their thoughts of the app and if they would install this app.

5/5 said they would use the app

Goal 4

Goal 4

See their thoughts of the home page displaying multiple events.

4/5 said it might've felt too compressed


3/5 isn't sure they like the display

Result Redesign

Result Redesign

Before

Before

After

After

Before

Before

After

After

Users in onboarding wasn't sure how or what the app does. so I changed the first opening line to a more direct explainable sentence instead of a vague explanation.

Before

Before

After

After

One big design change I did was variant 1 main/calendar page of the app. Users said that it might've felt a bit too tight in one spot (the top of events) and the bottom felt too empty. Event titles also not showing fully was a concern.


This made me too redesign the page to a more open design, without squishing everything together in one area. Also fixed the navigation buttons, removing the burger menu maximising space.

Another redesign was the friends / generate page. The design didn't show how to make groups, friends or favourites. Simply it was lacking in a clear way to deal with friends.

Before

Before

After

After

Before

Before

After

After

Another quick addition to the design was that the users liked the process of making events and the extra tools it has. But they also said that since they’re schedules are fixed it would be a hassle to repeat the same schedule every week.


This is where I added another function, which is intended to be used to those who have schedules.


Add the schedule, the timeframe it will last and then automatically update the calendar.

UI Final Design

UI Final Design

Moodboard

Moodboard

Colour Palette

Colour Palette

FDFAF6

36454F

81B271

3E704D

Fonts

Headers -

Ledger

Main Body Text -

Roboto Slab

Logo Name -

Bahaus

Design Components

Design Components

Home Page

Free Day Generator Page

Profile / Settings

1st Variation Scroll View

2nd Variation Calendar View

Notifications

Add Event

Send Invite

Search

Add Friend

Add Group

Favourite

Repeat an Event

Add a schedule

Put a timer

Approve Event

Flexible Day

Thoughts

Thoughts

For the Future

For the Future

As of now Sproutly isnt fully developed to be even considered to be published as an actual app, but it has a lot of potential to create a space for students.


If I were to progress in developing this app I would keep tabs on how users engage with it. Ask more questions such as, What works? What doesn’t? Could anything operate more smoothly? How will user needs differ through time? I would also do more user research and concept design testing to make it more fitting for users.

Learning 01 : Design Libraries

Learning 01 : Design Libraries

During this project there was something I noticed when creating it. I learnt the importance of having a design library of components and other things. During the design phase i spent soo much time creating the same components one by one, duplicating one by one when i could've just used a library to make that process much more easier.

Learning 02 : User Importance

Learning 02 : User Importance

I started this project with no specific user, it was a broad idea with no foundation. All I knew was that I would like to tackle the problem of event planning.


With this project I recognized the importance of users and how their input has been very helpful in all stages of my design process.

Navigation

Navigation