Develop - Ideation and Evaluation
In the Development phase we began to ideate the concept of AALOC’s redesign. We accomplished this through our wireframing process, user flow site-mapping, as well as creating a brand style guide to establish consistency.
REVISING THE CURRENT SITE MAP
Our team noticed that the current site’s content needed a bit of an update. During this process we aimed to reorganize the page sections and contents, hoping to minimize the information the user would have to process and navigate through.
By combining similar, relatable pages we minimized the number of sections that existed on the AALOC website. We then decided to reorder the sections based on the user feedback we had received, in order to prioritize the information the users seemed to seek the most. After multiple revisions we finally created our revised site map, shown below.
PRIMARY USER FLOW
Following the creation of our revised site map, our team focused on prototyping the adoption user flow. As mentioned previously, the adoption process was perceived to be one of the main features of the website, so our team naturally gravitated to create the wireframes for this process first. Below is the primary user flow that will later be prototyped in the final phase of the double diamond process.
1ST ITERATION OF WIREFRAMES
Once the site map had been created, we then proceeded to develop basic wireframes and low-fidelity wireframes.
Each of our team members created their own interpretation of the redesign and presented their design solutions to the rest of the members. From there we collaboratively looked over the designs, marking which design suggestions we wanted to iterate upon further, and the design suggestions we wanted to omit.
ESTABLISHING BRAND IDENTITY & DESIGN CONSISTENCY
After our team had discussed the features and redesign of the website, we proceeded to create a style guide that evoked warmth, boldness, and friendliness. Due to the feedback we had received regarding the lack of aesthetic appeal, we ventured into a more adventurous color palette.
While incorporating brighter and bolder colors into the style guide, our team still wanted to maintain the professional and polished reputation of a non-profit organization. We aimed to balance modern professionalism with playful boldness.
The same inspiration followed our typeface and font family choices. Our main headings were displayed with a more playful typeface while the body text remained modern and polished.
Creating a Responsive Website:
We believed that the AALOC website should have a responsive web design so that users on all different devices would have a positive interaction with the interface. Also to optimize the accessibility options for various users.
After establishing the style guide, our team proceeded to create the high fidelity mockups.