Mobile-First Design Across Platforms

Overview

Over the last several years, I’ve led multiple projects where mobile-first design was the guiding principle — from enterprise SaaS to eCommerce to branding websites. With mobile traffic often accounting for 60–70% of user sessions, designing for mobile first ensures the core user experience is intuitive, accessible, and effective, no matter the device.

Roles: UX/UI Designer, Creative Director, Web Producer
Projects Featured: Microsoft Education (Enterprise SaaS), Daack Pack (Branding & WordPress), Berry Companies (Hospitality Web Platforms)
Tools: Figma, Adobe XD, WordPress, Webflow, AEM, Copilot, ChatGPT

Moon Stone Beauty Studio Mobile Mockup
Mobile Mock of Horary for Adventure
Fruition Integrated Mental Health Mobile mock up

The Challenge

Across projects, a recurring set of issues surfaced:

  • Desktop-first legacy layouts breaking down on mobile.

  • Content overload on small screens, causing user frustration.

  • Inconsistent navigation making it difficult to reach key tasks quickly.

  • Accessibility gaps that excluded users with disabilities or assistive technologies.

The goal was to deliver streamlined, responsive, and accessible designs that put the mobile experience first, while scaling seamlessly to desktop.

Daack Pack
Berry Companies Website

My Process

1. Research & Insights

  • Conducted analytics reviews to understand device usage and mobile drop-off points.

  • Ran heuristic audits to identify accessibility barriers and workflow inefficiencies.

  • Interviewed stakeholders and users to prioritize must-have mobile tasks.

2. Mobile-First Wireframing

  • Designed mobile-first wireframes in Figma, focusing on clarity of hierarchy and key CTAs.

  • Used a content-prioritization approach: what’s essential on a 5-inch screen stays, everything else scales up.

  • Built touch-friendly patterns (bigger tap zones, sticky CTAs, simplified menus).

3. Prototyping & Testing

  • Created interactive prototypes for both mobile and desktop breakpoints.

  • Conducted usability testing with educators, small business owners, and general end-users depending on the project.

  • Iterated on flows, reducing task completion steps by up to 30% in some cases.

4. Systems & Accessibility

  • Embedded WCAG standards (contrast ratios, screen reader support, keyboard nav).

  • Documented design system updates for scalability across platforms and future projects.

  • Used AI tools (ChatGPT, Copilot) to accelerate content iteration, create responsive layout options, and produce onboarding assets.

Results

  • 25% engagement lift on Microsoft Education after mobile-first redesign.

  • 40% increase in sales for Brigger Furniture’s eCommerce platform after mobile-friendly flow overhaul.

  • 20% engagement growth for Berry Companies’ hospitality brands after responsive redesign.

  • Faster iteration cycles across projects by embedding AI tools into UX workflow.

Graph of percentail Increase

Key Takeaways

  • Designing mobile-first clarifies priorities — if it works on mobile, it will scale gracefully.

  • Accessibility-first and mobile-first are inseparable — improving one benefits the other.

  • AI accelerates iteration — freeing more time for testing and collaboration.

  • The best mobile-first designs are invisible: they let users complete complex tasks without friction.