The client came to us with a desire to update their suite of websites with an updated look and content. When I started this project, one homepage design was already approved by the client. I created wireframes and high-fidelity mockups for the remaining pages and websites within the suite.
A range of wireframes were created to show how page layouts would respond at desktop, tablet, and mobile screen sizes.
Wireframes for a few secondary pages were created as well as mobile and tablet wireframes for some of these pages. Annotated descriptions explained how a user could interact with various functional items on the website, as well as some limitations for the person inputting content into the CMS.
In order to encompass all of the styles needed within the website, we chose to create high-fidelity mock-ups for secondary pages that included all of the different types of components within the site. These included items such as: accordions, video callouts, video carousels, quote styles, siderail items (styles for items with images, and styles for items with icons), quizzes, etc.
I also determined custom styling for bootstrap elements on forms and buttons.
I created high-fidelity mockups to show the styling and functionality of menu items. This included showing hover states (for desktop items), active states, and static states of various menu items. Mock-ups were also created to show how the menu would appear on mobile and tablet screens. I was careful to use sizes for menu items that were readable, large enough for users to tap (for mobile devices), yet not so large that they took over too much space within the screen. Labels were included on some functional items in order to aid users that were not as technically-literate.
Lastly, I aided in QA for all of the pages within the site. I created tickets for styling issues, cross-browser functionality, and some unforeseen issues that arose after content was changed by client team members. Overall, the client was very pleased with the finished suite of websites.