Expert, Desktop Version
Leveraged from mobile
.png)
Project Overview
​
In the desktop version of Expert, I reimagined the mobile design to fit a larger screen, leveraging the additional space to enhance navigation and showcase more features. This process involved addressing unique desktop-specific challenges, such as optimizing layouts, expanding content visibility, and ensuring consistency with the app’s branding.
(All research for Expert can be found on the Expert Mobile page)
My Role:​​​
-
Solo Concept development and strategy
-
Solo Researcher
-
Solo Designer
Time Frame​​​:
Tools:​
-
2 Months
-
Figma
-
Lyssna
-
Optimal
-
Chat GPT
-
ShutterStock
1.)
.png)
Layout Template
I used a Figma template from a design kit as a foundation and built upon its framework to create the homepage, seamlessly incorporating my own Expert content.
Figma Design Kit Template
My Layout
%20(1).png)
2.)
Message Feature
One feature I wanted to differentiate from the mobile version was the messaging functionality. On mobile, the messaging feature is located in the bottom navigation bar and directs users to a separate message page. However, on the desktop version, I utilized the additional screen space to redesign the messaging feature as a dropdown accessible from any page, eliminating the need for a dedicated messaging page.
Message button circled
Message feature after you click on Expert
3.)
.png)
Navigation Bar
For the desktop version, I designed the navigation bar to include the same items as the mobile version. Like on mobile, the nav bar remains fixed on the screen throughout the user’s entire time on the site. I opted to use Expert’s primary navy color for the top navigation bar, as it stands out more effectively than the off-white color used on mobile. This decision also ensures the nav bar contrasts with the typically light-colored search bars found in desktop browsers like Chrome and Safari. Additionally, I incorporated the light-colored version of the logo, as it pops against the dark navy background, creating a stronger visual impact compared to the original navy logo.
Desktop:
Mobile:
4.)
.png)
Spacing
With the extra screen real estate on desktop, I was able to space out each item more effectively compared to the mobile version. For instance, on pages like the home screen where users search for Experts by category, the mobile design only allowed for one row at a time with minimal spacing between each category image. On desktop, I was able to create a more open and visually balanced layout, enhancing usability and the overall browsing experience.
Desktop:
Horizontal Spacing: 85px
Vertical Spacing: 53 px
Mobile:
.png)
Vertical Spacing: 13 px
5.)
.png)
Typography
With the additional screen real estate on desktop, I was able to implement larger typography for a more impactful design. On mobile, the largest headline size was 36 pixels, while on desktop, headlines reach up to 60 pixels. Similarly, the smallest body copy on desktop is 18 pixels, compared to 12 pixels on mobile, ensuring adaptable readability and a more proportionate layout across devices.
Desktop:
Headline 1: 60px (bold)
Headline 2: 60px
Headline 3: 32px
Headline 4: 32 (bold)
Headline 5: 30px
Body Copy 1: 24px
Body copy 2: 18 px
Mobile:
Headline 1: 36px
Headline 2: 24px
Headline 22px
Headline 22px (bold)
Body Copy 18px
Body Copy: 16px
Body Copy: 14px
Body Copy 14px (bold)
Body Copy 12px
6.)
Refining My Design
Style Guide
Similarly to mobile, look and feel: conveys a professional, approachable, and modern vibe. Design and colors: Clean, minimalist design with a navy-dominated color palette exudes trust and reliability, while bright secondary colors and rounded icons add warmth and friendliness. 
Images: The use of diverse, human-centered imagery emphasizes inclusivity,
Typography: clean typography ensures readability and accessibility. 
Overall: I prioritized organization, and a user-friendly, balance of professionalism with approachability.
Buttons
Colors
UI Elements
Primary (305x 44px)
Primary
Drop Shadow settings:​
Secondary
-
X: 0
-
Y: 0
-
Blur: 16
-
Spread: 0
-
Color 040035
-
Opacity: 16%
Chat feature
Logos:
Gradient:
Icons
Images
Icons from Expert Profile
Icons from Nav
Icons from Schedule/leave review
Login
.png)
Summary
7.)
Designing the Expert app for mobile was a rewarding process, but transitioning it to a desktop format presented unique challenges and learning opportunities. This shift required me to think beyond small screens and embrace a layout optimized for larger displays while maintaining the app's functionality, accessibility, and visual appeal.
​​​
Key Challenges & Solutions:
​
-
Adapting Layouts: Mobile’s vertical scrolling had to be reimagined for desktop’s horizontal space. A responsive grid system allowed for better use of whitespace and content placement.
-
Enhanced Navigation: I transitioned from mobile’s condensed menus to a desktop-friendly top navigation bar with dropdowns for smoother access.
-
Visual Consistency: Ensuring cohesive branding across devices involved standardizing typography, colors, and layouts. High-quality, AI-generated images enhanced professionalism.
-
Interactive Features: Desktop design introduced new a functionality of message drop down, creating a more engaging user experience.
​
Key Takeaways:
​
-
Designing for device-specific contexts is crucial. Mobile users value simplicity, while desktop users expect deeper interactions.
-
Feedback highlighted gaps and guided improvements for both platforms.
-
Consistency in visuals and navigation significantly enhances user trust and brand perception.
Transitioning the Expert app to desktop elevated its usability and professionalism. By embracing the differences between platforms, I created a cohesive, polished experience that meets user needs across devices.