Forever Homes Shelter Mobile App Design

Figma Link

https://www.figma.com/file/OYrq6PdPiTm7V1oJVSTVTg/Me-Responsive-Mobile-Layout---Design-Challenge?type=design&mode=design&t=R78TrGWMdr1WT6Cl-1

Sticky Header

The header elements are sticky at the top of the page to align with user expectations and to help users navigate the site.

Hamburger Menu

To decrease the cognitive load for users I decided to integrate the page links in the header and footer together in a hamburger menu. This is so the footer is not a squashed down version of the mobile footer. The drop-down menu in the hamburger menu for both the “Adopt a Pet” and “Get Involved” section and determined hierarchy of links was determined as having all of these as separate sections in the hamburger menu would extend the hamburger menu rendering it unable to fit on one screen - thus potentially creating a dark pattern and hiding these links from users inadvertently. This makes the hamburger menu look more clean and easier to navigate. The bold font was chosen for the primary hamburger menu headings as it aligns with the rest of the landing page and the semi-bold font was chosen for the secondary drop-down hamburger menu headings to decrease cognitive load and show that these links are different from the primary ones. The social links and regular information found in a mobile website footer is present to adhere to user expectations.

CTA Buttons and Colouring

The main CTA buttons on the page of “donate” at the top and “subscribe” at the bottom are pink. This shade of pink is not used often in the design and is used to alert attention from the user due to it being uncommon. The four “How you can make a difference” buttons are all different colours to align to the brand image of being friendly (through colour choices) and to add variety to these sections, differentiating them rather than making them all strictly uniformed. Having them different colours attracts attention to these buttons from users.

Carousel Cards

The carousel cards allow users to interact with the information and find out more. This will engage users and prompt them to look more closely at the information in front of them.

Consistency Between Variations

For consistency, the colours, images, text and content of the mobile version are predominantly unaltered.