Monark

The goal

Given Monark's expanded product line, our goal was to effectively promote the range of fitness products they offer and implement a survey to provide personalized recommendations based on users' needs and preferences. This would not only increase awareness of Monark's full product line, but also help users find the products that best suited their individual needs.

Research

To better understand the client's and end-users' needs, we conducted extensive research. During this phase, we discovered that many users became more motivated to be healthier and fit during the Covid-19 lockdown, but were unsure about which equipment to acquire.

To address this, we created a user-flow map with five phases to better understand each step a user would take to purchase a product:

1. Exploration Phase: The user identifies a need and searches for a product, service, or company to help solve the problem or need.
2. Searching Phase: The user conducts a deeper search, reading feedback and product reviews to narrow down their options.
3. Onboarding Phase: The user chooses a specific company and navigates their website and social media channels.
4. On-going Phase: The user sees improvement towards their goal with the product or service they've acquired and decides to find complementary products.
5. Uplifting Phase: The user achieves their goals with the product acquired and decides to upgrade it.

By understanding the user journey, we were able to create a more effective user experience and provide personalized recommendations that met their unique needs and preferences.
‍

Persona

After identifying the user journey, we created a persona to represent our target audience. Monark wanted to focus on non-fitness people, so we created "Mónica" - a common person who is not familiar with fitness equipment or bicycles. She is looking for a website that can recommend equipment based on her goals and needs. By creating a persona, we were able to better understand the needs and pain points of our target audience, and design a user experience that catered to their specific needs.

‍

‍Storyboard

By creating this storyboard, we were able to identify pain points and opportunities for improvement in the user experience. We also used this storyboard to test different design solutions and gather feedback from users to create a more effective and user-friendly website for Monark's fitness equipment.

‍

Information Architecture

With the research, persona, user-flow, and storyboard completed, we started building the Information Architecture (IA) for Monark's fitness website. The IA was designed to ensure that the website's content was organized and easy to navigate for the user.

We started by creating a site map that would outline the structure of the website. The site map was divided into different sections that covered the different product categories, services, and user resources. Each section was further divided into subcategories to ensure that the content was organized logically and easy to find.

We also developed a navigation menu that would be used to access different sections of the website. The navigation menu was designed to be intuitive, easy to use, and accessible from any page of the website.

In addition to the site map and navigation menu, we developed a content strategy that would ensure that the website's content was relevant and useful to the user. The content strategy was based on the user's needs and preferences and was designed to provide them with the information they needed to make informed decisions about their fitness equipment purchases.

Overall, the IA was developed to ensure that Monark's fitness website was user-friendly and provided users with an enjoyable and informative experience.

‍

‍

Colour Palette

‍

‍

Typography

‍

‍

First Wireframes

In our initial wireframes, we took into consideration the client's budget constraints and opted to use a pre-existing WordPress template. To customize the design to meet the client's specific needs, we made modifications to selected components and elements while preserving the original structure.

‍

High Fidelity Wireframes

After finalizing the initial wireframes, we proceeded to deliver high-fidelity wireframes that incorporated additional features to enhance the user experience. To improve visibility, we placed the search bar at the top of the website. Furthermore, we incorporated the logos to showcase the variety and prestige of available fitness equipment.

To assist new users in navigating the website, we designed a personalized form with a series of targeted questions that provide accurate results based on their fitness goals. This feature was particularly useful for users who are not familiar with fitness equipment and require guidance in selecting the appropriate options.

‍

‍

‍

User Flow Form

To ensure that the personalized survey provided accurate results based on the user's preferences and needs, we designed a user flow that mapped out the different paths that the user could take depending on their answers. By creating a clear user flow, we were able to identify potential pain points and areas for improvement, and make adjustments to the survey to optimize the user experience. This process allowed us to tailor the results of the survey to the user's specific preferences, ultimately resulting in a more personalized and effective user experience.

‍

How does the personalized form works?

The personalized form is a tool that allows users to specify their preferences and needs in order to receive tailored product recommendations. The form begins with a question that asks the user to select the activity they are interested in, with options such as working out from home, transportation, extreme sports, or recreational activities.

If the user selects transportation, they will be prompted to answer additional questions regarding their gender, age, height, weight, and budget. These details will help to narrow down the list of potential products that meet their specific needs.

Finally, the user will be asked to specify the type of ground they plan to use the product on, with options such as road surface, rocky road, or trail road. Based on all of the information provided by the user, the personalized form will generate a list of products that meet their criteria, ensuring that the user is presented with the most relevant options for their needs.

‍

First question:

What activity would like to do?

1. Workout from Home
2. Transportation
3. Extreme Sport
4. Recreational

If user chooses transportation , then the

Second question:

Gender, age, height, weight and budget

Third question:

Type of ground

1. Road Surface
2. Rocky Road
3. Trail Road

Results:

Depending on the user's choices, different products will be displayed.

Prototype

‍

‍

‍

‍

What did we do?

• Home page
• User account
• Product page
• Checkout process
• Tutorial page (users can build their equipments without the need of a specialist)
• Customized product page (through a couple of questions, they platform will show the user customized products according to their needs)
• Monark Experiencias (en. Monark Experiences) (an external platform that offers experiences like hiking, running and more)
• Monark venta de segunda (en. Monark second hand) (an external platform that offers second hand product such us bicycles, treadmill, and more)
• Mailings

‍

Takeaways

One of the key takeaways from this project was the importance of having a committed client who provides timely feedback throughout the development process. We experienced some communication difficulties during the project due to a lack of timely feedback from the client. This delay in feedback caused some delays and challenges in the project timeline and required us to make some adjustments to keep the project on track.

Moving forward, we learned that it is crucial to establish clear communication channels and expectations with the client from the outset of the project. We also recognized the need to set realistic timelines for feedback and to establish a clear process for addressing any potential delays or issues that may arise. By working closely with the client and maintaining open lines of communication throughout the project, we can ensure that the development process proceeds smoothly and that the final product meets the client's expectations.

‍

The Team:

Team:

• Ela Zorrilla (Product Owner)
• Arisa Onchi (UX Designer)
• Diego Melgar (UI Designer)
• Daniel León (UX Writter)
• Moises Navarro (Back-end)
• Jhonatan Quispe (Front-end)

Softwares/tools:

• Figma
• Jira (Scrum)
• Wordpress
• Webflow