A simple idea for a college mini project turned into a full-fledged UX Case Study — Svasthyam: Meet your Fitness Networking App
6 months back — in my 6th Semester of B.Tech CSE, we were dropped a bomb by our college faculty that no Junior would have thought of — A college project being a subject in the semester along with other existing subjects.
This is not unconventional as many colleges had the practice for initiating projects for Computer Science students in the early years of their undergraduate itself and not just in the final year. In fact, some of us were doing projects of our own and interning somewhere as well. But being from a never-really-heard-of tier-3 college, for 99% of us — it was kind of a shocker getting it as part of our academic before final year.
Long story short — I managed to get by with a team of people who had NO IDEA about the implementation of ANY Tech Stack from zero to building a simple MVP using HTML, CSS, JS, PHP, MySQL.
The Idea
Most of the faculty coordinators assigned to teams imposed their own ideas on the students but our team was among the lucky ones whose mentors provided them with the creative freedom to pursue our own ideas. But, what should be the idea?
I had been into Product Management already by then so I thought to conduct some user research on a simple idea that was in my head. This was based mainly on my personal experience and observations— Will working out with a group of people who had similar interests and fitness goals make them more consistent? We had less time and resources on our hands. So we did best what we knew and had — circulated a Google Form to our friends and family and conducted real-time User Research with our classmates and some faculty.
The result — most of them said that they liked working out in a group since it made the session more interesting and appealing due to the company. However, we discovered some gaps:
— People might not be as comfortable working out with strangers.
— Not everyone is used to or is comfortable just connecting virtually and working out.
— People were using existing fitness apps with other features which they might not want to quickly trade with this one.
So, we came up with these additions:
— We will allow people to give connect according to locality and friend circle along with common interests and gender preferences.
— There will be an option to connect virtually or arrange workout sessions in person through scheduling.
— A swipe left and swipe right (much like a dating app) to find the perfect workout buddy for those who wanted a workout “partner” instead of a workout “group”.
So an idea was born out of one-week of research — Svasthyam: The only fitness App that you will ever need.
We were in the second week of our project and the planning was going well but what about Tech implementation? Our entire team was a Tech Noob, except me who had only limited practical experience in Frontend and extremely basic knowledge on the backend. We did not have the option to use No-Code tools since we had to strictly adhere to project instructions on using Tech Stacks only.
The so-called “Website MVP”
GitHub-link to Svasthyam’s website MVP
Being the team leader I had to take the best decision possible to finish the project in the next 2–3 weeks. So I gathered my team of three and asked about their interests in project implementation — luckily they were interested to learn and implement instead of ditching their team leader to do things on their own like many of the other teams were facing.
But we had to decide — which Tech Stack and will we be able to build all the features? Owing to the limited time on our hands and lack of fundamentals, we decided to go with building a website with the most basic version of our features —
— Put our networking feature in beta-testing mode i.e let users sign up and then track later how many were trying to connect with people (at this point we will only share dummy profiles on this feature).
— Add manual blogs on diet and fitness and show dummy fitness trainers.
— Let users sign up, update their profiles according to their preferences and showcase their dashboards.
These might seem like extremely basic features but if you ask a person with zero-coding experience and an implementation time of 2–3 weeks along with other commitments — it might sound Godly.
I had some practical knowledge of react.js, node, and express but I could not expect my team (who did not even know HTML and CSS at this point) to learn and implement the same due to the limited time period. So, we chose the most basic Tech Stack — HTML, CSS, and JS for the front end and PHP and MySQL for the back end.
I guided the team as much as possible — sat down and learned PHP myself, got on daily meetings with them after college hours, and assigned and rectified mistakes while making sure the team does their end. We had to do multiple rounds of changes in documentation as well since we had to adhere to college guidelines. The result? We had a website MVP in our hands and a stellar presentation which was way better than the worst-case scenario of our project being straight-out rejected.
The initial UX Prototype
When the Mini Project initiated, I had already enrolled myself into Google’s UX Design Professional Certificate Course on Coursera. In the second or third sub-course, I had to start working on a real-time project from taking it through all the phases that a UX design has to go through — Understand, Ideate, Decide, Prototype and Test.
Our mini-project was done and at this point I thought — why don’t I take Svasthyam and build the UX case study on that? So I did that — from defining a proper problem statement, to completing the first version of the design prototype and performing Usability Testing.
In this journey, I learn to implement so many of the little but important steps that a UX designer needs to take to implement a User-Centric Design:
— Defining a Problem Statement with the User in Mind.
— Understanding and Creating Targeted User Personas.
— Defining the User Goal Statements and User Stories.
— Tracking the User Journey Map to understand Pain Points of the User.
— Performing Competitive Analysis in the existing market of the product.
For the first-part of this entire process, I went ahead to create and perform Usability Testing on a low-fidelity prototypes of the App. I picked my target audience according to my User Personas and let them use the app while I was moderating the study. These interviews involved both in-person and virtual participants among my circle itself.
The result was simple — a crisp initial case study of what the app defined, what my initial thoughts were, the research and Usability Study and what were the changes required according to real-user testing and research.
The UX Case Study
Post implementing those changes to the low-fidelity prototype, I started working on the High-Fidelity mockups and protype of Svasthyam on Figma. The Usability Testing on the Low-Fidelity prototype though limited proved extremely useful and I was able to quickly work through finishing the entire initial mockup process in a span of 2–3 days.
Being scrappy was essential as I had limited time and various other commitments so I utilized whatever I could — chose Google’s material UI sticker sheet and royalty-free images out of the web and implemented the interfaces from the earlier low-fidelity version into the actual prototype.
This entire process made me learn a lot of stuff — from research to design to tools to being as scrappy as possible all within a span of couple of months!
Here are the Low-Fidelity and High-Fidelity mockups of the Svasthyam:
So that was the entire process of the UX Case Study from start to finish from being a simple college mini-project where we had no clue of how to take it forward to a complete UX Case Study!
About the Author:
Hey! I am Diksha, a product manager at heart and I help companies and brands in improving their products and services and achieve brand identity through customer engagement. Thank you for sticking till the end and feel free to drop in your suggestions regarding improving this article!
If you are a startup trying to establish brand identity or even trying to improve your product/service through data-driven decisions, let’s connect: Calendly.
