Creating a Focus-Oriented Web App
for Students”
Vidarbha Youth Welfare Society's
Prof. Ram Meghe Institute of Technology & Research
Badnera, Amravati (M.S.) 444701
CERTIFICATE
This is to certify that following students of first year semester-II Department of Computer Science &
Engineering(Iot) has completed the term work of the subject (1SF06) Design Thinking prescribed by Prof. Ram
Meghe Institute of Technology & Research, Badnera-Amravati during the academic term sem-II 2024-25.
Sr. Name Enrolment No. Class Signature
No. Roll No.
1. Anagha Suryavanshi 24BTCSIO1009 59
2. Tanvi Paturde 24BTCSIO1006 47
3. Manvi Raut 24BTCSIO1045 53
4. Palak Vyawahare 24BTCSIO1011 66
5. AarG praghane 24BTCSIO1060 49
6. Parth Jaiswal 24BTCSIO1021 29
7. Tejas Wagh 24BTCSIO1001 67
8. Pratyush Sawai 24BTCSIO1058 57
Prof. [Link]
Subject Teacher
Department of CSE(IoT)
PRMIT&R
Date:
CONTENTS PAGE NO.
1. Introduction 1
2. Empathize 2
3. Define 3
4. Ideate 4
5. Prototype 5
6. Test 6
[Link] 7
8. Source Code 8 – 10
9. Screen Shots 11
10. Team 12
11. Imapct 13
12. Conclusion 14
Acknowledgement
W e, the students of 1st year CSE(IoT), would like to express our heartfelt
gratitude to everyone who has supported us throughout the journey of
conceptualizing and developing our Design Thinking project titled “Study
Buddy – A Focus-Boosting Productivity Web App for Students.” This project
has been a deeply engaging experience that taught us not only the
principles and applications of design thinking but also the value of
collaboration, empathy, and continuous ideation.
We are immensely thankful to our course instructor for introducing us to
the structured and human-centered approach of Design Thinking, which
enabled us to approach real-world problems creatively and
systematically. Our sincere thanks also go to the academic staff and
mentors who took the time to encourage us and offer valuable insights
during brainstorming and development.
Moreover, we extend our appreciation to our fellow students — friends,
roommates, classmates, and peers — who generously shared their honest
thoughts and challenges related to staying focused while studying.
Although we didn’t conduct a formal survey or field research due to
logistical constraints, the qualitative input gathered from casual but
insightful conversations played a pivotal role in shaping our
understanding of the problem space.
Finally, a special mention must be made of our team members who
showed exemplary dedication, curiosity, and willingness to explore
unfamiliar territory. Each of us brought something unique to the table, and
it is only through this diversity of perspective and shared commitment
that we were able to design a solution that we believe can truly make a
difference in students’ lives.
Introduction
[Link] [Link]/page/1
The need for focused and distraction-free study
environments has become more critical than ever in the
modern academic landscape. Students today are constantly
bombarded by digital distractions, ranging from social media
notifications to endless YouTube recommendations, making it
increasingly difficult to stay disciplined and productive.
Despite having access to vast educational resources, many
students struggle with time management, concentration, and
the ability to build consistent study habits.
With this real and relatable challenge in mind, our team set
out to create a meaningful and accessible technological
solution that could help students like us maintain focus during
study hours. The result of our collaborative effort is Study
Buddy, a web-based productivity tool built using design
thinking principles. The app is tailored specifically for students
and revolves around one simple goal — to make focused
study not just manageable, but enjoyable.
Through this project, we explored the entire design thinking
process, starting from empathetic observation, problem
definition, ideation, prototyping, testing, and ultimately
planning its implementation. This documentation captures
our entire journey — the thought process, creative challenges,
problem analysis, design decisions, and the impact we
envision Study Buddy having on the academic community.
Empathize
[Link] [Link]/page/2
In the Design Thinking process, empathy is the cornerstone that anchors the entire
methodology. Since the ultimate goal of our project was to develop a solution that
resonates with students, we began by placing ourselves in the shoes of the very
people we were designing for — in this case, ourselves and our peers.
Being students ourselves, we naturally had firsthand experience of the struggles
involved in maintaining focus during extended study sessions. However, to avoid bias
and broaden our understanding, we deliberately observed and discussed with
others in our circle. These included friends in other departments, students in different
year levels, and even a few who had recently graduated. These conversations were
casual, non-intrusive, and spread across multiple days and scenarios — like walks
between lectures, visits to the library, and even video calls on late nights before
exams.
Some of the recurring issues that surfaced included:
• Getting distracted by mobile phones and social media apps during self-study time.
• Difficulty in building a structured routine, especially in an unregulated environment
like home.
• The absence of a motivating factor to keep them going during long sessions of
reading or coding.
• The tendency to procrastinate when there is no short-term feedback or visible
progress tracker.
Interestingly, many of our peers expressed that they were aware of the Pomodoro
technique or had tried timer apps in the past, but none of them were consistent in
using them. This pointed to a deeper insight — the solution needed to be more than
just a timer; it needed to create a sense of emotional connection, gamification, and
reward, however small, to make users come back and build a habit.
All of these observations formed the emotional groundwork of our project. They
helped us form a well-rounded understanding of the user’s pain points, not just at
the surface level, but at the motivational and psychological level — which is where
design thinking truly begins.
Define
[Link] [Link]/page/3
Once we had gathered a substantial amount of anecdotal input and
reflected deeply on our shared experiences, we transitioned into the
‘Define’ phase of the Design Thinking process. This stage was about
synthesizing our empathetic observations into a clear and actionable
problem statement.
We started by reviewing all the patterns and themes that emerged from
our informal interviews and discussions. A key realization was that
although the exact distractions varied from person to person, the
underlying problem was essentially the same: a lack of structured,
positive reinforcement during self-study sessions. Most existing tools
either lacked simplicity or failed to create a sense of personal
engagement.
After multiple rounds of whiteboarding sessions (yes, virtual and
physical!), internal debates, and note-taking, we framed our problem
statement as follows:
“Students need a simple, engaging, and psychologically motivating
way to stay focused during study sessions, because current solutions
often lack emotional connection, usability, or habit-forming design.”
To deepen this definition, we also created a detailed user persona — a
hypothetical but realistic student we named “Arjun,” a second-semester
[Link] student who has trouble staying consistent with his study goals.
By mapping out Arjun’s daily routine, motivations, frustrations, and
habits, we were able to further refine what the ideal solution must offer:
ease of access, minimal distractions, gamified rewards, and a clean
interface that doesn’t overwhelm.
This phase gave our team a solid direction to proceed into the creative
realm with confidence and clarity.
Ideate
[Link] [Link]/page/4
T he ideation phase was both the most exciting and the most chaotic
part of the project. Having defined our problem, the next challenge was
to generate a broad spectrum of possible solutions, no matter how wild,
impractical, or unpolished they seemed initially.
We held multiple brainstorming sessions, both online via Google Meet
and in-person during group meetups. One of the rules we followed
religiously was “no idea is a bad idea.” This open environment led to a
flood of creative suggestions. Some of the ideas included:
• A voice-activated study timer that locks your phone screen.
• An AI companion that gives you study reminders.
• A habit tracker that awards digital badges for consistency.
• A virtual classroom-like setting with avatars for peer accountability.
After compiling a large pool of ideas, we used a combination of
feasibility analysis, impact evaluation, and group voting to narrow down
our concepts. We filtered ideas based on three key parameters: (1) Can
we build it with our current skill set? (2) Will it meaningfully solve the
problem? (3) Is it appealing enough for students to use regularly?
Eventually, we converged on a simple but powerful concept: a clean,
distraction-free web app that allows users to set customizable study
sessions, track progress over time, and earn visual rewards like plants or
stars as they study. This concept was inspired in part by gamification
principles and existing models like Forest or Habitica, but with a unique
twist tailored specifically to Indian [Link] students.
We then sketched out mockups, drew wireframes on paper, discussed
color schemes (we settled on soft blues and greens for calmness), and
finalized the name “Study Buddy” to reflect the app’s supportive and
encouraging nature.
Prototype
[Link] [Link]/page/5
O nce we had a solid foundation of ideas, we transitioned into the
prototyping phase of our project. This was a particularly exciting stage
for us, as we began translating our conceptual solutions into tangible
forms that could be interacted with. As first-year B. Tech students, we
understood that our prototype needed to be both technically feasible
and relatable to our target users — fellow students who experience
issues with productivity and concentration.
Given our project was a web application, we chose to build a digital
prototype using front-end technologies like HTML, CSS, and JavaScript,
and added minimal backend simulation with JavaScript logic to
demonstrate interactivity. We utilized wireframing tools like Figma and
Balsamiq in the initial days to sketch out possible interfaces, screen
transitions, and the user journey.
We paid special attention to key features such as the Pomodoro timer,
task manager, and distraction-free writing pad. The prototype aimed to
simulate actual user interaction and feedback, so we designed each
section with visually appealing components — clear color coding for
timers, iconography for different task types, and easy-to-use buttons
with hover effects. We also implemented modal dialogues, navigation
bars, and progress trackers to enhance user engagement.
Despite our limited experience, we were determined to create a
believable and visually consistent experience. We took inspiration from
existing productivity tools but ensured our interface remained unique
and student-focused. Our aim was to make the design intuitive so that
any student, regardless of technical expertise, could navigate and
benefit from it.
The prototyping stage gave us invaluable insights. It helped us refine our
features, get early informal feedback from friends and classmates, and
visualize the application as a real product. This phase reinforced our
Test
[Link] [Link]/page/6
Testing was a critical part of our project where we sought to
understand how our prototype functioned in the hands of real users.
Since conducting formal surveys or large-scale user testing was beyond
our reach as first-year students living off-campus, we had to be a little
creative with our methods.
We shared our prototype with classmates from various departments
and even some of our juniors who were preparing for exams. We
observed their reactions informally — noting where they struggled, what
features they found useful, and what they ignored. These sessions were
casual but incredibly informative.
We received feedback like:
• “The Pomodoro timer is helpful, but could you add an option to
customize the durations?”
• “The UI is clean, but I’d love to have a dark mode for late-night use.”
• “Adding a motivational quote at the start would be cool!”
We made notes of these suggestions and iteratively improved our
design. While we couldn’t implement every idea due to time and skill
constraints, we prioritized those that aligned with our core goals.
Our testing approach might not have followed traditional UX protocols,
but it was real, honest, and based on genuine peer feedback. This not
only helped us improve the application but also boosted our confidence
as developers and designers. We learned the value of early user
feedback, the importance of intuitive design, and the art of simplifying
complex interfaces for broader usability.
Implementation
[Link] [Link]/page/7
Following successful testing and iteration, we moved into the
implementation stage. This phase involved converting our working
prototype into a functional web application. We used basic web
technologies — HTML for structure, CSS for styling, and JavaScript for
logic. Though our stack was simple, we ensured our implementation was
robust, user-friendly, and mobile-responsive.
We divided the work among the eight of us — some focused on coding,
others handled design tweaks, documentation, and content. Since we
weren’t hosted in a college hostel, coordination was done remotely via
WhatsApp, Google Meet, and shared GitHub repositories. We scheduled
regular virtual meetings and even did screen-sharing sessions to help
each other debug code or finalize layouts.
The web app includes key features like:
• A customizable Pomodoro timer with short and long break options
• A to-do list manager with task completion indicators
• A distraction-free notes editor for writing
• A motivational quote section refreshed every session
We optimized the site to work smoothly on desktops, tablets, and
smartphones, as we assumed many students would use their phones to
access the app. Accessibility was also kept in mind — we used clear font
styles, appropriate contrast, and logical navigation structures.
The entire experience of implementing the app was empowering. It
taught us more than just coding — it taught us teamwork, time
management, problem-solving, and most importantly, how to think
from a user’s perspective.
Source Code
[Link] [Link]/page/8
❖[Link]
Source Code
[Link] [Link]/page/9
❖ [Link]
Source Code
[Link] [Link]/page/10
❖ [Link]
Screenshots
[Link] [Link]/page/11
Homepage Of the Web-app
Homepage after entering data
from user
Teammates
[Link] [Link]/page/12
Our Team Members
Coding and Testing
Impact
[Link] [Link]/page/13
T he impact of our project, even at this preliminary stage,
was significant. While we didn’t have the resources or access
to conduct a formal statistical study, we informally tracked
how students interacted with our app over a span of two
weeks. Many of our peers began using it regularly, especially
during their exam preparation and assignment deadlines.
We noticed that students using the app reported better focus
and reduced phone distractions. One of our friends shared
that she was finally able to maintain study streaks because of
the timer feature. Another said the ability to track tasks
visually gave him a sense of achievement.
The fact that our simple creation could positively influence
someone’s academic discipline was deeply satisfying. We
realized that even without large budgets or advanced
technologies, student-led initiatives can make a real
difference when guided by genuine empathy and thoughtful
design.
The impact was not only external. Internally, it shaped our
mindset as engineers. We began to see technology as a tool
to solve human problems, not just a subject to study. It made
us excited for the future, where we would apply these same
principles on a larger scale.
Conclusion
[Link] [Link]/page/14
This journey of building the “Study Buddy” productivity app
through the lens of design thinking has been transformative
for all eight of us. As first-year [Link] students with limited
technical exposure, we began with only an idea and a desire
to solve a relatable problem. Through empathy, observation,
ideation, prototyping, testing, and implementation, we crafted
something meaningful.
The project wasn’t just about building an app — it was about
learning to collaborate, empathize with users, adapt to
feedback, and push our creative limits. We learned how every
phase of the design thinking process added unique value and
structure to our work.
We now understand that design is not just aesthetics, and
engineering is not just code. Real innovation happens when
both come together to serve real human needs. We’re proud
of what we’ve created, and we hope this app continues to
help our peers as much as it helped us grow.
This experience also reinforced our belief that even in our
early years as students, we are capable of initiating change
and creating technology that matters. It has sparked our
interest in user experience design, product development, and
ethical engineering — areas we hope to explore more deeply
in the coming semesters.
THE END