NORTH JERSEY MUAY THAI
North Jersey Muay Thai has the opportunity to both gain a larger following and advertise their services across multiple platforms with a newly designed website. While the current site isn’t at all outdated, the design and features only caters to prospective students rather than current ones.
Understanding user needs through interviews, surveys, and competitor analysis, I will redesign the NJMT website to allow for easier navigation, and accessibility to prioritized links and information. The new design should not only encourage more users to contact the business, but keep current members pleased with easy to access information and news.
Details
Project: NJMT Responsive Web Redesign
Timeline: 10 Days
Role: UX Designer
STEP 1. RESEARCH
RESEARCH GOALS
- Understanding how users go about researching and signing up for gyms
- What are the reasons users ultimately sign up/contact or don't when they've gotten to a gym's website
- Learning about the experiences after having signed up, and if there was anything not transparent or communicated by the gym
RESEARCH METHODS
- Interviews: I will be conducting interviews with participants listed below, either via a phone call, text thread, or an in person session. I will have a set of questions, some listed previously, and write answers while also hoping to expand on answers that may lead me to questions I had not thought to ask. All questions are also not specific to Muay Thai or martial arts, but to gyms in general.
Competitive Analysis: Lastly, I will look at the closest competitors to gain an understanding of both their weaknesses and strengths.
PARTICIPANTS
Ages 19-35
Single Men
In Greater NYC Area
Working Full Time
Active
INTERVIEWS
Questions
What do you look for when you consider signing up for a gym? Do you look for classes, gyms, or sports? If preference is at-home workouts, what's some main factors for choosing home over a business?
What does the process look like when choosing a gym? Where do you start? What does researching a gym look like for you? Do you like to try gyms out before signing up?
What are some reasons you've stayed with gyms in the past?
What are some reasons you've left gyms in the past? How did leaving feel? What was the process/experience like?
What excites you about gyms or classes or working out in general?
What do you feel are grievances about gyms?
Results
Given the findings above, a lot of the participants aligned in most of their answers. Location is the biggest factor, but next to that is cost and quality. Because they all mentioned that being able to go without waiting for equipment, that tells me that with the location priority in mind, they don’t want their time wasted. They want to know exactly what they are getting with the time that they’re there. Also, because all of them used google search to look up gyms, they are dependent on website and internet information to help them make a decision. And as 2/3 of them do not use trial passes, they rely heavily on the information provided online. With all of that being said, here are some thoughts on what the website would require for NJMT:
Full prices listed
An explanation of what to expect in classes
Testimonials
The ability to sign up online
Photos of facilities both at busy times and slower times
COMPETITIVE ANALYSIS
While a lot of the benefits come from being able to sign up online as well as manage your account online, I've now considered those features to be a "nice to have".
Three out of five of the competitors don't offer them as they are not environments that anyone can walk into without an intro session. Because of this, it seems unrealistic to put a feature into something the business would not want.I did find, however, that showing prices and membership options is absolutely at the top of the list. NJMT does already show that, which puts them ahead, but my goal going forward is make prices and options completely transparent to the user.
STEP 2. PERSONA RESEARCH
The personas were designed to give an idea of the different types of users who come from different professions, locations, and financial statuses but have the same goals in mind. These are people who value their money and time, and while they would like to add new and beneficial activities into their lives, the decisions they make are weighed and calculated. Because all personas are near-experts when it comes to using technology, it becomes even that much more important for the experience to be easy and seamless for them no matter what their decisions are in the end.
STEP 3. INTERACTION DESIGN
SITEMAP
While the original site didn't need much of a change in terms of their information structure, I did consolidate some categories based on user interviews to make sure their gains were prioritized. I started off by making a map of the original site, and then moving things like youth program into the classes drop down in Figma. This will now help guide me into making user and task flows, making sure the journeys are clear with what pages and paths are being used.
TASK & USER FLOW
I created both task and user flows to make sure I had a concrete path using the sitemap as well as seeing just how different users would interact with the site whether or not they all ended up getting to the contact page and choosing to fill out the forms. I started off with the task flow and then used the task flow to add in decisions and how the personas would answer in the user flow based off of their pains and gains. With these maps I can begin to build sketches and wireframes of the pages that all personas landed on.
WIREFRAMES
Wireframes were built to give a low fidelity design so that any elements could easily be changed before the final design. I started off with frames of MacBook Pro, iPad Pro, and iPhone 11 in Figma for both the HomePage, and then focused on building out MacBook Pro sizes for the category pages. I had used Pinterest for inspiration, as well as the old website to see where there was opportunity for layout and media. With these wireframes I can now focus on creating a UI Kit that will help guide both me and the dev team to what is needed for a high fidelity site.
STEP 4. USER INTERFACE DESIGN
LOGO REDESIGN
After receiving feedback from other designers, I revisited the gym's logo. The feedback was based around the font used in the logo, and its subtle clash with the font used on the new website.
The New Logo
I used the new font and made sure to keep the stars as well considering their meaning to the gym. Above are the different logos made, in which the boxed frame is meant to represent a boxing ring. Below is the new logo added into the site.
HI FI DESIGN
I focused on the responsive homepage high fidelity designs first, wanting to get a good idea of what they fonts, icons, and components would look liked on different devices. I took the wireframes and added in all relevant buttons, fonts, and media in Figma, having to edit it out previous photo edits that contrasted with the new look and color palette. I will use these layouts and designs to then create the other category pages for the final prototype.
- CTA's come plenty throughout the design, including sitting in the header as a quick option for those who don't need any further information
- Image slider is evident on the right, giving users control over what media they are looking at
- The fonts chosen were meant to replicate that of an old-school boxing gym, while not losing the modern tough the redesign is meant to have
- This slider was built to show off the gym's prioritized programs. The idea is for each section to move to the forefront when clicked upon.
- A red info section pairs with each image, with a CTA that will take them to the specific page with more information
- Large video window that introduces users to the gym. The gym originally had this on their original design, and it carries over into the new one.
- Because a free trial is necessary for signing up, this sort of media aids users in giving them an idea of what to expect before contacting the gym.
- Testimonial slide takes up the width of the browser, focusing on past and current students that users can flip through. Testimonials were originally hard to find on the original site, as they were hidden under a CTA that didn't stand out well enough from the other components surrounding it.
- The Contact Us footer is added into every page and is also a new addition to what the original site had.
- The name of the game is: Easy to Navigate and Easy to Find. No matter where the user is on the redesigned website, they are able to contact the gym right from that page.
HI FI PROTOTYPE
This is the final prototype and category pages designed, made to make sure that all pages are uniform and connected. The prototype was created in Figma, and created based on the User Flow, making all pages and options available for a user to take. Going forward this will be the foundation for usability testing and getting a better idea of what needs to be changed or reconsidered in terms of paths, components, and available CTA's.
Next Steps
Usability Testing
Usability testing is the priority within next steps. As the prototype is finished, I will need to conduct usability tests with 5-7 participants to get an idea of what needs to be changed or added.
Add Features
Add more features into the prototype, such as: expanding schedule options, filling out forms to completion.
Revisit & Revise
Revisit Memberships page to design something that is a little more interactive. Also focusing on limiting the white space.
What I Learned
There is no perfect "order". I found myself quickly realizing that there was no 'right way' to do this, only the 'right way' for me. I skipped out on a few steps such as storyboards and surveys as they did not seem relevant that early on.
Grids. Grids are a life saver. My dependence on them throughout this process was strong, and I'm not really sure how I was managing without them before.
Lo-Fi, the lowest fi, really works for me. When it comes to wireframes, I love keeping it as bare as possible so that I can later play around with it and not feel like I've undone so much work when I end up changing it. This mindset kept things working smooth for me when it came time to design.
Selected Works
DesignsPassion Projects & Design Challenges
DC ComicsEnd to End App
ApplePayFeature
North Jersey Muay ThaiResponsive Website Redesign
