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.
Project: NJMT Responsive Web Redesign
Timeline: 10 Days
Role: UX Designer
Tools: Figma, Photoshop
Prototype: Click Me!
In Greater NYC Area
Working Full Time
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?
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
The ability to sign up online
Photos of facilities both at busy times and slower times
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.
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.
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 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.
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.
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.
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.
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 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.