Responsive Website Designs
with Mobile-First Priorities

 
 

Challenges

In 2020, 61% of users are viewing websites on a mobile device, which has increased from 57% in 2019. Creating a mobile-friendly website has become the priority when planning a site map, user journey, and strategic conversion points. With this in mind, all of the websites that I design have a mobile-first priority, which means that the mobile version of the website is designed FIRST rather than being retrofitted after the desktop version is designed.

Prototyping

By using Adobe XD, I am able to prototype many user experiences before the website goes to development. Testing during this phase is usually pretty heavy to ensure that the UX and UI work together before the rest of the work is done.

One-Handed Usability

Screen Shot 2021-05-13 at 8.25.11 PM.png

In this example, the menu was placed at the bottom of the screen for thumb reach. The menu also opens to just above the halfway mark on the screen so that the user is able to navigate through the menu with one hand.

Animation Indicators & Side Navigations

KAH-PillarPage.gif

Using animate arrows to show that there is more content below the fold as well as an animated button to show that the area is clickable.

Side navigation design

  • Shows the pillar page content in “chapters”

  • Allows user to get an overview of the content and navigate to any chosen chapter

  • Highlights where the user is at on the page

Descriptive Text in Menus

Mobile-Menu-3.png

The purpose of adding descriptive text in a mobile menu is so that new users can know what they are clicking before they actually click it. It is a preview of what is to come. This not only produces a better UX, but decreases bounce rates on pages because the user intended to visit that page instead of randomly clicking around until they find what they need.

Accommodating Heavy Text

horizon-accordion.gif

The purpose of this accordion was to add all the frequently asked questions regarding COVID-19 for a school. The accordions help keep the page short so that the user isn’t endlessly scrolling on their phones and the “Jump to Section” side navigation helps them find the information they need.