KRU is a social media and organizational app for fitness and martial arts gyms. Users can view and make training schedules, compare these schedules with workout partners and sign up for gym memberships and events. The gamified system offers points for attending events, that can be used for gym merchandise, classes and other rewards. The name is derived from the Thai word for "teacher."
How might our product increase the conversion of accepted invites to event attendees?
Our goal is to create a fitness app that will help users get out and do more activities in person. The app offers incentives for attending seminars and classes, and also has as a social media element so old and new gym members alike can socialize and coordinate to further promote attendance.
The app is to be designed for mobile platforms.
I kicked off the project by collecting research on popular apps currently in use for fitness and events. I chose to focus on Meetup, FitTogether, and MindBody.
The first product I looked at was Meetup, as it correlates directly with our problem of event attendance and helping convert RSVP's to attendance. Meetup is focused, mainly built around the GPS map of the event and the event details. The minimalist UI is successful in accentuating core content.
At times it can be information heavy and the large mount of white content makes the site seem dense or outdated. The ads often take over the information hierarchy due to the color imbalance.
The minimal UI and simple event pages would serve as a heavy inspiration when designing the event pages for my product.
I next looked at an app called FitTogether, a product built around finding gym partners and fostering online fitness communities. I was intrigued as the app had a similar premise to the solution I envisioned of a fitness social media platform.
Upon exploring the app however the population was very low, and my feed was showing the closest users and content to me were often across the country. The app also had so many features that it was difficult to navigate.
While discouraging at first, researching this product was very helpful in informing my own design to focus on building a platform for the already existing real life social networks of gyms and martial arts classes to avoid low user interaction and internet shyness.
I researched MindBody as the name had come up multiple times in conversation, and in my research interviews. It is currently very popular as a planner, event coordination space, and as an administrative tool for gyms and fitness instructors. For its users I had spoke to, the decision to adopt it is made by the institutions and instructors, and the students and customers populate it naturally when they sign up and attend classes.
Mindbody not only lets users RSVP and view events but it has a useful calendar system keeping track of these upcoming events for the user and seeing what else is offered by the gym or instructor.
By taking inspiration from this "gym first" user adoption style, the planning system, and adding a social media element, I determined I could increase user attendance without winding up with just another low population social platform.
The second part of my preliminary research consisted of five interviews, screened with an initial questionnaire for parameters like attending a gym or martial arts, familiarity with social media and other factors. Below are the excerpts that were most illuminating to the design process.
Do you do martial arts with a partner or are you a lone wolf? Why?
In my pre-teens I would go by myself but ever since I took it seriously, or semi serious in my teens I would go with a partner. Having training partners is incredibly important in martial arts. Its partner based.
More often than not you make friends from the gym if you like it.
How do you you usually communicate and organize between your partners? Facebook?
No, usually text or Instagram. Our coach has a very strong social media presence. He usually organizes over Instagram stories, for news and meetups and to organize parties. He usually has staff doing work, and organizes open sparring with other affiliated gyms and networking like that. Im at this gym because they are willing to let students come and go and train at other places. Coach appreciates migration and cross training.
Do you ever have trouble making the effort going to the gym or classes?
Yes, it was always hardest making the decision to actually travel to the location. When my gym and martial arts class were in the same place at school I would have a hard time going to the gym but not Jiu Jitsu despite them sharing the same building.
Have you ever been a part of a social media group for a martial arts seminar, dojo or fitness event?
Yes, for Jiu Jitsu it was cliquey sort of, but the community was engaging, in a sort of earnest Facebook way. It did allow me to know about seminars and other events. The boxing one was much more casual and relaxed but that's probably due to the nature of the smaller, neighborhood gym with more real social connections.
How many times do you go to the gym, and how long have you been doing it?
I go a couple times a week. I've been doing this on and off more or less since being a teenager.
Do you usually go alone or with a gym partner?
I go by myself. Maybe once or twice with a partner a few times. Its my own schedule. I get to go on my terms. Plus its hard to coordinate with other people.
Do you connect with the gym over social media?
No they have an app that they have you sign up for called “Mind and Body” that does the scheduling and coordination for classes.
I started ideation for the app by choosing to sketch out a sitemap, instead of minimal solution routes, as the app is largely a social media platform it functions more like a carousel cycling through page modules of various needs than a few simple linear decisions. It made the most sense to group analogous features each type of page would have and map out a simple browsing or filing system to quickly rotate between them.
The rough draft of the site map was designed to have a Windows directory style organization of nested pages, or tiered content categories within a profile. The organization is kept at only two tiers of subcategories to prevent users from getting lost in too many subsections. The first tier often contains a combined group of the subgroup content to allow for quick selection of favorites, or the user can split off into the subgroups for a more focused browse of content.
I began iterations of the theme and logo pretty much concurrently with the site architecture, as the logo design often gives me branding cues and inspiration for both the aesthetic of the app, and interactive UI elements that compliment the feel of the app. I wanted a balance between minimalism and austerity to give an athletic sturdiness, but also a zen simplicity.
The logo began as a K, drawn by brushstrokes to form a faux character in the general "Wai Kru" Thai boxing pose. Hundreds of brushstroke characters later, I wound up with a balanced, weight-bearing kind of "Blade Runner" K.
The screenshots in the back are from Bandcamp and other organizational hosting sites, as I was narrowing the focus to accommodate gym communities so their real life social connections could populate the app.
The low resolution wireframe was started with the intent of building a fully interactive low resolution prototype in Figma, as I was designing a scratch made UI system to go with the app and needed to make sure I hadn't overlooked any pain points that might unexpectedly arise. Instead of a standard toolbar of icons I wanted most of the UI elements to be text buttons and interactive headers, as is seen in some of the other fitness apps like MindBody, that are meant to be accessible to all generations of user. The "interactive header" concept was compiled into a text button toolbar that remains consistent across all types of pages on the app.
Validation started with a similar screening questionnaire to my research interviews. Five participants were selected to run though the low res prototype in Figma, asked to complete a series of tasks and scenarios following a blind exploratory run of the prototype. Shown below are the two runs most informative to the design.
Codes went to the gym page but had some difficulty finding the staff under the tab titled “Gym” as the tab also could describe gym pages instead of gym staff. Being familiar with UX/UI design, Codes was enthusiastic about a menu that had everything in one place like this “directory” style. Codes also recommended more descriptive tabs per page type, and possibly a different type of tier arrangement, one more visible, such as a drop down style tab.
Codes was able to achieve all imagined scenarios and tasks after a few runs, but had to learn the behaviors by going through each category more or less once. This was antithetical to my implementation of the directory menu, as the app must be used by gym and martial art studio owners who may not be from a tech savvy generation. It should be descriptive and accurate the first time around.
Lee Lee was able to successfully complete the tasks after the initial cold run, only navigating to a wrong page on one occasion trying to find the gym page in the social content list. Lee Lee had no strong feeling about the UI system, but expressed some thoughts about the redundancies of content existing in multiple pages and content lists. Although this is by design, I will make a note of this and keep it in mind during the hi-res testing, where a more detailed prototype will give a better idea of how the content categorization functions.
The logo was chosen to be a bold, simple, calligraphic icon to denote simplicity and discipline. I wanted the logo to take inspiration from Asian calligraphic conventions to evoke mindfulness and physical well being, but have enough futurism and abstraction in its design to avoid the disrespectful "Take-Out Font" pitfall of making a crass approximation. I wanted something both Eastern and Western enough to look at home on a neon billboard in Blade Runner L.A.
When building the app, I envisioned minimalist, right-angle framework for the layout and page design, inspired by the notepad aesthetics of the apps I had researched like MeetUp and MindBody. I built a toolbox of interactive icons that incorporated these hard angles in their design language.
The color palette for the app is purely greyscale, to not only go with our formal, minimalist theme, but as KRU allows for gym pages to customize their profiles with background colors and text color, the default palette of the app would have to look good with any combination of images and colors. The app makes heavy use of the color black to evoke formality, cleanliness, and quiet.
To compliment our aesthetic motif, I chose the sans-serif typeface "SF Pro," due to its clean modern letterforms, and wide selection of weights and variants.
Informed by the testing runs of our lo res prototype, I switched the style of the main navigation toolbar to be a drop-down format instead of the toolbar options changing into a bar with contextual subset categories. This allows the user to browse through the tabs and their subset categories without having to commit to a new page, so the user can go through each "directory" without losing visibility of their other navigational options on the page.
Also added was a "gamification" element to further incentivize users into attending events. Successful attendance earns the user points that can be spent on a variety of things from merchandise to membership dues, and would also create promotional opportunities for gyms and martial arts studios that choose to adopt this product.
With this new setup, I populated the hi res prototype with fully detailed pages of each type so we could get accurate feedback on how well users can complete event attendance tasks by navigating through a social media functions.
Our validation of the hi res prototype again chose five participants to run though the final prototype in Figma. A new set of scenarios were given to them in order to best highlight some of the features and functionality newly added to the prototype from the low res design. In addition to validating the new drop down toolbar buttons I wanted to test the overall fluidity in user's ability to RSVP and view social media information that would make them more likely to attend.
James completed the first task by going through the user’s dashboard list of events, finding the event, and checking event page's social tab to see if Mr. Martini was attending. This is a valid alternate route I had not intended, but validated the synergistic way I had hoped the social media features would mesh with the event platform.
Being a sailor gone for half the year, James was mainly intrigued by the social features as he could get in the loop with friends to get the most out of events and gym outings. James however had difficulty completing his custom scenario as he wanted to spend some of his points from the gamified system and had no way of seeing how many points were available to spend.
After a rocky blind run Rochelle was able to get the hang of the toolbar system, but tended to avoid the first options on the dropdown buttons. She was initially confused as to the social media aspect of the platform and felt that the non-proper usernames weren't trustworthy. Rochelle was also more drawn to the top utility toolbar and did not start interacting with the main header toolbar and interactive content until a minute into the run.
After coaching, Rochelle was able to successfully complete all scenarios. She recommended having the “event” tab be the default landing tab for pages like and as the leftmost option of the menu.
Yes, Cam was able to fluidly sign up for classes as well as interact with Mr. Martini as a result of understanding the layout and UI mechanics early on. He was very enthusiastic about the menu type as he understood what the "interactable headers” were going for.
Cam completed all scenarios with no coaching or observable pain points. He recommended a "live" feature as many of Cam's acquaintances would often do do this with other social media at the gym.
As user James suggested, I added a heads up style indicator of how much points the user has. As user Rochelle suggested I added full names to the users bio line , to create more trust. From the scenario testing I gathered that the overall features are successful in promoting event attendance.
Here are some user flows from the final hi res prototype. You can try it for yourself here on Figma.
This is a flow going through how a user would check for upcoming events in the events tab of the dashboard toolbar, and go to the event page to RSVP. After, the flow shows the user browsing the gym profile putting on the event. The toolbar changes slightly depending on page context but the layout and options stay consistent for intuitive use.
In this flow through the prototype, the user is browsing the social media options available when browsing a friend's, or other user's profile. The user can see posts, events the user is attending, friend's upcoming schedule, photos and social network, depending on privacy options. The flow shows the user browsing their friend's affiliated gym list in the social tab to sign up for the martial arts classes their friend goes to.
The design cycle of KRU was challenging in that not only was I looking to solve the initial problem statement but I chose to experiment with an idea for a different style of UI than normally encountered in similar products. It doubled the work for testing and required a whole rebuild of the UI when going from the low res to hi res prototype but it was worth it to follow that idea to its resolution, and see for myself the pros and cons. It did a great job of allowing a ton of categories to divided up into different group sizes for increasingly focused browsing, and the text buttons made it self explanatory to first time users. However an unforeseen pain point of the concept is that some users didn't realize that the text button they clicked to expand the list was itself a clickable option, and would likely take some learning for a number of users.
The problem I set out to solve is a little more tricky to gauge in its success, without having real events and attendance numbers to gauge. However, the concept we arrived at seems very sound. Having researched a similar product on the market that wasn't very populated due to it being a social media app for a niche population, I learned you can market to users in a different way, by catering to gyms and fitness locations first, like in our MindBody research, and have users with real life existing social connections onboard as a virtual extension of the gym. Adding a social media element for these connections and a gamification system that encourages participation is great concept that would attract gyms and martial arts schools, and their existing userbases, giving both of them new tools and opportunities without just making another social platform for a smaller amount of people.
