WEBSITE/APP DESIGN
Early concept sketches
The process of working on the screen based aspects to this project began with an intensive look at the other websites in the market of home product sales to inspire and influence my own designs. I broke down these sites, completing content inventories and site maps to pick up on key elements to what make these sites successful. Being that this was a critical design project the outcome would be more theoretical, then focused on hard sales. It was still important to look at minimising steps to purchase, as if this project was to become active there is the potential to make donations for charities in the homeless arena.
After a period of research, I sketched ideas for designs of both a desktop website and mobile application. These sketches were quick and instinctive, producing many pages of different pages plans and website maps. These would latter be honed and decisions justified as I headed towards wireframing.....
WIREFRAMING
Before moving straight into screen drawn wireframing, the first stage of testing could take place to maintain my desire to create a critical design with a user centred focus. This was enabled through the use of POP app, a paper prototyping tool which can transfer sketches to the screen. The simple tool brings drawings to life with the ability to create hotspots allowing users to click through pages.
Much like the phase of sketching, wireframing was an iterative process taking onboard feedback from test. There was more consideration placed on content and positioning of buttons, moving towards a higher-fidelity prototype to be user tested and re-evaluated.
WEBSITE CLICK-THROUGH
APP CLICK-THROUGH
HIGH-FIDELITY PROTOTYPE & CLICK-THROUGH
The final designs were drawn up using Sketch. Both website and mobile application pages were then transported to Invision where they were transformed into full function click-throughs to simulate how a user would navigate specific user flows to get to a given destination. To give the prototype a realistic as possible 'feel' many png's were made of each page with minutiae changes to bring interactions, drop-downs and animations to life when user testing.
With combination of Invision, Quicktime and Adobe Premiere I was able to record specific user flows. For the website I focused on a customer wishing to donate money to the placing on another product in the public and giving money to a charity working in the area of homelessness. For the mobile application I look at a return user navigating through the app to view recent activity of the products in the public.
