UX Designer, UI Designer, User Researcher, Visual Identity Designer
Adobe XD, Adobe Illustrator, Google Meets, 1ka, Google Forms
May 2021—October 2021
Jodl is a personal project for my master’s thesis, which in the end wasn’t launched to the public. Nonetheless, it was a project through which I learned the most about UX design. The result is a web application that allows users to find desired mountains and mountain trails using various features. Additionally, it contains important information, all in one place, that users want to know when visiting such an interface.
The primary focus of this project was to develop a filtering system that delivers relevant results quickly and effortlessly. My role involved ensuring that users could easily adapt to and understand this system. The design aimed to create an intuitive and seamless experience, allowing users to navigate effortlessly and find the information they needed—an essential factor for the application's success.
There are several existing user interfaces that provide information about mountains and mountain trails. While they may be functional, they often lack visual appeal. Although they contain valuable information, much of it is poorly highlighted or appears irrelevant, leading to an overall experience that is less engaging for users.
I aimed to design the project based on the principles of User-Centered Design, where the user is placed at the center of the design and product development process at every stage. This approach takes into account the user’s requirements, goals, and feedback, ensuring that meeting user needs and desires becomes a top priority.
The research phase focused on understanding existing platforms for finding mountains and trails, highlighting issues with usability and visual appeal. Surveys and interviews helped identify user preferences and key needs, which informed the creation of two user personas to guide the design process.
Initial research revealed a variety of user interfaces in Slovenia for finding mountains and trails, each differing in information, search options, and visual design. The most commonly used site among Slovenian hikers is the most outdated, visually unappealing, and overloaded with information, resulting in a frustrating user experience.
My first contact with users was through a survey aimed at understanding their hiking habits, criteria for choosing mountains or trails, essential information needs, and the existing user interfaces they use. A total of 131 respondents completed the survey.
The results identified the target audience as:
Following the survey, I conducted semi-structured interviews with 12 potential users. The questions were divided into two sets: the first focused on personal data, characteristics, hobbies, and habits, while the second addressed users' mountain-related habits, goals, and expectations for an interface offering information about mountains and trails.
Based on the results of the survey and interviews, I identified two user personas that guided me throughout the planning process of the web application. Both personas are quite similar, with the main difference being their preferred method for finding a suitable mountain to meet their needs. One wants to find the desired mountain using a filtering system, while the other prefers to use a map.
The plan for the design was to evoke a strong connection to the mountains, nature, and the name of the web application. The process began with crafting a visual identity, followed by designing the user interface, which was then tested on users to gather feedback and make improvements.
I began the visual identity design by creating a graphic symbol that is not only recognizable but also aligns with the brand name, differentiates itself from competitors, and evokes a sense of connection to the mountains. To ensure its effectiveness, I conducted a brief survey to gather feedback on the symbol. This survey aimed to uncover participants' thoughts and feelings about the graphic symbol, assess its visibility across various media, and identify their likes and dislikes, as well as how they would evaluate it based on different criteria.
Based on the survey results, I made slight adjustments to the symbol before moving on to establish the color palette for the user interface. I chose a vibrant green, mirroring the color in the graphic symbol, to evoke associations with nature and mountains. For typography, I selected Source Sans Pro, a modern and highly legible font that enhances visibility. Finally, I designed custom pictograms to represent specific information, facilitating easier differentiation within the application. This comprehensive approach concluded the visual identity design process for the project.
The design process of the web application began by creating a user experience plan that identified four key phases of product use: research and planning, decision, action, and time after action. In this plan, I documented user actions, thoughts, feelings, and experiences to identify opportunities for improvement. Next, I developed the information architecture, visually mapping the navigation structure and connections between pages to facilitate easy user access to information. I then created low-fidelity wireframes to outline the application's layout and functionality, followed by wireflows to illustrate the user journey through the interface.
First I created a black-and-white prototype of the filtering system, the main feature of the interface, to ensure it was well-designed. I tested it with users, asking 7 key questions about its logic, clarity, parameters, and slider preferences. Based on the feedback, I modified one parameter before finalizing the design of the system.
Then I created a high-fidelity prototype of the entire user interface, ensuring it closely resembled the final product in both look and feel. I tested this prototype with 8 users, giving them predefined tasks to complete while tracking the number of clicks and their overall success. Participants were asked to think out loud during testing, which provided valuable insights. The results were excellent, with users performing tasks close to the minimal number of clicks required. Based on their feedback, I made some adjustments to the interface.
Finally, users completed the SUS questionnaire. The results showed that both the desktop and mobile versions of the prototype were highly usable. With scores of 91.3 for the desktop version and 90 for the mobile version. The high scores confirmed that the design met users' needs effectively and provided a smooth and intuitive experience across both platforms.