Contribution: Product Design, User Research, Prototyping, Animation, Storyboarding, Video Editing
Role: Product Designer, Animator, Video Editor
Duration: 7 Weeks | May-June 2024
Tools: Figma, Miro, Google Surverys and Sheets, After Effects, Premiere Pro, Photoshop, Audacity
Role
Timeline
Skills
Team
Product Designer Animator
2024
Design Storytelling
Solo
OVERVIEW
A 6 minute browser redesign that received 35,000 views in 2 weeks
The Browser Company created Arc, a new web browser to make accessing the internet a more intuitive and productive experience. Currently, they are focusing on customer acquisition to compete with browsers like Safari and Chrome.
This independent project proposes changes I would make to improve Arc's navigation, visual language, and interaction design. I summarized these findings in a 6 minute YouTube video that caught the attention of their users and The Browser Company.
Why did I put 80 hours of work into a spec project?
In Spring of 2024, I found Arc through their company's YouTube content and downloaded it, hoping to find a easy to use app to improve my online searching experience. However, as a long time Safari user, the vertical tabs and reliance on short cut keys made onboarding quite difficult.
As I looked for my first full time job, I wanted to improve these features as a side project that could hopefully capture the attention of The Browser Company serving as both a case study and application attempt. With my previous experience with Asana, I realized I could leverage viral content marketing to showcase my skills as a designer and storyteller.
With a niche but loyal user base, I started drafting my problem statement and user research guide.
GOAL
How might we make Arc's onboarding easier for new users?
USER RESEARCH
From my 7 user interviews and surveys, I found that users struggled with navigation, productivity and performance issues
My initial goal of solving onboarding changed as I started speaking to users. As most of these were longer term users and students, my interviewees brought up issues such as not knowing which tab they were previously on, inconsistency with interactions, and performance issues.
Users rated each feature of Arc with 10 meeting all of their needs effectively
While these research anecdotes strayed away from my initial goal, it showed me that improving navigation pain points could also address the difficult onboarding experience I faced. With most of my interviewees being college students, I tailored my scope to improving Arc for that demographic.
DESIGN - NAVIGATION
Problem 1: Users are unable to see which tab they were previously looking at, increasing search time and opening tabs excessively
Arc utilizes a sidebar for organizing tabs, with pinned and bookmarks stored at the top. However, Arc only highlights the current tab you are on, making it difficult when searching for a previously open tab within bookmarks or pinned tabs
Solution: Adding visual indicators to signify open tabs
Taking inspiration from Apple and Windows open application indicator, I iterated a few different styles of icons that would show which tabs are open. Out of the four different styles and placements I tried, I chose the Dots, Lines, and Outlines based on use case to fit within Arc's minimalistic visual language
With Arc releasing on MacOS first and thus having a longer term user base of Apple users, I chose to use a similar design pattern to Apple for the visual indicator of open tabs that fit within Arc's minimalist style. Adding visual indicators would speed up student's workflow by decreasing the amount of searching for their previous tab and improve Arc’s performance by reducing excessive tab opening which is especially important as students as they often own older computers.
DESIGN - CONSISTENCY
Problem 2: Split Screen Tabs aren't as delightful to close
Split screens were one of Arc users most utilized feature as it allows them to put tabs side by side to create a more dynamic work space. Dragging a tab to the main browser or sidebar creates the split.
However, closing them lacked the gestural functionality that made them so seamless to create.
Solution 1: Dragging from the main browser screen
Solution 2: Separating the tab through the side bar
To maintain consistency with how they were opened, I proposed two similar interactions be utilized to close them. This would allow students who are taking notes on a lecture for example the flexibility to maintain both tabs while they shift to a different task in their work.
DESIGN - LIBRARY ACCESS
Problem 3: The library requires too many clicks to access quickly
The library provides customization options and quick access to downloads to improve workflow.
However, the library takes about 2-4 clicks to reach a specific feature slowing down workflow despite its attempt to enhance drag and drop features. Through analyzing the information architecture of Arc, I focused on grouping similar features together to decrease their required amount of clicks up to 50%
Solution:The Library now added to the sidebar and main browser
With a new YouTube channel, I needed a plan for organic growth
I researched similar content creators within the design space and adjusted my title and tags to target their audience and rank in Arc users SEO within YouTube's browse features. With my previous experience in freelance content marketing, I focused on eye catching motion graphics, fast paced editing and an efficient script to improve audience retention: a key indicator for YouTube's browse feature.
Iterating my thumbnail design helped convert 250,000+ impressions into a 6.9% Click-Through-Rate with 43% viewer retention
The design iteration before choosing the final thumbnail
Selected feedback from 100+ user comments
After seeing my video The Browser Company were kind enough to send me merch.
REFLECTION
Giving myself the permission to create
This 7 week spec project took an immense amount of conviction to fully ship and I immensely appreciate the friends that helped me improve my story within the video creation process. If I had more time, I would love to do some user testing to see how effective my solutions would be at a broader scale as some comments mentioned these changes conflicted with how they used Arc. Moreover, the complexity of this work increased immensely from working on it solo and I think having a team to consistently collaborate with would’ve made this process simpler and quicker.
.svg)
.svg)
