StudyBuddy - Book Study Sessions!
Dibyansu Mohanty
Freelancer, UX Researcher, Visual Designer
Project overview
The product: Project duration:
StudyBuddy is a study session booking app for May 2021 - April 2021
the students of CET Engineering College. It
allows the users to book empty classrooms for
their study sessions
Project overview
The problem: The goal:
Users need to a space where they and their Design an app through which users can use to
friends can have their own study sessions. It’s book classrooms in advance
hard to find empty classrooms within the
university as the campus is huge and
individually finding a space is time-taking
Project overview
My role: Responsibilities:
UX Research, Visual Design. Design from Conducting interviews, paper and digital
conception to complete booking wireframing, low and high-fidelity prototyping,
conducting usability studies, accounting for
accessibility, and iterating on designs.
● User research
Understanding ● Personas
Problem statements
the user ●
● User journey maps
User research: summary
I conducted interviews and created empathy maps to understand the users I’m
designing for and their needs. The primary user group identified through research
Was day scholar students of the CET Engineering College.
This user group confirmed initial assumptions about Study Buddy - Study Session booking, but
research also revealed that booking was not the only problem but communication within the app
with other users was also needed
User research: pain points
1 2
Finding Classrooms Time
The campus is huge and Looking for empty
it’s really tough to find classrooms manually
empty classrooms takes a lot of time
Persona: Tushar Kumar Panigrahi
Problem statement:
Tushar is a an
engineering student of
CET Engineering College
who needs an app to
find and book empty
classrooms
because it’s hard to find
classrooms manually.
User journey map
Mapping Tushar’s user
journey revealed how
helpful it would be for
Image of user
users to have access to a journey map
dedicated StudyBuddy - A
Study Session Booking app.
● Paper wireframes
Starting ● Digital wireframes
Low-fidelity prototype
the design ●
● Usability studies
Paper wireframes
Creating paper wireframes of the
landing page of the app from where
Image of paper
the user can book classrooms. wireframes including
five different
versions of the same
I wanted to exphasize booking screen and one
image of the new,
button and also show friends and refined version
groups!
Digital wireframes
As the initial design phase
Distinctive
Booking Button
continued, I made sure to
keep emphasis on booking
button as this is the main
Show groups
functionality of the app and friend
Low-fidelity prototype
Screenshot of
prototype with
connections or
prototype GIF
The low-fidelity prototype connected the primary user flow of booking a classroom sucessfully,
so the prototype could be used in a usability study with users.
Click here to test the low fidelity prototype
Usability study: parameters
Study type: Location:
Unmoderated usability study New Delhi, India
Participants: Length:
5 participants 20 minutes
Usability study: findings
These were the main findings uncovered by the usability study:
1 2
Booking Pages Flow No Confirmation Screen
There was no way to There was no
switch and forth between confirmation page before
the various phases of finalizing the booking
booking process
● Mockups
Refining
● High-fidelity prototype
the design ● Accessibility
Mockups
Before usability study After usability study
There were a few actionable
insights I came up with
from the usability studies.
One of these was adding a
booking review option
Mockup 1 Mockup 1
within the app’s booking before after
process to help users
review, recheck and even
edit before confirming 1
last time.
Key Mockups - Digital Low Fidelity
Main Main Main Main
mockup mockup mockup mockup
screen for screen for screen for screen for
display display display display
Key Mockups - Digital High Fidelity
High-fidelity
prototype
The hi-fi prototype followed the
same “booking process” user flow Screenshot of
prototype with
as the lo-fi prototype, and connections or
prototype GIF
included the design changes
made after the usability study.
Click here to view the high fidelity
prototype!
Accessibility considerations
1 2
Used icons to Used a higher
help make contrast color palette
navigation easier. for improving
accessibility for users
with visual
impairment
● Takeaways
Going forward ● Next steps
Takeaways
Impact: What I learned:
The StudyBuddy app really focuses on the While designing the StudyBuddy App, I learnt
students ability for hosting their own study that the first ideas for the app are only the
sessions, invite their friends and quickly find beginning process. Usability studies and peer
classrooms instead of manually looking for feedback influenced each iteration of the app’s
classrooms throught the university designs. As I kept working and iterating, I learnt
more about accessibility and following the
WCAG guidelines
Next steps
1 2
Conduct another Conduct more user
round of usability research to determine
studies to validate any new areas of
whether the pain need.
points users
experienced have
been effectively
addressed.
Let’s connect!
Thank you so much for your time and effort in reviewing my work on the StudyBuddy
App! If you’d like to see more or get in touch, my contact information
is provided below.
Email: dibyansumohanty@gmail.com
Thank you!
Have an amazing day!
