SkiTripPlanner.com is a passion project of Pete Tolsdorf, an avid skier and man on a mission to help people have the best ski trip ever. The web app matches skiers with the best ski resort that fits their specific preferences, and the preferences of those in their group.
I worked with Pete, who provided the data for the project, my design lead, Chris, and our Webflow developer, Tejus, to create an easy-to-use form that narrows down a list of resorts based on the importance of each selected preference.
When planning a ski trip with a group of friends or family members who have different preferences, it’s difficult to narrow down ski resorts that meet everyone’s needs. Common “best of” lists are generic and only address one specific need, like “best restaurants” or “best for beginners” but there could also be more advanced members of the group who want a more challenging mountain. Ski Trip Planner provides a unique list of the best resorts for each individual user because every ski group has unique needs.
The design process was a highly collaborative process that included guidance from Chris, weekly feedback from Pete, and input from our developer to ensure a smooth build in Webflow. As an avid skier, Pete was able to provide insight into the user base and use cases. While initially not in the client brief, we also proposed a profile page for each resort that would include links to book lodging and improve SEO.
Early on in the design process I began working on user flows and wireframes to determine the best way to display the form of questions and preferences. Initially, I envisioned a step-by-step experience (similar to Typeform) but since users can pick and choose which categories are most important to them, I didn’t want to force users to go through steps that aren’t relevant to them.
I experimented with an accordion style form, but didn’t want users to have to scroll up and down to make changes to their selections. A horizontal tab format allows users to freely click between each category to make changes and the entire form area is visible on most screen sizes.
For the MVP, it was important to Pete to eliminate barriers for use, including mandatory sign up. We did decide to include account creation so users have the option to save and share resort lists.
I also created a wireframe for an example results page and a resort profile template. Each result card provides a brief description of the resort and includes a match score for each individual category as well as an overall match percentage. The resort profile template includes an image gallery, the scores for each category (based on data provided by Pete), and a scrolling sidebar that displays key stats.
Once the layout and functionality was decided on, I moved into visual design. I created mood boards to get a feel for the visual style Pete was looking for and he responded to design references that were colorful, friendly, and nostalgic. I created a set of icons that represent each category inspired by these references, which included vintage ski posters and maps.
Based on Pete’s feedback on the wireframes, I made the following changes when moving into high-fidelity design:
The “How it works” section was removed from the homepage so the form takes center stage.
Tooltips aren’t present for each criteria item, but reduced to sub-categories only as to not overwhelm users with information and limit clutter.
The percentages and letter grades were removed from the in favor of color coded scales so results don’t feel so rigid.
I also added a checkmark icon that appears on each tab to indicate which categories the user set preferences for.
Pete provided a logo that had bright green and orange tones that would be the main color scheme of the form. I used a bold, dark green from the color scheme as the border of the focused tab of the form but used white backgrounds behind the text sections to ensure readability. A light noise background pattern helped the page feel more dynamic (not flat) without looking too busy.
When designing the mobile version, I revisited the accordion style design I initially thought of for desktop so the headings wouldn't be hidden if placed horizontally in a row. I paid careful attention to tap targets and spacing, since there are a lot of options to fit in a small space.
Once the app was built on Webflow we conducted a thorough QA to identify any bugs and usability issues. I worked closely with Tejus to identify any edge cases that might produce unintentional errors with the results and made sure that there was no missing data.
We delivered a fully-functioning MVP that exceeded the client’s needs and expectations.
The clean, one page design makes it easy for users to find ski resorts that meet their needs and sets up opportunities that ensure long-term usability.
This project was a great exercise in layout, hierarchy, and color for me. A lot of information and options had to fit in a small space, especially on mobile. I thought of the mobile version specifically as if it were an app and not a website, which helped me organize the information in a way that wasn’t overwhelming for the user.
