GRIP Skateboarding

2020  — 

Final project for a remote learning UX Foundations course, where we were tasked to develop a website for a local skate shop that would include e-commerce allowing customers to buy a range of products — from streetwear to accessories — as well as build a custom skateboard from deck to screws and bolts.

This involved putting into practice the basics of design thinking principles and phases of a UX process we learned during the course: empathize, define, ideate, prototype, and test.

Key deliverables:

  • Stakeholder map
    • Competitive analysis
      • Business goals
        • User research + findings
          • Empathy map
            • Problem statement + User persona
              • Sitemap
                • Task flow + Wireflow
                  • Wireframes (Lo + Mid)
                    • Functional prototype
                      • User Testing (A/B)

                        The challenge

                        "GRIP sells national and international brands of streetwear, as well as boards and hardware for skateboards. On one hand, it has a great focus on skateboarding culture with the recurring use of photography — either through editorials with its crew's skaters, or through archive images — which reflect the feeling of rebellion and counter-culture that GRIP intends to transmit. However, it also focuses heavily on the technical side of skateboarding, having a very curated selection of products on offer.

                        GRIP's website should pass the values of the brand and the skater culture, allow a greater knowledge of the history of the store, its crew members, sell streetwear items and assembled skateboards, as well as allow the custom creation of a skateboard, from the deck to the smallest screw".

                        Bringing the physical to the digital

                        For us, the challenge ultimately lied on how we could translate the physical experience of shopping at a skate shop, into the digital realm, and not just create standard online store.

                        Naturally, we started with desk research to learn about the market and current competition, while at the same time interviewing one of the main stakeholders of the project — the store owner — to better understand his ambitions and business goals in the short/medium/long run.

                        Sample research & analysis

                        Following this phase, we also conducted a series of interviews with local skaters at a skate park, as well as via online questionnaires to gain insights on their shopping habits, needs, and pains. This presented us with various user findings that validated some initial impressions, but most importantly, it resulted in new insights that would dictate the final direction of the project.

                        Quote from user interview.

                        As we learned more about our users, we realized most users cared more about a solid online presence reflecting their skating culture — revealing a 'for skaters by skaters' mentality — while providing a good shopping experience with very detailed product information/data and excellent pre- and post-sales support. 

                        Make an informed and easy purchase from start to finish, in an environment that reflects the skater culture.
                        Problem statement

                        Our approach: digital complementarity

                        While other groups focused on building a skateboard customizer, we decided on having a very culture-driven website — with a focus on the store, the local skateboarders and community, events, etc — interlaced with product sales (by way of rider endorsement, etc) while pushing for a very capable e-commerce platform. In addition, we also included an easy and fast checkout process, that also offered in-store pickup, as to create a stronger link with the local community and a direct POC with the customer.

                        In short, this approach allows a certain digital complementarity to the physical store, mimicking the experience of the latter: we see what the crew staff uses and recommends, what they watch and listen, we associate real faces and characters to the commercial/shop entity.

                        Final UI for the "Gripped4Life" landing page, following the brand's guidelines and visual language, and the product detail page within the e-commerce section.
                        1. Horizontal team scroll, linking to individual rider bios and rider-endorsed products.2. Example of crew member photo slideshow, with selected products linked to the product page.

                        Easy and painless checkout

                        The Shopping Cart and Checkout process were also thought out to create a simpler and frustration-free shopping experience. One of the pain points we discovered was related to grievances with checkout processes in general, so we opted to incorporate an Express Checkout solution — without any login or registration necessary — as well as 3 ways of finalizing the process:

                        1. Via in-store pickup (further emphasizing a direct store – customer relationship), 
                          1. Paypal (quicker and considered more trustworthy by our users);
                            1. Credit/debit card + MBWay (a local payment gateway favored by our users).
                              Comprehensive, but easy, checkout process.


                              As this was my first proper UX project — from beginning to end — I have learned a lot, but realize there is even more to learn! Given the limited time-frame for this project and the circumstances we were all in (remote learning course, with everyone working remotely and after work) I feel we managed to make it work in spite of it all.

                              Even though I'm happy with the research we managed to source, I would have liked to get a bit deeper into the user persona and user journey part of the process, as I feel there could have been even more useful and actionable insights. Also, I would have liked to be able to show the end result to the interviewees for their feedback and testing and validation.

                              This project was done in collaboration with Carolina Martins, Jéssica Coelho, Marta Nobre, and Nuno Melo, for the UX Foundations remote learning course at EDIT. - Disruptive Digital Education.