After conducting basic user research, the 3rd iteration of the wireframe was approved. Now comes the tough part: Prototyping. Here is where we see what ideas from the wireframe can be successfully adapted to the prototype. The prototype serves as a semi-functional design of the user journey and allows you and other users to interact with the site/app.
Here my main focus is to:
+Incorporate elements from the wireframe
+Start color blocking and designing pages within the brand standard restrictions
+Write copy and use apply brand fonts to headers. sub-headers, paragraphs.
+Resize elements to fit comfortably on a phone
+Incorporate some user interaction elements (such as:page transitions, scrolling animations, etc.)
+conduct A/B testing by using different variations of the prototype to see which elements and layouts are the most effective and coherent.
This process took up the bulk of the project due to creating multiple iterations based on feedback from user testing and observation. This process is where good, clean UX is developed because of the constant refinement of elements and spacing. In this case, user feedback proved to be useful because it provided perspective that designers (like myself) frequently overlook. After a week and a half of refining the site, I finally created a workable prototype that was approved. It incorporated all of the necessary design elements and agreed with brand guidelines as required. It also communicated a meaningful story about our brand whilst validating consumer doubts.
I decided to go with a block-design layout, meaning the landing page consisted of various sections, each being able to branch off onto their own pages. I also made it a point to have identifiable company logos within site on the landing page which serve as a front facing validation technique to ease consumer trust. Since the goal of this site was to be consumer facing first, I incorporated a colorful gradient that met brand standards which served as an attention catcher. It was also a goal to use photos in a minimal and creative way, so I created wavy mask shapes that contained images under an overlay gradient (the same gradient consistent on the landing page) (see below.)
