For an intensive Web Design and UI program, I was tasked with creating a responsive website that applied Design and UX Principles as well as latest web standards and best practices. Before developing this Final Project, I needed to design the UI in Figma, and create a working prototype along with a style guide, a UI kit, and exported assets.
everything begins with an idea
As a long-time climber who has seen the sport of climbing grow in popularity around me, I wanted to create something for those new to the climbing scene in Montreal. With the sport’s rise in demand and commerciality over the last 5 years, Montreal has seen the opening of 5 new gyms within that same timeframe. Due to the increase in options, I often hear from visitors and beginners:
“Which bouldering gym should I go to?”
asking the audience
To help answer this question, I decided to create MTL BLOC LIST, a directory of Montreal’s bouldering gyms that focuses on the character and culture of each gym, letting climbers find the one that suits them best. All starting with a simple, playful question that piques the climber you are deep down.
To determine the character and culture of a gym, I chose to boil it down to the age old debate in climbing style: Old-School vs. New-School.
While the contrasting styles directly define the flavour of climbing, it also implicates differing values and mentalities, attracting different types of climbers. The culture of climbing was once dominated by old-school “dirtbags” of the outdoors. Whereas now, a new-school culture of indoor plastic pullers is gaining influence, thanks to the rising popularity of competition climbing. More and more, the “comp kids” are now taking the reins.
To find out how people identified a gym’s climbing style, I asked climbers in Montreal to rate bouldering gyms they know on a scale from 1 to 5, from Old-School to New-School.
the making of mtl bloc list
Role
Sole designer, developer
Duration
2 months
Tools
Figma, Adobe Photoshop, Adobe Illustrator, Visual Studio Code
Based on the results of the survey, I ranked the gyms from most old-school to most new-school, giving them a score out of 100.
I imagined the landing page inviting the user to answer a question, the response to which would generate a gym whose score matched the user's input.
I began to sketch out ideas and expanded on the one I liked the most.
Defining the visual language
To solidify the idea, I wrote up a simple design brief to establish the project’s overview, its goals and objectives, and its target audience. Better understanding these starting points helped me shape the visual design of the project.
From there, I looked for inspiration from other web designs, picking visual and interactive elements that I thought would be effective.
For its content and interaction, I wanted the website to constantly give visual feedback throughout the user’s journey. I knew I wanted to incorporate the quiz on the landing page, which would navigate the user to selected content.
For its visual style, I knew I wanted to keep the website’s overall feel bright and colourful, to reflect the playful nature of climbing. At the same time, I wanted to balance that playfulness with climbing’s reputation as the “cool new sport”, by giving it a bit of edge.
After gathering my inspiration research, I was ready to create my mood board to curate the project’s visual language.
Staying true to the findings of my research, I created a mood board for typography and colour that would be the basis of my style guide. I expressed the concept of play successfully, and found the right mix of edgy but reliable with the font choice.
Designing in Figma
Using the layout sketches I had made earlier, I started by creating the Landing Page. I opted for a desktop-first approach to allow for more creativity in my designs and to build a richer visual experience without mobile constraints.
I wanted to make sure I accurately applied my style guide to the Landing Page before moving on to the rest of the website. Setting the style on the first page allows the rest to follow seamlessly. It took a couple of iterations for the design to align strongly with the mood board, effectively communicating the goal of the project.
Now that the colours match those in my style guide, and the goal of the website clearly introduced, I was ready to build on my design.
Building a design system
While creating the rest of my designs, I was able to further refine my style guide by modifying colours, adding variants, and really solidifying the typography.
I also created components for each of my UI elements as I was designing them. By building my UI kit throughout the design process, I was able to easily generate instances and variants at the ready when it came time to creating the mobile designs.
Prototyping & Mobile Layout
Lastly, I created a working prototype with all the desired interactions before duplicating all my frames to modify for mobile.
Development
Before heading over to the IDE, I exported from Figma an assets folder of optimized graphics ready for web production.
To create the website, I used plain HTML5, CSS, and Vanilla JS. I developed for desktop first, then used media queries with breakpoints to add compatibility with mobile.
For the data, I created simple JSON files to store the directory list and dynamic sections of the gym page content.
NEXT STEPS
The version submitted as my Final Project did very well, receiving an average grade of 95% with an overall grade of A+ for the program. No comments for improvements were provided, however here are a couple that I would like to explore as I continue to work on this project:
Refocus the narrative
In creating the page for a specific gym, I categorized the content into the gym’s history, its neighbourhood, its amenities and offerings, and social initiatives. While these sections do a good job of making the website informative, it loses the initial goal of focusing on the gym’s character and culture. Moving forward, I would like to redesign the gym page by using visual storytelling to highlight the styles of the gyms.
Go mobile-first
Given the demographic of my audience, and the challenges I faced modifying my designs for mobile, I believe that going for a mobile-first approach would have been more appropriate. Prioritizing the mobile experience would take into account the fact that if shared, this website would likely be visited on mobile by the majority of users.
