12657942_10154563603293047_3541034819378

BAY AREA GREAT
ROLLERSKATES LIST

Responsive Site Redesign 

Overview

Making rollerskating communities and histories contemporary and accessible to a new wave of enthusiasts.

 Rollerskating, often thought of as a novel past-time, has recently become a mainstream lifestyle thanks to social media popularity. However, there has been an existent subculture community thriving all along that has been erased by it's newly commercialized interest. Bay Area Great Rollerskates List lends visibility and recognition to the Bay Area Rollerskating founders, facilitators, and community members. This responsive redesign helps newcomers and serious rollerskate hobbyists so both communities can roll together. 

Scope

⏳ Timeframe 

4 weeks

👩🏻‍💻 Role

UX, UI, Branding: Student Project

🛠 Tools

Sketch, InVision

📊 Practices

User Interviews, Market Research, Competitive Analysis

Drawing (7).jpeg

The Challenge

12795093_10154630568048047_9067528405976

Currently information available online about rollersports is limited to only a few viewpoints via social media and outdated sites. Archival sites specifically haven't been updated in decades and are falling into obscurity including the California Outdoor Rollersports Association non-profit website (CORA), my initial project focus. 
 

What made this a bit more complex, is cultural erasure of the Black community in arts and recreation and in this case: rollerskating. Here is an excerpt from a radio broadcast called Here and Now outlining how rollerskating is about "Black Joy" and social media affects this:
 

"Social media makes it easy to overlook the origins of skating beyond cute vintage clothes...But it's  also was a way for Black people to feel liberated. This was a way for Black people to take up space, enjoy music, to enjoy their culture,” she says. “And I think that's something that can be really overlooked when we see the pace of social media and how we grasp on to different trends."

-Jasmin Moore, rollerskater

Drawing (33).jpeg
Drawing (16).jpeg

EMPATHIZE

TARGET USERS:

Skaters of all ages who engaged in lifestyle based rollerskating for the first time via social media. 

steve-gale-e7jq0NH9Fbg-unsplash.jpg
Drawing (9).jpeg

Fix broken links and navigation maze present on current site.

Spotlight skaters of color so that they are no longer invisible due to structural inequities and bias present in tech and media.

spotlight1.jpeg
Drawing (1).jpeg

Refresh visual design balancing brand's retro nostalgia with contemporary vision.

Project Goals

A gap in information...

To begin, I wanted to compare emerging information with established organizations to see where the gap in information occurred so I did some market research. Next, I had to determine what made a strong editorial/archival database where a large amount of content was organized effectively, so I conducted competitive analysis.

My first set of data was from
direct competitors, other rollerskate organizations and indirect competitors, pro- level teams, rink owners and other recreation organizations. I found design inspiration from an indirect competitor, Black Girls Ride that had a successful UX/UI structure for an editorial site. 

Here are some findings of market research:

pexels-rodnae-productions-7335162.jpg
social media.jpeg

Newer skaters accessed info via social media like TikTok, Instagram accounts from rollerskate brands/affiliates, and YouTube. This mostly included recreational disciplines: rhythm, aggressive/park, street skating.

Drawing (2).jpeg

Most official websites were that of competitive organizations and businesses (likely due to funding): artistic, speed, roller derby, hockey. 

Drawing (10).jpeg

There was a mix of professional and labor of love designs. Online magazines provided a better structural template for an archival format. 

Direct Competitors

Direct Competitors

Indirect Competitors

Indirect Competitors

Asking around...

To research my target audience I asked around at a skate meetup for roller dancers. Unfortunately the diversity of skaters fell short with local skaters only due to pandemic and wildfires, regardless I conducted in person (socially distant) user interviews

Recreation outlets make for poor interview conditions so later I interviewed more people. Talking proved difficult in on site with music playing and people moving I also couldn't find newer skaters in the time I had. This time I found
new skaters in their starting point: on social media. I messaged three local skaters for a cold call on reddit in my second round of user interviews

What experienced skaters say...

Drawing (3).jpeg

"I had no clue the California Outdoor Rollersports site even existed and I work for David Miles (founder of CORA)!

DANIEL
SKATING SINCE CHILDHOOD

Drawing (4).jpeg

"I've never used the CORA site because I don't skate online.

SARAH
SKATING TWELVE YEARS

Drawing (6).jpeg

"I mostly learn about rollerskating by word of mouth and just showing up. 

MITCH
SKATING SINCE CHILDHOOD

What newcomer skaters say...

social media.jpeg

 "I don't know anything about SF's skate history specifically. I would probably google SF skate history or check for You Tube videos. 

XELABE
SKATING 6 MONTHS

THINKING ABOUT OREOS:
 
SKATING 3 MONTHS

social media.jpeg

"Seeing the flux of female skaters was definitely inspiring to see. Being able to see and connect with local skaters through social media platforms has been a big motivating factor as well.

social media.jpeg

"The CORA site is kind of old. They should move all the videos to You Tube.

FRANCIS
SKATING, MORE THAN A YEAR

Generalizing the project...

Getting in touch with the CORA founder for a stakeholder interview proved to be difficult in the little time I had. I was still certain that the skate community could benefit from a contemporary design of rollerskating news, videos, and events therefore I generalized this project making it into the Bay Area Great Rollerskates List based on the California Outdoor Rollersports structure and research. Much of CORA's work is still featured in this project. 

b441cb6c-c0e6-4ba3-b534-fb50c3607ac9.jpe
Drawing (17).jpeg

DEFINE

MEET CRISTINA:

A college aged lifestyle skater searching for social skate meetups. 

Persona

Persona: Cristina

Since I had a lot of personal bias as a veteran rollerskater I made a persona, storyboard, and an empathy map to help relate to new skaters. Which proved to be worth it later on when designing the site in the approaches to design copy, photography, and content included in the site. 

Empathy Map

Empathy Map

IMG_20200907_193630.jpg

Storyboard

Drawing (18).jpeg

IDEATE

An intuitive structure...

Creating the UI was a delightful process because I was able to see a world I was passionate about come to life in design. I enjoyed sharing this aspect with my community as it became a fun "yearbook" of our recent events. 

My design was meant to orient a new skater to the various outings, important background, and media that research indicated they desired. Due to the large volume of information that was to be organized, it was important to get the site structure and navigation for an easy to use experience. I created a site map, feature roadmap, and user flow to show Cristina's navigation in her search for information

10958230_10154630572538047_7729453166684
99d14892-59a9-4ca1-bb28-b8cde236bd08.png

Site Map

cac202a4-e92f-4a4c-8814-208511753c07.png

Task Flow

Screen Shot 2020-10-25 at 11.31.34 PM.pn

Feature Roadmap

Branding, Inspiration, and the Unexpected 

To define the branding attributes of the site I created a logo design to make a usable hi-res version and refresh, a style tile to define the site UI, and sketches to format the wireframes

This was the point in time where my deliverables reflected my stakeholder challenges. Here I show both logo redesigns and list varied titles as I moved ahead with the project.

 

CORA Logo.png

CORA Logo

BA Great Sk8s List Logo.jpg

Great Rollerskates List Logo

Style Tile

Style Tile

Lo-fidelity Sketches

Lo-fi Sketches

Determining the layout...

I developed responsive wireframes to show what was important to target audience: 
-finding skate meetups
-access content to share on social media
-learn the stories of present and past


My designs reflected those values by:
creating media rich editorial layouts, calendar based event card pages, and shareable social media links. 

Wireframes

Wireframes Desktop

High Fidelity Mockups

To wrap up the ideation phase I developed responsive high fidelity screens. I faced a challenge of copyright both for media and news article copy. To solve this problem, I asked my community members to source video shots and photography. For copy, I created and published an article on Medium to feature a hot topic in the skate world: the future of skating rinks in relation to Covid-19. 

High Fidelity Frames

Desktop High Fidelity Screens

BARC Wire Frames Mobile Hi fi.png

Mobile High Fidelity Screens

BARC Wire Frames Tab Hifi.png

Tablet High Fidelity Screens

untitled-project@2x (1).png
Drawing (19).jpeg

PROTOTYPE

This is where the design came to life. I used InVision to create a desktop version of a prototype. Later I updated to reflect Bay Area Great Rollerskates List.

untitled-project@2x (3).png
Drawing (20).jpeg

TEST

TEST FORMAT:

Target audience via thirty minute video conference calls with screen sharing view. 

User Test Findings

Participants all completed tasks at 80% accuracy rate. This is how my user test aligned with test goals

1. Observe if a user can complete an assigned task.

Participant #1- 100%, completion rate

Participant #2 60%, couldn't locate the news articles

Participant #3 80%, completion rate, couldn't navigate to events 

 

2. Learn which stories and articles are most compelling to users. 

-shorter articles

-recent articles

-articles with pictures of identifiable skaters, rather than larger/ambiguous imagery of skating

-articles related to covid/post covid restrictions

In addition users wanted info on skate spots and skate advice a lot more than news articles

 

3. Learn if this is the optimal user flow or if there are easier ways to accomplish the task.

Users had a hard time with the copy. The article was too long to read, the links such as "The Vault" were irrelevant and unclear to users. 


Since problems seemed to be central to specific parts of the site I organized using an affinity map to show several things were important to new skaters: Covid-19 precautions, help with equipment and gear, and in-depth walkthroughs of skate meetup sites.

What test participants say...

Drawing (21).jpeg

Meetup Details Page: "For me pictures are a starting point but might not go if I don’t see a video. Video walkthroughs are becoming more popular.

RAUL, 1 YEAR SKATING

Drawing (22).jpeg

"Meetup Details Page: Would like to see GGP a little link to a map, not as many people are like let me just google that.

PRI,
< 1 YEAR SKATING

Drawing (23).jpeg

Videos Page: "I like when people are wearing masks social skating, that's really important to me at the moment. 

KAITLIN, < 1 YEAR SKATING

Bay Area Gr8 Skates Affinity Map.png

Affinity Map

Newer findings on skater needs and motivations

I organized the priority revision list for the next iteration. 

-Feature newest media first. Prioritize popular topics.
-Redesign calendar and cards for compactness
-Make news articles skimmable
-Users want skate spots versus scheduled events
-Events page: clearer times, video walkthrough, picture of whole venue, picture of attendees in masks
-More descriptive copy. Change “Join Us” CTA to “Skate Meetups”, "News Vault" to "Skate News", etc. 
-Social media sharing buttons could be more engaging/consistent to convention
-Redesign tags to look less like links

Conclusion

Since I'm a skater I sought to solve right in front of me at the moment. I knew it would of interest/challenge to be explored for two reasons:
-personal bias
-unique personality of client


There was a lack of input from two key groups of people: stakeholder and folks of color that have less representation in popular media.
 Strict covid lockdowns and digital divide made things rather challenging in this aspect in order to schedule interviews with Black skate founders. The biggest curveball that very much impacted this project was not being able to reach my stakeholder after a certain point. Shows how important parameters are up front and covid limitations. I respected the challenge because it gave me my first experience in stepping back, letting go, and moving on. I can see a lot of growth for UI especially when it comes to translating to branding and themes. I did have a joyful experience getting more command over vector art creation working on the logos.

What's Next?

• Rework UI to fit content available

• Handoff to developer partner, Coban

• Presentation to stakeholder, Iterations based on input
• Conduct more interviews centralizing Black community 

pexels-photo-7335437.jpeg