A Portfolio and blog for Mustafa Kurtuldu

UX

Horizon Design System
Horizon Design System

Twitter's Horizon Design System

Designing at scale

Twitter’s design system, Horizon, was relaunched to focus on universally accessible UI, user-driven content and dynamic visuals.

As Product Design lead for Horizon, I led on cross-platform consistency, defining success, lobbying leadership, designing processes and mentoring our Senior & Staff Designers. My research showed that Horizon saved ~70% of a designer’s time, most using the library daily.

Drafts
Drafts

Twitter's Drafts

Making drafting accessible and syncable

The existing drafting system within Twitter needed to be fixed, as it was undiscoverable and didn’t sync between devices.

I led a redesign and research across multiple engineering teams, running multiple designs that explored ~20 designs. I conducted numerous usability studies with users to determine the best approach to launching our proposed vision on our platforms.

Dash Menu
Dash Menu

Twitter's Navigational System

Realigning core navigation to make actions intentional

Twitter’s navigational system was inflexible, and if we were to launch, all of our proposed features would have reduced the space for actual content.

As Design Lead, I was responsible for launching a new scalable navigational system, the Dash Menu, across all our platforms that enabled feature experimentation without disrupting the existing menu or content.

PWA install ui
PWA install ui

Web Apps & Google Chrome

Enhancing web app experiences

Progressive Web Apps are super-powered websites that users can install on a phone or computer. I led an initiative with the Chrome engineering team to improve discoverability, education and usage.

My work led to a greater than 100% increase in PWA installation and engagement. You can read more on the Chrome Blog.

Phone-as-a-Security-Key
Phone-as-a-Security-Key

Secure Sign-in & Google Chrome

Ending users need for passwords on the web

Two-Factor authentication, Phone as a Security Key & WebOTP empowers users by allowing them to sign in with their phones securely. Millions of users sign in with their phones as an authentication method every day; sadly, many logins fail.

I was the UX lead on our Web Platform, and my team redesigned several sign-in flows and increased successful logins by a third.

Google.dev learning website
Google.dev learning website

Google.dev

Redesigning developer learning for Google

As UX lead Google Developers documentation sites, my team aimed to redesign learning for our developer audience.

Google.dev launched at Google I/O 2019 to an audience of ~7,000 attendees. It achieved over 3,000 active users by the end of our first week with 48k pageviews.

Squoosh.app
Squoosh.app

Squoosh.app

Image compression web app

A new web tool, Squoosh, downsizes, compresses, and reformats images.

I was the UX lead and designed the app’s user journey, flow and visuals. Launched at Chrome Dev Summit 2018, the app received over ~400k visitors, which resulted in over ~230k compressed images in its first week. See app here.

MDL
MDL

Material Design Lite (MDL)

Google's design system on the web

Material Design Lite was Google’s Core Material Design Web implementation framework that allowed designers and developers to add a Material look and feel to their sites.

As UX lead, I designed templates and visual assets. My advocacy work saw increased MDL’s usage to over three millon URLs. See more here.

Chrome Custom Tab
Chrome Custom Tab

Chrome Custom Tab download UI

Bring delight to Android experiences

Native Android apps use Chrome Custom Tabs to link to web content. Usually, this means opening a webpage in a ‘Chromeless’ tab. However, when users clicked on a file, a blank page appeared.

I led a redesign of the download flow, working with our illustrators & animators to create a delightful experience for Android users.

UX Minimal
UX Minimal

Bu bölümde Google’da UX Designer olarak çalışan Mustafa ile tasarım süreçlerinden, animasyonların insan algısına olan etkisi ve tasarımcılar için tavsiyelere kadar uzanan birçok farklı konuyu ele aldığımız, keyifli bir sohbet gerçekleştirdik, iyi dinlemeler.

Link to Spotify

Speed Matters

Whether you’re a web developer, web designer or web marketer, you probably care about the end user of your product more than anything else. If you don’t, well maybe we need another eBook for that!

Link to book

Basics of UX

This article introduces a workflow that can help teams, products, startups and companies create a robust and meaningful process for developing a better user experience for their customers. You could use different parts of the process separately but they ideally work best as a series of steps.

Link: article

Projects App launched

Digital Science, my place of work, just launched Projects – the only desktop software designed specifically for scientific researchers that enables them to organise their research outputs in a safe, simple and structured way.

For the first time, dedicated, scientifically-relevant features have been brought together in one product, helping academic researchers keep track, save time and get ahead with their research. I got a chance to work with the …

Michael Jackson Vs HTML5

Our industry is over 20 years old now. Mosiac, the first web browser was release in 1993 followed by Opera in ’94 and Internet Explorer in ’95. Mostly we were reduced to viewing text files and eXcel like tables for our web pages. Linking to separate pages/documents was like a revolution in the HTML world that held engieneers in awe of the infinite possibilities.

Then the browser war ensued followed by the first bubble bursting/web crash. Many …

What I was trying to figure out is how can you check if a table (or a div) that has a parent div with CSS overflow:auto applied to it and has started to horizontally scroll with JavaScript/jQuery.

Seems that the scroll() API in jQuery only checks if the event has been triggered and not if it has a visible scroll.

Then I found element.scrollWidth. All I had to do is check if the scroll width is greater than the container width1 and BOOM. Pretty …