The goal of Skate Log was to design and develop an interactive and responsive website to teach people how to skateboard and track their progress.
This was an individual project I completed as part of an undergraduate course on programmable user interfaces. I conducted competitive analysis, defined user flow, created wireframes, and developed the webpage.
User Experience Designer, Web Developer
User Research • Visual Design • Prototyping • Web Development • Responsive Design
HTML • CSS • JavaScript • Bootstrap • jQuery • Figma
As a beginner skateboarder myself, I have often found myself looking through online resources to learn tricks, but I have had difficulty finding comprehensive, reliable sources. As such, I wanted to challenge myself to create a website to help beginner skateboarders learn new tricks and all skaters to track their progress in a centralized location. To add to the challenge for this project, I used jQuery and Bootstrap, JavaScript libraries that I had never used before.
As I approached this project, I kept in mind the target audience of the site. The target audience of Skate Log is people who are just starting to learn how to skateboard and are looking for a place to get consolidated information about basic tricks and how to go about learning them. With this audience in mind, I decided that the site would need to convey information about individual skate tricks, like their common names, levels of difficulty, and the process of learning them.
How might we help beginner skateboarders develop a strategic learning plan to acquire skateboarding skills?
With my problem statement and target audience in mind, I developed the user flows for the process of looking up a trick to learn or mark as a trick the user already learned. I also had the idea that the site would recommend relevant tricks to the user based on the tricks they already knew and current level of skating as to make the process of finding new tricks to learn simpler. I designed the site so that users would be able to use the site to read about different tricks and use the steps to learn them and related tricks to advance their skateboarding ability. They would also use the website to keep track of the tricks that they have learned already and the tricks that they want to learn. For users who have advanced past the fundamental tricks, they would be able to use the daily trick challenges to make their skate sessions more interesting.
I used my wireframes to guide the layout of my final design as I developed the site. I used Bootstrap 4 because I had never used it before and heard that it could make creating responsive web design faster and easier, which I did find to be true during the development process. I used it to build the site using its pre-existing classes and CSS more quickly. Bootstrap made the site look more unified in style quickly and made it easier to modify dynamically. However, I did find that, using Bootstrap made the aesthetic of the final product feel “very Bootstrap-y”--that is to say rather dated. Given more time I would have spent more time setting up a more visually appealing style guide before development to avoid falling into that common pitfall of using Bootstrap.
I also used jQuery to make traversing the DOM faster and easier. I could more efficiently add events to different elements, like buttons and modals. I was able to make searching teh DOM for different events easier and did not have to manually create buttons as many times. As such, I was able to make make my site more dynamic.
Users on the site can log a certain trick as a target trick or landed trick to keep track of what tricks they are practicing.
Users on the site can search for specific tricks or tricks related to ones they are already familiar with to learn more about them. Each trick detail page shows information about similar and related tricks, as well as tips on how to learn and practice the trick.
As I was implementing my website, I had difficulties storing and managing data because I was working without a database or API. The biggest challenges were in implementing the search function and the interactions between the buttons and data storage. Throughout the process of writing the HTML, CSS, and JavaScript, I learned how to more efficiently utilize Bootstrap elements and became more familiar with functions native to JavaScript and jQuery.
This project helped me develop my understanding of JavaScript, jQuery, and Bootstrap, as I was forced to work in a new JavaScript framework and learn new techniques to program the interactions I needed for my site. Given what I know now, there are a lot of aesthetic and technical changes I would make to the site to better fit modern design styles and standards. I would also want to consider rebuilding the site without Bootstrap to afford myself more flexibility with styling. Even so, I think the current iteration of the design serves as a minimal viable product that addresses the problem statement I set for myself and provides a helpful jumping off point for future developments.
In future iterations, I would want to make the site more dynamic by writing an algorithm to generate a random "daily trick challenge" and tailor the trick recommendations in the progress log. I would also want to use React components to create more modular elements in the site with looser coupling and store trick information in a database for easier modification.
In future iterations for this website, the most important step would be to start developing a mobile UI. Since the target user of this website would be using the information on this site to skateboard, they would likely be away from their desktop, so making an effective mobile website would make the site more accessible. For the mobile UI, I think it might be helpful to draw inspiration from mobile applications like Instagram, YouTube, and TikTok, which boast their own subcultures of skateboarders who might want to use this site. This inspiration might add more social media elements to encourage skateboarders using this site to keep learning skateboard tricks.
