BYOL Advanced Figma Certificate | 2024

WPB Indie is a mobile event app I created to earn my BYOL Advanced Figma certificate. This course enabled me to dive deep into the power of Figma, sharpening my skills in animation, interactions, auto-layouts, and other advanced tools. Initially, we started with a mobile design, but to take it a step further to earn the distinction certificate, I analyzed if a desktop version was necessary and how to deliver it.

02 | Introduction

At first, I approached this project with a "just make it bigger" mindset. Extensive research into the key differences between platforms revealed the importance of understanding the advantages and limitations of each. I quickly realized designing for desktop is not just about scaling up. It’s a different mindset for the user and therefore the designer. Mobile excels in convenience, offering quick, focused interactions without complex input, while desktop thrives on visibility and handling complex, simultaneous workflows. While mobile still dominates, recent trends have shown a strong push toward cross-platform designs. Not just to increase reach and improve accessibility, but to create a well-rounded and efficient experience. Users expect consistency across both, but a tailored experience on each platform can really make a product shine.

03 | Research

Convenience v. Functionality

There is a lot of content out there about which device to start with - mobile first, progressive reduction, etc. Having a firm grasp on what makes the devices different and aligning with the user will make this choice more clear. At a high level - mobile's selling point is convenience. Its optimized for straightforward tasks and delivering content without requiring sophisticated input. Desktop's is functionality - able to deliver a lot of information with visibility and processing. A closer examination of key differences to each is below:

Navigation

The variations in screen size dictates how detailed of a structure a designer can implement without overwhelming the user. Desktops offer larger screens and faster processing allows for complex tasks and workflows. Mobile design excels in being concise and straight forward.

Gestures & Input

Users interact differently across devices and therefore input play a key role in how they experience the product on various devices. With a desktop, people expect to enter data and user a combination of input modes like a mouse and keyboard. For mobile, touch-based gestures aid in navigation offering more options and control.

Context & Intent

Understanding the environment the user is interacting with a product in will tell us about their general behavior. Users expect to interact with desktops for longer, more focused sessions. Mobile is best for quick and on-the-go actions

Intent Matters

To be honest, after analyzing differences in mobile and desktop, I wasn't convinced that creating a desktop version of WPB Indie at this stage was suitable. A responsive website would cater to those on any device while allocating resources to future strategic app developments. The goal remained to deliver a unique, yet cohesive experience, so I tweaked the navigation menu and focused on which task would be a priority for those using a desktop.

Top Navigation

Multi-level menus ensures users can drill down to their destination without navigating through multiple screens

Filter Capabilities

Improved filter function allows desktop users to apply filters with more specificity while still being able to browse the content of the home page.

05 | Reflection

A good product can be extremely impactful on one platform, and doesn't necessarily need a native app on all fronts if it does not suit the users wants and needs. So focusing on why desktop design is a priority helps ensure resources are delegated to the right tasks. This project taught me the importance of user research, setting task priorities, and ensuring the user remains at the forefront of every design decision. In the end, it's about creating a fluid, consistent experience that caters to the strength of the targeted platform, ultimately enriching the user's journey.

A Deep Dive into Mobile v Desktop Design