alwaysUNITED is a healthcare based website that uses Parallax scrolling to tell its story. alwaysUNITED looks to differentiate themselves from other 'colder' healthcare organizations with their branding and website engagement, making the experience fun and approachable for all users. The site relies heavily on Parallax, element transitions, and full width backgrounds to create a unique experience. Once users have completed their journey they are encouraged to contact alwaysUNITED through the site or via social channels.
I started this project by looking at the current standards in the healthcare industry and tried to identify areas that created positive and negative experiences for users, which I have dubbed 'Peak' and 'Pain' points. Looking at the peak and pain points to find a common theme or trend is important because it will help dial in the site content to ensure the site is promoting the type of experience which engages and excites users throughout their time on the site.
Once the story arch was finalized, it was time to start developing the overall layout and feel of the individual pages. Each page needed to have consistent branding to ensure that all pages felt like a cohesive story, as well as a logical page layout that felt intuitive to use alongside the Parallax functionality. I sampled a few color palettes, ultimately moving forward with the 'green-based' color palette, and tapped into image types and iconography I felt would help bolster the branding elements. I also began laying out the pages into wireframes to give me a rough roadmap of how the content would appear on the page, keeping in mind that elements would need to transition on/off the screen.
After the pages had been laid out into wireframes, I felt it was important to document the necessary Parallax transitions that would take place on each page. Sometimes designers and developers have to pass crucial information back and forth, and in order to assist this process I created a set of 'Transition Guides' which detail out all the timings and transitions required to build up the alwaysUNITED pages. These guides are an important part of the UI/UX process as they ensure all parties involved have the appropriate information needed to complete their stages of work.
The last step for the alwaysUNITED site was to combine the branding guide with the wireframes and flesh out the final page designs. These page designs would need to take into account all previous documented research and ensure that any design elements that I added worked towards the common goal of engaging and exciting users. The final designs would serve as the 'mixing bowl' full of design and conceptual ingredients that are working together. I laid the wireframes and final designs side-by-side and looked to highlight areas of design that worked well to bolster the content and to demonstrate the build up of layers of design and content on each page.