Outdoor Sports - Inspiration Platform
Ireland has a lot to offer in terms of tourism and adventure. For this project, I aim to create a prototype of a platform that helps select an Outdoor Sport activity for the tourist or anyone else planning an adventure in Ireland.
Aim
Creating an accessible platform which helps to plan outdoor activities and adventures. Showcasing unique places in Ireland. In this project I will look at inspirations from different countries such as Austria and Switzerland.
At the time of my stay, I had a chance to do some hiking, and I have found the process of planning very easy. Another difference was the ability to find places that are hidden and not as popular amongst tourists.
Research Summary
By studying alternative services and paying attention to existing users reviews, I can extract some patterns that will be useful for creating a viable product. Big platforms like Outdoors, All Trails, and Komoot work globally, trying to include almost every possible travel planning feature. Including too many options in your navigation makes it more difficult for the user to choose, leading to confusing navigation results.
Most platforms also provide an app to download, which includes fewer features than a website, but has many complaints from existing users about navigation inaccuracy, battery drainage, not enough information about the location, and much more.By dividing the planning into stages, such as
1. Inspiration,
2. Navigation (downloadable app) will help the user save time. For this project, I will focus on the first part of the planning stage, which allows the user to find a unique location and save and share with friends.
Users Interviews
In order to test my assumptions about user expectations and needs, I have set up a questionnaire using Google Forms and posted it across popular hiking and adventure communities on the Facebook platform. This will help me to collect valuable quantitative data, this will also set me in the right direction when it comes to deciding the vital functions of the future platform. Every question in the questionnaire should contribute to a specific goal, together with helping a formation of what is the users expectation, needs and wants are.
Dear community, if I can please ask you to spare your time to fill in this form? This questionnaire will help to support and define the user goals and expectations when it comes to planning an outdoor adventure.
Users Observation
Adventure planning – stages.
1. Finding a platform for inspirations
2. Find unique places and check if it is suitable (parking, pet friendly etc)
3. Plan the adventure
4. Save the adventure
5. Share the experience with friends and the community.
6. Start planning again (going back to stage 1)
Find unique places and get inspirations. This project is focusing on the first stage of planning, the inspiration stage. From the user interview, it is noticeable that the majority of experienced adventurers need to know the basic information before proceeding with the planning, such as parking info, pet friendly, difficulty of the trail, other peoples reviews, ability to save the location for future. The navigation during the adventure seems to be the number one request. This could be an extension to this project for the future. Many platforms already exist and perhaps need to be improved with an accuracy of the small trails, battery drain seems a major downfall.
User Goals
Developing the user persona, creating the user journey, create a plan and possible solutions for users goals. Finalising this section by translating the goals into functions – before starting the design stage.
User Personas
“Proto-personas are our best guess as to who is using (or will use) our product and why. Then, as we learn from our ongoing research, we quickly find out how accurate our initial guesses are, and how we’ll need to adjust our target audience (and persona)—and thus our design.” – (J. Gothelf with J. Seiden, Lean UX 2013)
Following the advice from the Lean UX I have differentiated the personas around needs and roles rather than by demographic.
All of the listed user personas in this section are very different but they do share common traits. To name a few
1. Seeking an inspiration
2. Planning the adventures
3. Philosophical mindset
4. Appreciation for the nature
Application Must Have
C A T E G O R I E S
E A S Y N A V I G A T I O N
C O N S I S T E N C Y
I N S P I R A T I O N S
S A V E F O R L A T E R
S H A R E T H E A D V E N T U R E
P E T F R I E N D L Y I N F O
Refine - Actionable Plan
Summing up the previous sections’ results, I can confirm the assumption that the planning of the trip takes place at certain stages. The first stage is to find a location that inspires. The primary function of this project is to present new ideas for adventures in Ireland. Allowing the user to find the most suitable option in few clicks will help to save time. Breaking down the categories into three options first, which are the type of activities;
1. Aqua sports
2. Terrain sports
3. Air sports
Each activity will display a sub-menu (using iconography) to demonstrate the relevant activity and, therefore, will help the user with navigation to the correct information. User testing at the early stage (low-fidelity prototype) will help me to know if the categories are easy to understand for the user.
Design
Starting the design with the sitemap and allocating the information for each page
will help me build a low-fidelity prototype. Logical functionality and consistency of the navigation are vital for a friendly user experience. If the user knows where he is at any time while using the platform, it will help eliminate frustration and add confidence. Besides, proper navigation allows the user to access the correct information faster.
Designing the experience, Prototyping and Testing – “Is accomplished when the product interface allows its user/customers to easily accomplish their goals with little resistance” — Levy.
Sketches
Wireframing
Navigation
In my application, I decide to use Lateral navigation, which allows the user to get to the necessary information quickly. An example is the Main Navigation. However, in cases such as registration or login, I also use reverse navigation if the user changes their mind and wishes to go back.
Forward navigation is also used in my application, directly from the home screen to a screen deep in an app’s hierarchy, for example, from the home page – footer menu, an option to go to terms&conditions page, or the about page, which are not present in the Main Navigation.
Mobile Navigation does not afford to have the same layout as the desktop version due to the size of the screen. The Hamburger menu in the top right corner provides the main functions of the website. Logo being positioned in the middle of the screen.
And the user area is the icon on the top left corner, which takes you straight to the login process; once logged in, it gives the user control over their profile.
Z-Pattern
The layout of the z-template follows the shape of the letter z. Readers will start from the top / left direction, move horizontally up / right, and then diagonally down / right, before finishing with another horizontal down / right movement. The Z-pattern is suitable for simple designs with must-see elements. Any aspect of the narrative in the design will follow the z-path.
ZIG ZAG Pattern
A logical continuation of the z pattern, as the reader, will continue to move to the right and then slightly down and back to the left before starting to move horizontally to the right again. This is how we naturally read large blocks of text. In my design I use mainly the Zig Zag pattern.
Low fidelity Desktop
Low fidelity Mobile
User testing
For User testing I have asked regular outdoor goers to complete a list of tasks on both of my low-fiedelity prototypes (Desktop and the Mobile).
Along with task completion I also asked to give the rating to each task (see below). I am looking to do some more user testing, ideally, I need to find user testing group in the different age group (40+) before I proceed to build the high fidelity version.
Desktop
For the desktop, I will change the layout of the destinations displayed in each sports section. Instead of one column shown in my low-fidelity prototype, I will update it to a two-column display and remove the unnecessary information.
Having the destinations side to side will help the user choose and compare one option to another; this will allow users to proceed without frustration and make information more memorable.
Mobile
The mobile design seems to require more attention, particular the pressing areas. One user commented – “On the mobile version it feels like when pressing on buttons you need to be very precise on where you press it – may be the “ buttons” are too small?”
So, when implementing high-fidelity I will pay more attention to the positioning of the buttons, also considering a reconstructure of the mobile navigation to improve accessibility for the user.
Progressive Disclosure
Progressive disclosure follows the typical notion of moving from “abstract to the concrete”, including user behaviour or interactions. In other words, progressive disclosure is not just a mapping of the abstract to the concrete. On a practical level, encouraging the user to perform simple actions or tasks to perform complex ones is what lies at the heart of the philosophy. – Progressive Disclosure (2021). Available at: https://www.interaction- design.org/literature/topics/progressive-disclosure (Accessed: 4 May 2021).
Visuals
Branding
The platform aims to inspire the user, so the motive should be light and breezy for the design aesthetics. Natural colours and simple shapes will highlight the variety of many hidden locations for the adventure seeker. I have chosen the symbolic and simple logo, which represents freedom and adventure; in the shape of a bird.
These are three main birds I have considered for the design. I also thought the logo to be a horizon or mountains view, but because this platform is not just about the mountains, I feel that the bird fits in best because it unites all three elements; water, terrain and the air.
Typography
Interaction Design
Interaction design provides an opportunity for interaction and micro-moments of experience. A person gets acquainted with the information as it becomes available. Ways to add a movement to the interface and to bring the environment to life.
Some examples of Interaction design; micro animations, transitions, and physical actions such as tapping, pulling, swiping, and scrolling. I have applied those methods in several pages of my application. Such as scrolling effects (vertically and horizontally), hover effects, and animated slideshow.
High-fidelity Desktop
High-fidelity Mobile
User testing (second round)
For User testing I have asked two of my friends who
are regular outdoor goers to complete a list of tasks on
example Register on the platform = 4)
User Evaluation
This round of testing shows a significant improvement in all areas. There were no frustrations, difficulties or So so (3 out of 5) expressed by the user. Meaning the design is heading in the right direction. The only way to find out if the design is successful is by performing several user testing. I had doubts when thinking through the Challenges section for the user. On the Desktop, I have the Challenges as a section which is located on the Community page.
However, on the mobile prototype, I have the Challenges as a separate tab (located in the Hamburger Menu) from this questionnaire. It is clear now that the user prefers to see Challenges as a separate page. If I had the time, I would implement some more updates, such as a separate page for Challenges (in the Desktop version) for further review.
From prototype to code
This project was implemented into code for a parallel Web Technologies module during semester 2 (TU Dublin). I have learned Skeleton framework, lightweight and responsive, straightforward to use for grids, and default styling, which is much nicer than plain HTML. I have learned advanced CSS, particularly the valuable part for me was how to use multiple layers, for example, creating an overlay div. I have also used GSAP and ScrollMagic for the slideshow section; on scroll effect is one of my favourite interactions on the web, and I wanted to try it.
What I have learned
Takeaways – I have learned to manage a large volume project that involved the research phase, decision-making based on the interviews and organising the flow of the project step by step. Because this project is the reference point for another module, I have to recreate the project in code, so a lot of consideration went into decision-making for elements and the sections in my design to make the final design feasible for Web Technologies.
I find many similarities between the design for paper and the design for the web, the vital role when choosing the layout, navigation, grid system and visual elements like colour, typography. Those elements bring the idea together. The importance of making the information accessible to the user, consistent and organised content, memorable to the user is a good practice. Differentiate the design for the desktop screen from the mobile screen is essential. Both must be recognisable and united by style. However, the affordance of the smaller screen will call for decluttering, and the content which will be placed on mobile should be trimmed down.
