JW.S All Rights REserved
33.8492° N, 118.3884° W
By proceeding, you accept the terms and conditions of using this website.
1. Commitment to Accessibility

We are committed to ensuring digital accessibility for people with disabilities and strive to continually improve the user experience for everyone.


2. Accessibility Standards

Our website follows recognized standards for accessibility, such as the Web Content Accessibility Guidelines (WCAG) 2.1, to support an inclusive and accessible digital experience.


3. Requesting Accommodations

If you experience any accessibility issues, please [contact us] (insert link or contact information) to request additional assistance. We are committed to addressing any barriers you may encounter and will make reasonable efforts to ensure access to our services.


4. Modifications to Accessibility Features

We reserve the right to update our accessibility standards or features at any time to improve the user experience and enhance digital accessibility for all users.


5. Feedback and Complaints

Your feedback is important to us. If you have suggestions on how we can improve accessibility, please submit feedback. We are continually seeking ways to enhance access and will consider all feedback as part of our ongoing improvements.


6. Limitation on Legal Claims

By using this website, you acknowledge and agree that, you waive your right to bring any lawsuit or file complaints specifically regarding ADA compliance, accessibility, or usability of this website. We encourage users to address any accessibility issues directly with us through the feedback and support channels provided in these terms.
Decline
M
05
D
27
Y25
T
2:03:17 PM
Currently
CD @ CTHDRL, Founder/Ecd @  ▊▊▊▊▊
NExt Availability:
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*HTM STS
VER/12433.56
Ship
Weylan
YutaniNost romo 180246
Runtime Live
RElative Run
24d 24M 33S
24d 24M 33S
*HTM STS
*HTM STS
*HTM STS
*HTM STS
*HTM STS
01001010 01010111 00101110 01010011
74 87 46 83
4A 57 2E 53
.--- .-- .-.-.- ...
112 127 056 123
WJ.F
33.8492° N, 118.3884° W
PST - 8 GMT
03.2019
60 - 250 Hz
310
90232
33  8622    118    3995
33  8622    118    3995
33  8622    118    3995
33  8622    118    3995
33  8622    118    3995
33  8622    118    3995
33  8622    118    3995
Test link
(!) 05.24: Project Pages a bit broken. WIP (!)
Beats
[ Close ]
.
Works
.
Goods
.
Delta
.
Info
.
.
[
0
]
Archived
PUBLISHED
2016
Interactive
Lifestyle
Beats
®
× BASIC (× JW.S)
Redesign + Brand Strategy
[ Desc. ]
Conceptual art directions, and strategic rethinks of Beats' online presence.
Explore

033.8622°118.3995°

Over the span of a few sprints, I worked with BASIC as a freelance resource to help rethink beats site both strategically and visually. With a brand like Beats, this was understandably a daunting but exciting opportunity to work with someone who had such cultural relevance. That cultural relevance was also the crux of the ask– how should Beats position/leverage their cultural relevance.

Also baked into the ask, was to define the design language should be. The previous site was already strong, and a brand this size typically wouldn't bite on a hard pivot out of the blue... but it felt like there was opportunity here with the previous design feeling slightly dated and a bit disjointed in it's application. It was also developed in a way that wasn't very flexible, so with a potential platform in mind, there would need to be a lot of additional thought and exploration going into it.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

gfdsgdsf

033.8622°118.3995°

A home for Everything and Anything.

Platform design can be an exercise in restraint. In the case of Beats, they're one of the few brands who typically have very high content brand content, so it would be more about championing the content than having the site work hard to elevate it. Their content was also from a wide range of subject-matter and demos, so it needed to be largely agnostic and be able to co-exist with just about anything. It should simultaneously be true to the Beats vibe by being somewhat progressive at the bleeding edge of culture, but not overstepping it's bounds with a foundation in more 'classical' design principles. This was only reinforced by the fact that this was now an Apple brand, and there's likely only so far they'd feel comfortable pushing it.

*This inspo was collected posthumously as I can't find the original collected works... but they were along these lines tho.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

  • sdfsafdsafdsaf
  • dsaff

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

[ inspiration not currently available ]
033.8622°118.3995°

Converting cultural currency into... currency

Beats, having been recently acquired by Apple, was existing at an interesting cross-roads. It was a brand with immense cultural credibility at a time where they had multiple deals with prominent musicians and athletes, and yet was an extension of Apple.. a brand who had attained a very different version of cultural relevance. Trying to find a balance of the two was the crux of the ask– is there a way to parlay cultural relevance in pop culture into tech sales? I think the answer is yes, but the how given these ingredients is the tough part.

My involvement in this was primarily exploration, via several sprints that looked at solving design, content strategy, and UI/UX all at once. While I tried to push the edges of what was possible for a brand like this from an interaction standard, it quickly fell inline with most conservative platforms by developing tool kits to tell more narrow merchandising stories. The foundation of my directions was then carried on, expanded upon, and brought to life by the rest of the team at BASIC.

Beats_Active1
.JPG
Design
/
Figma
Final
7
/10
5600K
 + 
127
37.4419° N, 122.1430° W
Working on the active collection as an extension of the overall site framework that was recently established.
[ Pan + Zoom ]
View in Catalog
Beats_Active1
 ]
[ Desc. ]
Working on the active collection as an extension of the overall site framework that was recently established.
Beats_Homepage-alt2
.JPG
Design
/
Figma
Final
7
/10
5600K
 + 
127
37.4419° N, 122.1430° W
[ Pan + Zoom ]
View in Catalog
Beats_Homepage-alt2
 ]
Beats_Homepage-alt1
.JPG
Design
/
Figma
Final
7
/10
5600K
 + 
127
37.4419° N, 122.1430° W
[ Pan + Zoom ]
View in Catalog
Beats_Homepage-alt1
 ]
Beats_Homepage-Light
.JPG
Design
/
Figma
Final
7
/10
5600K
 + 
127
37.4419° N, 122.1430° W
[ Pan + Zoom ]
View in Catalog
Beats_Homepage-Light
 ]
Beats_desktop_topicLanding
.JPG
Design
/
Figma
Final
7
/10
5600K
 + 
64
37.4419° N, 122.1430° W
Creating ways to browse tagged content via a multi-tag system... something i dunno if it was really done at that time?
[ Pan + Zoom ]
View in Catalog
Beats_desktop_topicLanding
 ]
[ Desc. ]
Creating ways to browse tagged content via a multi-tag system... something i dunno if it was really done at that time?
Beats_HeadphoneIMG-grid
.JPG
Design
/
Figma
Final
6.5
/10
5600K
 + 
127
37.4419° N, 122.1430° W
[ Pan + Zoom ]
View in Catalog
Beats_HeadphoneIMG-grid
 ]
Beats_homepageStatic
.JPG
Design
/
Figma
Final
6.5
/10
5600K
 + 
192
37.4419° N, 122.1430° W
[ Pan + Zoom ]
View in Catalog
Beats_homepageStatic
 ]
Beats_Desktop_toolkit-1
.JPG
Design
/
Figma
Final
6.5
/10
5600K
 + 
192
37.4419° N, 122.1430° W
[ Pan + Zoom ]
View in Catalog
Beats_Desktop_toolkit-1
 ]
Beats_Desktop_toolkit-2
.JPG
Design
/
Figma
Final
6.5
/10
5600K
 + 
192
37.4419° N, 122.1430° W
Grids on grids. A moment in the tool kit to really leverage the deep library of brand content.
[ Pan + Zoom ]
View in Catalog
Beats_Desktop_toolkit-2
 ]
[ Desc. ]
Grids on grids. A moment in the tool kit to really leverage the deep library of brand content.
Beats_homepageSlide2-v1
.JPG
Design
/
Figma
5600K
 + 
0
37.4419° N, 122.1430° W
[ Pan + Zoom ]
View in Catalog
Beats_homepageSlide2-v1
 ]
033.8622°118.3995°

Lots of exploration with Blue sky initiatives

As you might imagine, there's a lot of process that's gone into the works above. Most explorations were looking at different design languages, moments in the experience, and different content strategies.. which then impact design directions.

¯\_(ツ)_/¯
[ Nothing here...yet ]
033.8622°118.3995°
Attribution +
Add'l Info
A Collaboration with
BASIC
Creative Director
Matt Faulk
Design Director (Freelance)
Jon Way

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Subscript

Title
Beats
Project
Redesign + Brand Strategy
Context
× BASIC (× JW.S)
Responsibilities
Art Direction, Content + Brand Strategy, UX/UI design
Project Type
Interactive
Tags