Find Your Ride
A website prototype that educates users on skateboards and guides them in a board selection.
Role
UI Designer, Content Researcher
Duration
6 Weeks
Tools
Figma, Figjam
Team
Individual
Project Overview
This prototype was created as a final project for the User Interface Design 2 course at Kennesaw State University. My task was to develop an informational website/app prototype that teaches users something new.
I have a passion for skating, which led to the idea of sharing my knowledge on skateboards by designing an experience that feels authentic and intuitive for all audiences.
Goals
Utilize User Interface Design concepts to create an effective, user-friendly educational website.
Demonstrate an understanding of User Interface Design concepts and illustrate how they were used.
Refine prototype based on feedback from peers and class instructor.
My Approach
The Proposal
The first phase was forming a written proposal that detailed the purpose and structure of my prototype. It was required to be interactive and incorporate 20 U.I. concepts covered during the course.
Design & Prototyping
After the proposal, we began the design phase. This meant doing research and beginning to prototype my design after frameworking.
For my research, I conducted literature reviews on relevant discussions regarding entry into skateboarding and also employed an ethnographic approach by observing and speaking with people invested in skate communities.
Revisions
Revisions were done concurrently throughout the entire project process. Each student would present their current progress, and utilize the feedback from their peers and instructor in the next iteration. This also was great practice for receiving and delivering constructive criticism.
UI Principles
As mentioned in the description of my project proposal, I incorporated 20 User Interface concepts into my design. These concepts address psychology and human-computer interaction within interfaces.
Four are shown below to illustrate how they were implemented and to also explain why each selected principle is important to the user experience.
The Multimedia Principle
This principle which states that having relevant graphics in addition to the text is best for explaining the same content.
In my prototype, this was used to provide a thorough understanding of skateboarding processes and terminology.
The Spatial Contiguity Principle
This Principle states that corresponding words and images should be placed near each other because it is more explanative that way.
Throughout the prototype, this was integral to allowing more clarity with skateboards they are niche and specialized in their terminology and function.
The Von Restorff Effect
This effect illustrates how the differentiation of one item within a set of similar items will allow it to be most memorable.
This concept was utilized in the prototype to distinguish crucial information by applying typographic emphasis to select text.
Chunking
Chunking is the practice of dividing larger content into smaller, distinct portions because it helps users process content effectively.
With the plethora of information necessary to be delivered for those entering this sport, this principle was integral to not overwhelm the user and also separated different points of the discussion.
If you want to see more of these UI principles in practice, or just want to see if you should get a longboard or shortboard, check out the prototype!
Retrospective
Creating an interactive website was fun and exciting, and applying all 20 U.I. principles was a challenge that taught me how to make an original, educative website that could best deliver information to its users. This is also a sport & culture I personally enjoy, so delving deeper into this world to share it with others was extremely rewarding
Looking ahead, I still recognize great opportunity to further assist people in finding the perfect skateboard build. I aim to further develop this prototype by creating an additional guide that takes user input about body statistics and skateboard preferences. This data would be used to suggest a particular skateboard build that suits the user (i.e. board type, size, component selection). This would be done in an actual live website, which I aim to complete in late 2024.