UI August 2024
This project was completed to earn my BYOL Advanced Figma Distinction Certificate. The course allowed 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, I translated it to a desktop interface.
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.
Understand the differences in designing for desktop versus mobile.
Evaluate which mobile aspects to maintain and how to transition them.
Design a consistent and seamless experience for users of both platforms.
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:
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.
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.
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
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.
Multi-level menus ensures users can drill down to their destination without navigating through multiple screens
Improved filter function allows desktop users to apply filters with more specificity while still being able to browse the content of the home page.
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.