Dipsakus

UX Design Case study: Elevating the Dipsakus hiking club experience

Introduction

The Dipsakus hiking club website aims to provide a user-friendly platform for hiking enthusiasts to discover, plan, and participate in hiking adventures organized by the club. The website seeks to cater to both existing members and potential new members by offering comprehensive information about upcoming tours, past experiences, club news, and resources for hiking enthusiasts.

https://dipsakus.mk/ Dipsakus

My role

This is my personal project, where I assumed a diverse role in conceptualizing, designing, and implementing the Dipsakus Hiking Club website. Collaborating closely with my brother, an experienced software engineer, we worked as a team to seamlessly merge UX design with frontend development skills. Together, we crafted a coherent and user-centric digital platform for the hiking club. From initial user research and wireframe creation to coding responsive layouts and optimizing performance, we oversaw every aspect of the project's design and development lifecycle.

Main Tasks

  • 1. User research
  • 2. Wireframing & prototyping
  • 3. Implementing frontend code using Next.js and Tailwind CSS
  • 4. Responsive design implementation

Design process

Research

In the initial research phase, I comprehensively analyzed existing hiking club websites and platforms. This involved examining features, navigation patterns, and design elements commonly found in similar websites. The goal was to gain insights into user expectations and industry best practices, which would inform the design decisions for the Dipsakus website.

User interviews

I conducted user interviews with a diverse group of existing members of Dipsakus to gain insights into their experiences, needs, and pain points related to hiking and club membership. The interviews helped us understand what motivates users to join a hiking club, their preferences for tour destinations and difficulty levels, and their expectations from the club's website.

Dipsakus

User personas

Developed user personas based on insights from user interviews and demographic research. Created fictional representations of typical users, including their goals, preferences, and challenges related to hiking and club membership.

The user journey map represents the holistic experience of a user, from their initial awareness of the Dipsakus Hiking Club to their ongoing engagement as a member. It outlines key stages that users go through, including awareness, consideration, acquisition, and service.

Journey map

User flow

The user flow illustrates the path that users take as they navigate through the Dipsakus Hiking Club website to accomplish their goals. It outlines the sequence of steps users follow, starting from their initial interaction with the website to the completion of specific tasks or actions.

User flow

Sketching and planing

During the sketching and planning phase, I generate ideas through sketches, exploring various layouts and features. This process helps me visualize the website's structure and functionality before moving on to digital wireframes and prototypes.

Dipsakus

Wireframes flows

Flows represent the primary navigation paths and interactions, initially conceptualized in low fidelity and then refined into high fidelity prototypes. Prototyping these flows in high fidelity allows for a detailed assessment of usability and hierarchy. Throughout the defining phase, I experimented with various concepts and layouts, gathering feedback from users through questions like:

  • What do they like about the prototype?
  • What do they dislike about the prototype?
  • Why did a flow work?
  • Why did a flow not work?
  • What would they like to improve?
  • Does the overall design/flow meet their needs?
Wireframes Wireframes

Final solution Design & Development

I implemented a design that adapts seamlessly across various devices and screen sizes. Utilizing Tailwind CSS, I crafted cards that maintain consistency in layout and styling while ensuring optimal readability and usability. Each card showcases essential information such as tour details, news articles, or user profiles, presented in a visually appealing and easily accessible format. Through meticulous attention to detail and adherence to responsive design principles, I aimed to provide users with a cohesive and engaging experience across all devices.

Final image Final image Final image Final image

I translated UX design concepts and wireframes into functional components using Next.js and Tailwind CSS. Leveraging my frontend development skills, I implemented responsive layouts and interactive features to enhance user engagement and usability. Key tasks included structuring the project, setting up routing, and integrating dynamic data from mock APIs. Additionally, I focused on optimizing performance, adhering to best practices, and ensuring accessibility standards compliance. Throughout the development process, I collaborated closely with my brother, an experienced software engineer, to refine code architecture, address technical challenges, and achieve the desired functionality. Together, we worked as a team to bring the Dipsakus Hiking Club website to life, combining UX design principles with robust frontend development techniques to deliver a seamless digital experience for users.

Final image
  • Figma
  • Tailwind CSS
  • JavaScript
  • Next.js