From Mobile to Desktop

Biscuit for Google Chrome (2014)


The desktop version of Biscuit was the most requested update by the users. Our eventual goal was to cover all different types of devices, but we needed to focus on each step because we were a small team. For the first application for desktop, we decided to make a Chrome Extension. We wanted to make the desktop version of Biscuit as a seamless dictionary that can be used for reading, so we made the browser extension for this step.

From Mobile to Desktop

Biscuit is truly a mobile-first product. The main function and the interface of the app were designed only for mobile devices. Hence, converting Biscuit from mobile app to Chrome extension wasn't an easy process. It required me to think again about the interface from the beginning, using the same information from the mobile app.

The desktop environment has more states than touch interfaces, such as hover and focus states. These small differences are crucial for designers to consider, because the level of understanding and the proper use of those states could decide the quality of the application. In addition, using the hover states wisely could make user's experience on the desktop environment much better.

The Product Only Works on Chrome

The process of developing a Chrome extension is very similar to developing a web app. One benefit of designing only for Chrome is that I don't have to consider other browsers' support, which means I can use the latest technologies that Chrome supports without worrying about IE. I designed the layout of the Biscuit Chrome extension using Flexbox, which is a relatively new feature of CSS that some browsers do not fully support yet. Also, because the platform is inherently based on the Internet connection, I didn't have to worry much about off-line use cases.

Same Content on Different Mediums

I had two different goals when I was designing Biscuit for Chrome. One was to design the Chrome extension be easily understood by users who have used a mobile app before, and the other one was to design the interface to be fully optimised to a desktop environment.

Like someone said, medium shapes the message. Even if the message is the same, it could be accepted in different ways, depending on the form of the medium. I think that the analogy could also be applied to digital product design. Interface designers design a medium, so it is crucial for them to understand the different types of devices, OSs, and platforms.

The Power of Working Prototype

After I had done the brief sketching, I skipped the Photoshop part and directly started designing with HTML and CSS on the browser. Photoshop is a great tool for designing pixel-based static images, but it doesn't work well when designing an interactive application. In this way, I don't have to explain to developers how the interface will work or even make another guideline to describe the design. What I was designing is what user will interact, and it is much easier for developers to understand the interface because they can actually use my code.

Working prototypes can make sure all the team members are on the same page in a relatively short time. I think It's the best way of communication in the digital developing environment.