A direct continuation of the desktop version of 4C For Charity's cards4charity.org site, required a stripped down layout for mobile devices. The whole site is one entity, designed to scale to screen sizes, but it was decided that at a certain ratio an optimised layout for hand held devices was required.
Key Design FUNCTIONS
1 - The same full features from the desktop would need to be present, but rearranged to a more stripped back design. Key to this would be the hiding of the header links to a drop down menu and new buttons designed to cater to mobile devices - such as a quick call button to cater to quick customer support.
A. Lo-Fidelity WIREFRAMES
With most of the design work completed initially for the desktop version of the site; design of the mobile layout and functionality was largely restricted to wire framing and prototyping stages, albeit with a initial dive back into competitor analysis to observe the strengths of the mobile versions of their sales sites.
The main focus of the wire-framing process was to consider the new scale of elements such as product cards, the enlarged product view and new drop down menus in relation to mobile devices.
A sample of this work can be seen right.
B. PROtOTYPE
Focusing on a stripped back version of the was key to the prototype, so much of the features work in a manner very similar to the desktop version of the site.
You can view the prototype in full on Figma here. The prototype is also embed below to be interacted with.
