Project Overview

Competing in a crowded landscape, literally, Mt. Seymour is 1 of 3 ski-resorts in close proximity to the Vancouver local ski and snowboard market. After an unsuccessful ecommerce launch, Mt. Seymour found themselves with a tarnished reputation after a challenging season of guests being unable to use their online platform.

I was tasked to scope, research, plan and deliver on a quick launch in time for their season pass rush to recoup some of their losses. I led the team in a 5 phase project which included: research, structure planning, concept and strategy, and leading the technical team in the front end implementation into the ecommerce CMS.

Contents

1. Research & Scope
2. User Targeting & Experience
3. Information Architecture
4. Interface Design
5. Web Development

Phase 3

Users 

Targeting—and empathizing—with their toughest critics

Through conceptualizing key users, I was able to develop interface requirements to set technical requirements for the different purchase paths for the dev team to quote. I also convinced the Mt. Seymour team to find pitfalls of the current processes in phase 3 by using some user empathy mapping and user stories techniques.

Deliverables

• User Stories Spreadsheets
• Product Technical Specs

Phase 3

Information Architecture

During the IA phase, I provided the development a deeper understanding of the booking process which also helped to start the planning of the back-end server integration. All the deliverables I created were used to gain approved for the final budget proposal. These assets were given to the Mt. Seymour Customer Experience and Marketing teams to collaborate with us on, and helped with completing technical specs for implementation.

Phase 3

Wireframes

The sad truth is that there are no resorts out there that do a good job of making booking services on a ski-resort website easy. The challenge was to make an incredibly complex and involved process of purchasing anything on the mountain feel as simple as it would be at the mountain with a customer service clerk doing it for you. Top top it off, the website also had to be compatible with a multi-lingual implementation to reach the asian speaking markets. The outcome was a UI that is flexible enough to work with 8 completely different purchase types and feels familiar to customers returning for multiple purchases. 

Deliverables

• Over 30 wirefreames for 8 purchase path wireframes at 3 breakpoints
• Home Page Content Planning

Phase 4

User Interface

Finding the right tone

With a specific colour palette and limited typography choices, I needed to figure out a way to bring some new life to the Mt Seymour brand. I put together 3 different mood boards to be the future art direction for Mt. Seymour products online and the future website.

Deliverables

• Mood Boards / Style Tiles
• Home Page artwork at 3 breakpoints

Setting a new standard in ski resort eCommerce

With the tigh timleine in mind, I skipped the wireframe phase of the landing page and moved into the interface design. Using the "Energetic" look and feel I was able to support Mt. Seymours vision of being a family friendly resort and go-to destination for ameature snow sports enthusiasts in the Greater Vancouver Area. The Mt. Seymour team recieved the landing page mockups with great enthusiasm and quickly approved them allowing me to move up the design implementation timeline.

Technical

• Design in Photoshop CC
• Notism for Prototyping
• Zeplin for Development Documentation

"I’ve shown [management] and they [all] agree it looks great. We’d be happy to proceed with your design as is without change or feedback. Once again, over the moon excited about how it looks."

Nolan Bartels
Manager – Guest Experience
Mt Seymour Resorts

Phase 5

Implementation

Crossing the finish line with rapid prototyping

With the high level of confidence we established through our 5 phases of pre-production, I was able to get approval from Mt. Seymour to move forward with a in-browser design phase. I was  able to speed up the implementation timeline of the Siriusware integration by making a lot of design decisions in the browser. By creating the flat prototypes in HTML/SCSS/JS I was better able to communicate with the development team with working concepts that were responsive and make changes as needed to keep us on target for an on-time delivery. A key part of the final project was the User Stories I created in Phase 2 were turned into test plans for the QA team. The user stories helped craft an in-depth testing story for everyone to push the product over the finish line.

Content is managed by the client and appearance may differ from mockups

View the Development Site > (password required)

View the Website Style Guide >

Skills Used

• Flat HTML files with annotations for handoff to development
• SCSS with Foundation Framework
• Prepros for SCSS Processing
• Developer Documentation Style Guide
• CMS User Documentation

Credits

Art Direction: Lea Gucciardi | Information Architecture: Lea Gucciardi UX/UI Design: Lea Gucciardi | Back End Development: Jeramy Marshall | SiriusWare Integration: Tim Porter | CMS Integration: Conrad Macintyre and Lea Gucciardi | Custom Interface Front End Development: Lea Gucciardi and Conrad Macintyre