A little while ago,
@adamstern_
and I set out to build a way for folks to pick a color theme at
@browsercompany
.
We aimed to encourage exploration and playfulness, questioning how conventional color pickers work.
🧵 here’s our path to what you see below
a few years back, I was helping a client with product work. they added me to their slack. i was being active, thumbing up posts, and adding what i thought was a large smile to posts: 😬
Feedback appreciated 🙏 Created a quick exploration inspired by your feedback on extensions in Arc. The goal is to enable quick sidebar access to extensions, while gracefully supporting any number you’d like to pin. This is building off ideas from
@daraoke
and
@adamstern_
!
i was pulled aside by a lead at the company. they let me know that I was upsetting people. folks would share their work and I would liberally add grimace faces to everything
🙃🙃🙃
earlier
@ArcInternet
shared a video where i asked for feedback on a work-in-progress design. 100+ folks replied, sharing mocks, prototypes, and critical feedback. i could not be more thankful for so many ppl caring enough about what we’re building to take that time. thank you 🙏
We just shipped Library v2 in
@ArcInternet
! If you’re curious to see a glimpse into how Library 2.0 came to life
@browsercompany
, here’s some of our thinking behind the work and a live crit where
@joshm
and I discussed Library v2 a few weeks before launch —
In today’s
@arcinternet
update, we’re enabling shared Spaces, Folders, and Split Views!
This is just a first step in our explorations to make Arc more collaborative and shareable — to bring people to your browser✨
Design friends, thanks for the feedback on the Arc update banner. Hear ya loud and clear; this ain’t it! Soon, you won’t have to see this banner, but in the meantime, we’re working on it and will have something ~ more delightful ~ soon 🩷
I was digging through old prototypes and I found a fun one. This prototype shows various approaches to handling spaces in
@ArcInternet
with different sidebar widths. ��
huge shoutout to my coworkers at
@browsercompany
💙. a lot of hard work went into making our latest iteration ~ fast and obvious ~.
more work to do, but it’s fun work when you’re surrounded by great people.
it was incredible to watch the crew at
@browsercompany
collaborate to ship boosts 2.0. from tweaking the depths of chromium, to the lovely UI details, to the storytelling team putting out videos like the one below. thankful every day to work with such a talented group 🙏
back from a wonderful design offsite with the
@browsercompany
design crew (sans
@karlamickens
who wasn’t able to attend)
thankful to work with folks who are so dedicated to their craft and such collaborative and positive teammates 💙
very excited for what is to come :)
very proud of the UI and color work we just launched to
@browsercompany
members. such a fun mix of color theory, math, and engineering+design. had a blast jamming on it with
@adamstern_
💙
8/ We also hid complexity when picking a multi-color theme. You choose two or three colors, and we hide the complimentary and split-complimentary color theory powering the colors.
🎨 You adjust the primary color, and we guarantee the other colors are a gorgeous match.
the crew at
@browsercompany
put so much heart into building Arc, it’s lovely seeing the tweets saying you enjoy it.
thank you for being open to trying our work in progress and giving feedback on things we can improve 🙏🙏
lately i’ve found it more useful to add interesting people to lists based on affinity than to follow them. pinning those lists on iOS makes the lists easy to access 🤌
over a year later, i finally had the chance to meet
@browsercompany
coworkers in person. they are some of the smartest, most-innovative, and welcoming groups i’ve had the chance to collab with 🙏
keep your eyes out, we’re cooking up some incredible work 💪
3/ We took inspiration from music apps. Why? You don’t always know what you’re looking for when making music. So you need to experiment and tinker.
Music apps use exploration as a means to an end.
GarageBand’s virtual drummer and Figure by Reason are great models of this.
thank you for the feedback on the pinned extensions prototype below! it’s now live in
@arcinternet
.
please kick the tires for a week or so and let us know how it’s feeling / how it could be improved 🙏
Feedback appreciated 🙏 Created a quick exploration inspired by your feedback on extensions in Arc. The goal is to enable quick sidebar access to extensions, while gracefully supporting any number you’d like to pin. This is building off ideas from
@daraoke
and
@adamstern_
!
a while back,
@adamstern_
and I explored alternative ways to open ephemeral tabs when you 'cmd-click' links. these little floating cards were one of the approaches that showed a lot of promise — they felt snappy to view+triage without creating a ton of tab exhaust
@joshm
@smixsam
@a2
@ArcInternet
We prototyped this a while back! The idea was you could collect a little stack "mini tabs" to preview, without leaving the original site
just felt a wave of nostalgia of walking from market street to yerba buena gardens. enjoying the sunshine while passing by the jewish contemporary gallery and tropisueño.
6/ We aspired to make our color picker playful by applying what we observed in music apps:
🎛 Promote discovery
👍 Hide complexity
⚡️ Respond instantly. Making ‘mistakes’ immediately correctable
Dara only joined the
@browsercompany
design team a few weeks ago, but it’s clear how much skill and curiosity she brings to her work. Such a privilege to work with you,
@daraoke
!
2/ For our use case, we don’t need you to find a precise color. Instead, we want you to discover a color you like while enjoying the process.
So we set off to make something that nudged playfulness over precision.
the amount of thought and craft
@codeblue87
put into
@browsercompany
’s new PiP was incredible to watch. a reminder of the many, many nuanced decisions it takes to make something feel like it ‘just works’ —
Really proud of the interaction work we're scratching at in today's
@browsercompany
update. The new video player uses a super-charged windowing system we built on top of macOS.
Before Library v2, surfaces like the Space Manager, Tab Archive, and Library v1 were functionally and visually inconsistent and spread out across different parts of Arc — v2 aimed to bring everything together on one cohesive surface.
Live figma here —
9/ How did we validate that the UI was playful?
You often need to “feel” UI to see if it is delightful. I built the initial prototype in Swift, collected feedback from coworkers, and iterated on it with
@adamstern_
. At the same time, he made it performant and production-ready.
4/ These apps are, in part, playful because they hide complexity. So, for example, you don’t need to know how GarageBand’s virtual drummer decides which drums to strike or how often.
🥁 You pick simple or complex, and GarageBand does the rest.
7/ We encourage discovery in a few ways:
• No color on the pad. Only names like “greenish”
• No indication that the color darkens near the center of the pad and lightens near the edge
• Picking a suggested color animates the knob’s position. Connecting color to knob position
5/ Music apps also foster exploration through a near-zero cost to correct ‘mistakes.’ Every change responds with instant and easily correctable feedback. ⚡️
🎛 You adjust knobs until you’re happy.
@rsms
there’s gotta be another metric we can add down there. maybe the weather at the time+location the tweet was sent? maybe the amount of free RAM the senders computer had? maybe a meter to show how badly el*n is trying to prove to everyone how “more active than ever” twitter is?
want to see a real-world design+engineering project go from idea to implementation? check out this fantastic video from
@_tamijo
and
@katherineroseyy
, who just shipped “dev tab” for
@browsercompany
—
One year later, to the day, and we’ve just finished the
@browsercompany
unboxing experience 😇
This means invites are going to start flying off the shelves !!
Our team loves to learn and iterate so bear with us, but *next week* we will start ramping out those invites
🏄🏄♂️🏄♀️
Got some big news: I’m joining the design team at
@browsercompany
!
The web deserves some love, and I’m super excited to help make Arc, the fun, fresh, browser of tomorrow ✨
1/ Traditional color pickers urge precision, allowing you to enter numerical values to set an exact color.
Accurate color is required for some applications such as print and film and is a +$150m industry lead by
@pantone
.
Karla Cole (
@karlamickens
), Product Designer & Brand Lead at BCNY;
&
Nashilu Mouen (
@lafillemouen
), Head of Storytelling at BCNY;
Will be speaking at ConFig 24" on June 26th - 27th in San Francisco.
10/ [bonus] For those who have early access to our browser, try pressing the option key while choosing a color 😉
For people who want access, join our waitlist ! We're ramping up invites —
One year later, to the day, and we’ve just finished the
@browsercompany
unboxing experience 😇
This means invites are going to start flying off the shelves !!
Our team loves to learn and iterate so bear with us, but *next week* we will start ramping out those invites
🏄🏄♂️🏄♀️
12/ Sources+Shoutouts:
• Valuation of Pantone:
• Figure by Reason (shout-out to
@codeblue87
for sharing this app with me):
•
@kristinatastic
for early theme explorations!
• Coworkers at
@browsercompany
for feedback💙
@aarondignan
we have an inbound product change that the old banner's layout didn't support. We move quick and wanted to decouple the design changes from the engineering changes, so I pushed for us to ship this ahead of time.
and just to name it… if you are looking for a new gig and are interested in joining some wonderful folks rethinking what a browser is, we have a number of open roles —
@aarondignan
we went through a gazillion revs on this, some that were more 'designed' but they all felt like they were drawing too much attention to themselves, hence the plainer style we shipped. really, no one should have to look at this banner, and that’s what we're working towards now…
because handling time zones correctly in software isn’t difficult enough, in Club Penguin we had our own in-game timezone: PST (penguin standard time). PST tracked Pacific Standard Time and we’d calculate the offset for players who joined from different areas of the world.
7.5/ (I’m not saying fewer labels promote discovery. You have to make sure you’re not removing UI to the point of confusion or harming accessibility. Also! take a look at `accessibilityRepresentation` in SwiftUI for an approach to make custom controls accessible.)
last night I watched someone attempt to generate an image of a clown eating at
@kfc
with midjourney. the person really wanted the image to be 'child friendly' — a happy, light, joyous image of a clown. this is what midjourney was generating 😂
@aarondignan
I realize not letting people dismiss the banner could be read as hostile to members, but that was never the intent! we're a small team and focus our efforts in places we believe will be best for the folks using Arc. putting the work into auto updating is what we prioritized.