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.
Back to Top