Background

Mouvit Muslimah is a non-profit sports organization that serves Muslim females in the Greater Toronto Area. As a non-profit organization in its early stages (founded in April, 2022), their resources are limited which has impacted the time and capabilities that they can dedicate to creating a user-friendly website. As an individual who is in the target demographic of this organization, I took interest in redesigning Mouvit’s website for self-practice.

To begin, I completed a SWOT analysis on competitor websites to start building a picture of user needs and to understand how to gain a competitive advantage.

• Musfit and Hijabi Ballers lack branding strategy, Mouvit has an edge when it comes to branding
• Features that competitors have in common on their websites include: event information, registration/signup, schedules, image galleries
• Sponsorships are used to gain exposure and funding, volunteering positions are also available to maintain self-sufficiency
• Marketing strategy is centered around creating friendships and appealing to the concept of community and togetherness
• Hijabi Ballers and MusFit hand out surveys to their customers learn what they could do better
• Competitors lean into social media to gain exposure, an approach that Mouvit has taken and is successful at

After completing market research and having these examples at the back of my mind, I audited the current Mouvit website.  I made note of glaring information architecture issues that stood to me at a first glance. This allowed me to build my assumptions and hypotheses about changes that can be made to the website design that would improve usability. Ofcourse, I needed to validate these ideas with my user research.

Summary of Observations

• There is a lot of room for improvement in terms of creating a more appealing landing page that is reflective of Mouvit’s objectives/goals, which would improve marketing and reaching the target audience
•  The nav options are very limited, despite the amount of information that can potentially be placed on the website 
• Currently, Mouvit is using the flyers that they post on Instagram to represent their program offerings, for a website this should look differently
• The brand colors (black, white and orange) could be used to generate a color palette for their website
• The information architecture needs improvement with regards to font sizing and prioritizing important information that subscribers would need to know before signing up

With these assumptions and hypotheses in mind, I interviewed 5 users between the ages 19-24 who were either interested in Mouvit or have signed up to one of their sports leagues, which was one of the most valuable parts of my design process.

While it’s critical to keep the users at the forefront of my designs, I wanted to ensure that the business goals aligned with the user goals. The owner of Mouvit is a mutual friend, so I was able to set up a call to discuss business goals, website goals and key performance indicators. I shared some of the information I learned from users (pre-analysis) and she provided me with valuable business insights.

• Providing a safe space for women to pursue sports
• Increasing fitness literacy
• More than just sports, it’s about building a community and friendships as an outcome

Target Audience

• Sign ups are 70% 18-25 year olds and 30% 25-35 year olds
• Planning to open a youth academy (below 16 years old) in 2023

Key Performance Indicators

• Marketing metrics - which posts are doing better than others on Instagram?
• Attendance rates
• Sign ups that cover the number of booked fields and courts (this is done before opening registration)
• Qualitative feedback from participants

Website Goals

• The current website doesn’t drive much traffic, and she recognizes that it needs improvement

With my preliminary research in hand, I created an affinity map with 7 themes that uncovered deeper insights into user needs specifically pertaining to the Mouvit website. This was a key step in achieving my research goal. From these insights I came up with a list of suggestions for the website redesign to get a head start on brainstorming.

To take my insights a step further and highlight the needs of Mouvit users, I created POV statements and brainstormed several HMW questions so as to not limit myself to a single solution at this stage. This allowed me to empathize with the users as well as continue brainstorming solutions from the information I synthesized.

I used the HMW statements as the basis for brainstorming solutions. I put a 30 minute time limit for my ideas to flow so as to not get carried away and spend too much time on this part of the process.

To better guide my design decisions and keep Mouvit users at the forefront of my designs, I created two personas based on my interviewees. I focused on the user needs that would be met by the organization itself, while keeping in mind how those needs can potentially be solved through the website. Whenever I was unsure of a decision to make, I referred to the personas to see what they thought. This made the implications of my design decisions feel real and ensured that I was solving a problem for the user.

Keeping in mind my personas’ primary need of being able to find information in a well structured and detailed manner as well as the need of feeling confident about their decision to join Mouvit, I mapped out the “Happy Path” with 3 key features in mind:

• Registration
• Payment
• Learning about Mouvit

This helped me define the key screens I should design and test for which saved me some time when I began wireframing.

The sitemap I built went through a couple of iterations. I was unsure how to depict the current leagues i.e. whether to list them out or just combine them under a “Current Programs” page. After deliberating with my mentor and embodying my personas thought processes, I decided to list them out as well as have a Current Programs page.

Taking my persona’s goals and the user flow into account, I began creating low fidelity wireframes for my mobile-first design. I used Figma to create my low-fi wireframes to help map out the core functionalities I would need on key screens in my design.

1.7 Low Fidelity Landing Page Desktop Wireframes

For my mid fidelity wireframes, I gathered content from the existing website and generated missing content that would be used on the key screens that I was designing. This way when I moved to high fidelity wireframes, I would be able to focus on the visual design rather than the content. Thinking back to my personas, the key entry points in which they would be accessing the website were based on mobile interactions such as Instagram stories and text messages between friends. Because of that, I felt that it was best to continue with the mobile-first approach for my responsive website designs ensuring a seamless navigation experience that prioritizes essential information only.

After presenting my mid-fi designs for feedback from my mentor, I decided that I was ready to move onto hi-fi designs.

High Fidelity Wireframes - Iteration 2

The white text on the black background was too harsh on the eyes based on feedback from my mentor and peers, so I opted for a softer orange (staying in line with the brand colors) and black text, increasing readability and improving visual aesthetic

Now it was time to put my designs to the test. I wanted to validate my design decisions and ensure that the website pain points I identified were resolved through my designs. To reiterate, the key pain points I identified were the inability to find information about sports leagues in an efficient, time saving way and feeling confident about their decision to join Mouvit. To do so, I identified hot spots and connected key screens to create a working prototype.

I tested my designs in an in person moderated setting with 5 users, 4 of which I had interviewed, and one new user. I instructed the users to approach the website as someone who has seen a marketing post on Instagram and is considering signing up for the soccer league.  I asked users to complete the testing phase on a mobile prototype as the key entry point for the website is through Instagram.

Based on the 5 usability tests I conducted, I mapped out the feedback into what worked, what should be changed in the next iteration, what questions were asked and ideas for general improvement.

Since I was in a time crunch with the project deadline being at the end of the week, I had to prioritize which changes to work on. I used the feedback grid to guide me on which changes were of high priority i.e. how many users commented on this change? how much time is this change going to take?

After prioritizing which iterations to work on, I spent 4 more hours making changes to my designs before submitting them to my mentor for feedback.

Final Designs

After making the aforementioned changes to my mobile designs I also received feedback on my desktop designs, and polished both versions to deliver a working mobile and desktop prototype and complete my responsive website project.

While I completed this project for self-practice, some of the success metrics I would pay attention to measure how my designs improved the user problem at hand would be:

• Task success rate (how many users successfully sign up if that is what they set out to do)
• Conversion rates (how many users sign up after visiting the website)
• Time spent on registration (comparing before and after redesign)
• Number of website recommendations (asking users whether they would recommend this website to a friend)