Chatree Campiranon
A live career journal
To Start With
This page represents some of my design works and my thoughts about them. My reflection in design changes over years as I progress. The more I work on products, the less I subconsciously design for myself.
At the end of the day, designers, product people, engineers — makers, we all want to make people’s lives better. I hope making meaningful products and sharing my experiences will be a small contribution that enables more makers to create wonderful things to the world.
2014 — Present
I joined Google Design in September 2014. I’m currently a Staff UX designer and manager on the Google Growth & Analytics team. Our team work with large datasets and I apply design and storytelling to build data products widely used within Google to help people make better decisions.
My role includes:
- Leading all aspects of UX work from concept to launches
- Focus on data products critical for decision-making at Google
- Evangelize data storytelling design principles within Google
- Participate in UX mentorship & hiring committee
This part of my work can’t be shared externally.
______________
I was also at the Identity team leading cross-Google initiatives to ensure cohesive experience for users to understand and manage how their data and accounts are used throughout Google products.
Inkling
2010–2014
Inkling’s mission is to make the world smarter place via knowledge that matters. When I joined in 2010, we started our journey by making a textbook app on the yet-to-be-released iPad.
Over time, Inkling expands its content beyond education. We added trade content such as photography and medical references. Interactive content was created using our internal web-based collaboration tool, which later became Inkling Habitat. Inkling has been recognized as one of the most innovative companies in 2014.
Leading the Product Design Team
I managed the product design team at Inkling while lead design projects such as Inkling for iOS half of the time. We had a strong team with a good mix of skills (ux problem solving, ui design, visual design, coding, user research, analytics).
My responsibility included working with designers, PMs, engineers, and the leadership team on product vision, design directions, and research. Half of the time, I do hands-on design for iOS and other projects, ranging from creating wireframes to checking in assets for the engineers.
Inkling for iPad
I spent most of my design time at Inkling on our iPad app, which is our first product that was launched in 2010.
It was exciting designing for touch device for the first time. Back then, there weren’t many examples on iPad design. We looked at Apple’s Human Interface Guideline, but also knew that the iPad is not a giant iPhone. Once I first had the iPad in my hands, I realized—This is not a mobile device, it’s a couch device—you sit back and use it.
Navigation was crucial to redefining reading experience on a tablet device. We created the Outline View to replace the Table of Contents. This view renders the outline of the book reading from content metadata, then displays content structures, including figures and enhancements, making it much efficient for readers to find their way around the book.
Content interaction was also the main focus, especially during my first year at Inkling. We designed a set of basic interaction pattern that allows our content team to enhance the learning experience for existing book content.
There are much more to the Inkling for iPad. Check it out on the App Store!
Inkling for iPhone
Almost two years after launching our iPad app, we started the iPhone project. It wasn’t a good idea to introduce an innovative learning experience when you can’t read anything on a tiny screen. Fortunately, the industry came with an answer — the Retina Display. Once again, interface design is enabled by the hardware. I hope they never stop innovating.
The design goal for the iPhone version for was to provide the best interactive reading experience on a small screen. This means the “quiet mode” that takes away the chrome while reading, and one-column outline view (comparing to two on the iPad).
We also started to reflow all content to fit the phone screen. This was the foundation for us to take on Android. The difference between the iPhone and iPad also allows us to provide experience that make sense for users, for example, allowing phone call directly from travel guide content.
Case Study — Affordance Difference between iPad and iPhone
As I mentioned earlier, the iPad is not a giant iPhone. People asked me which one is harder to design. I’d say, it is slightly more satisfying if I could find an elegant solution on the phone screen, since it’s so small comparing to the tablet.
Guided tour interaction on the iPad was designed in 2010. It is an interaction pattern to represent an image or diagram with numbered steps to walk the learners through content one step at a time. The design on the iPad allows users to either 1) tap on the poptips on the image, or 2) tap on the number at the bottom, or 3) tap left and right arrow to navigate.
Two years later, when I designed the iPhone, I know guided tour gets a lot of use and is one of the most powerful interaction pattern we have in the content. There was obviously no room to add numbered UIs at the bottom of the screen. We worked on a few solutions and landed on the “ribbon” UI that puts all of the guided tour content together in one strip. Users can tap on numbers on the screen, but they don’t have to, since they’ll most likely miss the target. The way they navigate the guided tour in the phone UI is to use their thumb to swipe across the screen to move from one step to the next. We designed the phone app so that the users don’t need more than one finger to run it.
Other Projects
The following are projects at Inkling that I have been actively involved with, and helped designers shape the product vision and design.
Inkling Habitat
As of 2014, Inkling has shifted its focus entirely to be the cloud publishing platform for enterprise. Habitat started out as a web-based collaborative authoring tool and has become the center of this new focus. It is very challenging to define such a large platform from the ground up and there are many moving pieces, such as importing the content, collaboration, authoring, and getting the structured content out of Habitat. Different customers have different workflows. We learned to approach product decision and design in a new way comparing to when we were focusing on consumer product.
Inkling for Android
This is the 4th Inkling reader app, after the iPad, iPhone, and web. I worked with a phenomenal designer who came from visual design and branding background. We learned a lot from Inkling for iOS so the design process began with studying the Android design guideline, making sure our content experience remains Inkling and navigational paradigm is true to Android (providing both Back and Up is genius, yet confusing). We also ran beta tester program to get constant feedback from real people while we develop the app. View Inkling for Android on the Play Store.
Content Discovery Platform
Content discovery platform allows Google to index our content so Internet users can find beautiful, trustworthy Inkling content via search. Try salted caramel ice cream or Berlin wall.
After we created Inkling reader for the web, there was a project around creating a content preview for people who haven’t bought the content. During the design process, we dropped the name content preview and decided to call it Open Inkling, which is an internal name for what became Content Discovery Platform. It was eye-opening how project naming can frame design directions. We wanted people to feel welcomed when they land on the content, not getting a preview and hit a sign up wall.
Inkling for Web
Inkling for web is the 2nd reader application after our iPad app. Coming from native iOS design, the most difficult part on creating Inkling experience on the web was browser performance for content interaction. You can’t pinch zoom or swipe using cursor, and gesture navigation won’t work. We pushed web technology to the limit and translate gesture-based interaction to keyboard shortcuts. Considering larger screen and internet connectivity, we created the right sidebar to contain deeper knowledges extracted from metadata on the page.
Inkling Store
Inkling books are sold in our web and iOS stores. The store was actually my first design task at Inkling. It was a challenge when we did not have plenty of books. But over time, the store became alive with various categories of content. Another interesting point about the store is we need to shift our design mindset a bit and focus on the goal of the store—to perform, store needs to convert. We work with the marketing team and ran growth experiments, such as A/B testing, on both web and iOS stores. Go shop now, there’s a free chapter in every book!
Side Projects
Notable design and creative projects that push ideas forward.
Evolution of Search
At Inkling, once a year, we have our 2-day long hackathon called Extra Credit. All of us would come together, cross-functional, and work on ideas we’re passionate about. I always choose to do product features, from the iPhone extension that controls content navigation on Inkling for iPad (hard to explain, it’s wacky as it sounds) to a wikipedia add-on to the Inkling app that gives text and image definition on any word in the book.
In 2013, the third time we do extra credit, we just had the new product out called Content-Discovery Platform; and we started to think how Inkling can make knowledge available to the world via Google. I decided to work on an inspirational video, which includes concepting, directing, shooting, and editing, to portray what it would be like if people rely on Inkling, making us part of their lives. I wanted us to look at our product beyond interactive books on digital devices.
Bubble Stacks — Mozilla Home Tab Design Challenge
Design Challenge, 2009
In 2009, my friend and I participated in a design challenge by Mozilla Labs. The challenge was a great, open-ended, one. The design team at Mozilla notices a pattern where Firefox users would open a new tab when they want to get on to their next task (when they can just change the URL of the current tab). So challenge was how we can design this default new tab view (or Home Tab) experience to be useful. Our solution, BubbleStacks, was around grouping user’s history based on intentions. E.g., trip planning or finding a pasta recipe.
Our project was awarded Best in Class — Innovation and we were invited to write a guest blog post on Mozilla Labs blog. We shared our remote collaboration experience in the post: Collaboration across the Miles.
Photography
I used to do a lot more photography with my DSLR before iPhone took over as my de-facto camera. I found it interesting that eventually my DSLR lenses were reduced to just one 35mm 1.4. When you have one prime lens, you are freed from choices and left with you capturing the moment and do the best composition you can. It helped me with my favorite subject — street photography.
Pre-Design Career
User Research
Right after getting my master’s degree, I worked as a usability specialist at Pearson Education for about two years before moving on to interaction design. My main responsibility was to set up and run our usability lab for the UX team. Looking back now, I treasure that experience of observing and talking to countless participants coming in to test the products. Empathy is a great foundation for designers to have. These days, I push for all my designers to be able to run research, or even talk to random people in a coffee shop (just don’t forget to buy them coffee!).
Human-Computer Interaction
I graduated from Indiana University-Purdue University at Indianapolis as their first graduate in Human-Computer Interaction.
Back in 2003, HCI was interesting. It was the bridge period between the first wave of Internet applications and “Web 2.0”. There was no Facebook, no Google applications, and MySpace was still relavant. We got in to interface design while studying classic books written in the 80s and 90s. We even put a mirror by the monitor during usability study so the camcorder can capture the screen and facial expression at the same time. Today, we’ll just use tools like Silverback.
My master’s thesis was about email management. I did formative and summative research on the prototype and compared it with Gmail and Yahoo! Mail, also coded the front and back-end of the prototype in PHP (it was still a thing back then!). View my master’s thesis here.
Computer Engineering
Stepping back even further, I studied computer engineering for my undergrad back in Thailand. The most important quality I got from knowing how code works is the ability to think systematically. I would recommend coding for any designer just for that. There’s no one language to learn. By the time you master a language, it’ll probably be obsolete. But systematic thinking will stay with you, helping you communicate with engineers, or solve problems thoroughly. And the ability to prototype is too powerful not to have.
Onward
I’d love to meet up with people and share experience making products, or anything, actually. I also love photography, it’s a good outlet to connect us back to the real, tangible world. If you’d like to get in touch, connect with me via @chatreez or LinkedIn.
