Nashville Aikikai Website Redesign
Bridging the gap between stakeholders and new users with a fresh redesign of Nashville Aikikai’s existing website.
Context
I approached the stakeholders of a small non-profit dojo in East Nashville and offered the services of my student team to redesign their current website to create a more useful user-friendly experience and help them bring in new attendees to beginner classes.
My Role
My responsibilities included user research, copywriting, information architecture, prototyping, testing, and visual design. Throughout the process, I collaborated with teammates and stakeholders. At the conclusion of the project, I presented recommendations to stakeholders.
Update January 2023: In addition, I later built the full website in WordPress for the stakeholders. The site is now live, fully fleshed out, and being utilized by Nashville Aikikai.
See the finished website: https://nashvilleaikikai.org/
Contributors
Katie Struk
Bonnie Gregory
Anyssa Barbour
Project Timeline
Week 1: Research, definition
Week 2: Ideation, lo-fi wireframe, user testing
Week 3: High-fidelity wireframe, user testing, and presentation to stakeholders
Several months later: Spent 2 weeks building and launching full website
The Old Website
First things first.
Let’s look at what Nashville Aikikai was working with as a website at the time of this project.
For the initial design, we focused our efforts on the homepage and the classes page where people could see the days of the classes and the prices. These are the pages a new visitor seemed most likely to need to look at.
Homepage - Top Half
Homepage - Bottom Half
Classes Page- Top Half
Classes Page- Bottom Half
I want a new movement practice but I feel uncertain about starting.
Research
We focused our attention on designing for prospective new members to the dojo.
5 user interviews were conducted as a team. We sought out people unfamiliar with Aikido but who have participated in other organized movement practices such as yoga or cycling classes.
In addition, we interviewed someone who was a new member of the dojo to learn their thought process in joining Nashville Aikikai.
5
User Interviews
9
Online Surveys of Existing Members
2
Stakeholder Interviews
How can we make this website more helpful for those who are brand new to Aikido?
User Interviews - Pain Points
The Old Website Design
User Testing Objectives
While navigating the existing website the users will…
Find a schedule to see when classes take place
Navigate the site to discover how much it costs to take classes
Find information on what to expect when they attend the first dojo class
In addition to navigating the old website, we interviewed users to …
Discover what information people new to Aikido might be looking for when exploring the website.
Discover what things are important to them when assessing whether this dojo would be a good fit for them.
Pain Points
Information Architecture
Users spent a lot of time scrolling up and down on the classes page searching for information and jumping around between pages.
Unanswered Questions
Users unfamiliar with Aikido had many unanswered questions about what to expect before their first class, leaving them with feelings of uncertainty.
Schedule Layout and Wording
Users were confused by the explanation of the class schedule and what the dues paid for.
Clarity of Culture
Users were uncertain of what the atmosphere, community, and culture were like when exploring the site. Current images were not painting a full picture of who the people of the dojo are.
Looking for a new movement practice ~ enjoys meditation ~ has no previous martial arts experience
Amelia
Needs
Wants a way to be more physically active and learn something new
Wants a community to be a part of
Interested in meditative practices and improving mental health
Needs to feel welcome in new environments so they don’t feel too nervous
Needs to know what to expect before showing up for a class.
Frustrations
Uncertainty of what the dojo’s culture will be like
Doesn’t have any idea what to expect at first class and feels apprehensive about going. (keeps putting it off)
Not sure what the commitment levels are. How much to pay for how long?
Has tried other physical activities in the area but didn’t feel like they were a good fit.
Frustrated that they are not getting enough physical activity during their work day.
Stakeholder Goals
2 stakeholder interviews were conducted to align the UX team’s goals with the needs of the organization.
We identified a couple of primary goals that we would keep in mind through out the design process.
Major Stakeholder Goal
Increase attendance in beginner-level classes.
User Friendly
Redesign the website to craft a user-friendly and aesthetically pleasing experience for users that can also act as a landing from social media.
Easy to Maintain
Needs to be easy to maintain and something that could be created in a hosting site like Wordpress or Squarespace because Nashville Aikikai is run by volunteers.
Differentiate
Differentiate this martial art from the other types of for-profit martial arts studios in the area with a non-competitive inclusive tone.
Survey of Current Dojo Members
We surveyed 9 existing members of the dojo to find out what their experience with the Nashville Aikikai website was.
6 of the 9 current members of the dojo that we surveyed discovered Nashville Aikikai initially through a Google search and then through the website.
This confirms to us the importance of the website as a tool that can bring new people into the dojo.
Other trends…
There is helpful information on the site but you have to scroll too much to find it.
The color contrast is hard to read on the homepage
People most often visit the site to find the class schedule and info about the class
People generally feel it’s useful but doesn’t look good
How do people discover Nashville Aikikai?
What do I even wear to my first class?
The Problem
Stakeholders
Want to increase attendance at their beginner’s level classes.
Users
Want to discover a new movement practice and answer their questions before choosing one.
Website
Intended as a place to inform the community about Nashville Aikikai and act as a bridge of information to bring new people in.
User Experience
However, users feel frustrated and uncertain when trying to learn about classes on the site because they can’t find answers to their questions.
The Solution
Provide users with better information and a more structured accessible layout that will empower them to discover answers to their questions and alleviate uncertainty and doubt about joining a new dojo.
I wish I could sign up for a class on the website.
How do I pay for class?
Ideation
Now that the team had identified a user and a problem to work on that could give value to our stakeholders it was time to ideate on solutions.
We opened the floor to brainstorming with “I like, I wish, what if” to allow for a flow of ideas as a team.
We had many great ideas but we needed to keep in mind timeline, scope and practicality of ideas before selecting items to focus on. We used a feature prioritization matrix as a tool to talk out what ideas we liked, what was feasible and what was worth pursuing.
Card Sorting & Sitemap
One of the noticeable struggles of people on the old site was finding the information they wanted. Often, the info was there, but you would have to read carefully to discover want you were seeking.
Reorganizing and chunking the information better would help solve the problem that people experience of being a bit lost on the website.
One important part of this process was separating info about each type of class. For example, the general adult class, the beginner’s class, and the kid’s class would now get their own individual pages instead of being lumped into one page.
Wireframe
The team started off separately assembling homepage rough drafts then came together to discuss the different ideas we had and talk through what would work best and why. We put together a clickable low-fidelity prototype to test and then a high-fidelity prototype with changes based on testing results.
Considerations while designing the wireframes
What kind of hero image could we design that would communicate the most essential information about how Nashville Aikikai is different from other dojos? Non-profit, non-competitive, traditional, meditative, more than self-defense but also good for your life as a whole.
What is most important for the homepage? Describe the artform, video, images, testimonials, lead instructors, and a contact form.
What can we communicate with carefully selected images? diverse ages, people, and genders. Serious training but fun community and laughter. Action shots paired with smiling friendly faces. Balance the intimidating with the friendly.
How can we break down information about classes, schedules, and prices in the most digestible way?
How can we break down essential commonly asked questions for beginner’s classes?
How can we design a new registration page to help get new people committed to attending their first class?
Prototype
Here you will see a walkthrough of our prototype.
Homepage
The hero image highlights how this dojo is different
Testimonials give a sense of the culture.
Carefully selected images showcase the diversity of people and the community atmosphere within the dojo.
The email form at the bottom of the page makes it easy to ask questions.
Beginner’s Class Page
Answer the most important questions at the top of the page.
The new FAQ section is a simple way to ease people’s uncertainty.
Registration Page
Now people can commit to attending the beginner’s course and pay for their classes directly on the website.
Update: January 2023
The new design is now live at https://nashvilleaikikai.org/
Click the link to check it out.
Testing
Low Fidelity Testing
Throughout the process of creating this site we conducted user testing.
The first round of user testing was after creating the lo-fi prototype.
In this round of testing, we discovered that the wording on the Beginner’s course page and registration page was confusing to some users. Afterward we rearrange information and reworded things for clarity.
Generally, users liked the way information was chunked and rearranged.
High Fidelity Testing
In the next round of user tests, we had people navigate our high-fidelity prototype.
Users liked the minimalist style and color scheme of the site.
The organization and layout of the homepage gave users a good sense of what the dojo is like.
Users were all easily able to find information about the beginner’s class and register for a course.
Navigation Testing
Prediction:
We thought users would click on the “Get Started” button on the top nav to learn about the beginner’s course.
Unexpected Test Result:
Users clicked on the schedule first. Then went to “get started”. Users said they were looking for a “classes” button.
Solution:
We restructured the top navigation. Removed the “Get Started” and “Schedule” and replaced with a “Classes” button with the types of classes as sub-sections.
This gives users what they’re looking for with fewer clicks. Additional user testing is suggested.
“Aikido has its own tradition.. it’s not like going to the gym and working out. That can be intimidating. Seeing pictures of people just like me makes it feel much more personable and community oriented. I could be into this”
-Quote from user test of new website
Conclusion
Meeting Goals and Solving Problems
For Stakeholders
We designed the registration page with stakeholders in mind. Registering keeps users invested in showing up to their first class and results in better attendance.
We kept the designs simple enough that it could easily be built with Wordpress or Squarespace or another tool.
We made the site fresh and kept true to the dojo’s philosophies, aesthetics, and how they wanted to be viewed online.
For Users
We realized users had tons of questions that were keeping them from taking a risk and attending their first class. Because of my intimate knowledge of aikido I was able to write a FAQ section and a “What To Know Before Your First Class” section.
Users wanted a clear vision of what this dojo was like before showing up to class, so careful consideration was given to which photos would appear on the website to paint a better picture to users. We also included testimonals and video.
We made it easier to ask questions if there were things we didn’t cover in the FAQ by including the question form on the website.
We kept the most essential information users looked for up front and central. When is class? and How much is it?
Next Steps:
Additional user testing is suggested to confirm the changes to the navigation.
Assess whether the dojo wants to continue with WordPress to build the new website. Compare prices and ease of use of other services like Squarespace.
Build out other class pages to fit the structure of the Beginner’s Course page.
Recommend connecting a dojo email to the website to receive questions, and set up a MailChimp to send an automatic confirmation email to newly registered students.
Recommend looking into payment options for users when they register for a class such as Stripe to allow for card transactions.
After the initial rollout of the new site, the next user to consider are current existing dojo members.
Update - January 2023
Shortly after completing the research and creating our design, we met with the stakeholders at the dojo and presented our proposal. They loved it! They were excited to use our proposed design and concepts and they found our research insightful.
Check out our presentation for the stakeholders by clicking here.
Several months after the initial redesign the stakeholders were ready to start the website build. I completed this part independently. I fleshed out the rest of the website pages and built it using WordPress, a platform the dojo was comfortable with. It was completed in 2 weeks and is now live and being utilized by the dojo.
See the new website here …
https://nashvilleaikikai.org/
