Pattern Library
In an effort to create consistency, we decided to create a pattern library. We chose to build it in Adobe XD as we frequently use it to design/prototype in. I made an inventory of all of our containers and began to build them in the program at desktop, tablet, and mobile. I added our color palette and populated the character styles. Now that we can plug and play, we're able to quickly prototype.
Buttons & Links
As we began to update our containers, we wanted to focus on redesigning the smaller components as well. Starting with our buttons, links, and a few other UI elements we began the redesign.
Forms
With buttons being redesigned we thought it would be a good opportunity to take another look at our forms. Across all of our marketing sites and products there were a bunch of inconsistencies. In order to tackle the problem, I made a spreadsheet of all instances to narrow down the types of forms/form fields.
Identifying Inconsistencies
Another designer and I went through and tracked each form, its location on the sites, and how we could improve it. We printed all of them, marked them up and began to align our forms. We came up with guidelines and divided up the work narrowing down the number of our forms to four.
Research
I wanted to make sure our forms were user-friendly and ADA compliant so I did some research. I looked into the height of form fields, error states, and best location for their labels. We looked at many examples of multi-step forms for inspiration and worked with our product team to align experiences between them and marketing.
Tab Navigation
If you're looking at an "institution" page on our marketing site you'll notice that there is both global navigation and subnavigation. As we continue to migrate sub sites within our main ebsco.com site, we realized we needed a way to provide content to our users without overwhelming them. We didn't want to create multiple levels of site pages for each product, and looked to tab navigation as a solution. It would allow our users to pick through the content that was relevant to them.
Research
As we didn't want to overwhelm our users with multiple navigations, it was important to research design opportunities to keep it as clean as possible. I looked at numerous blogs, articles, and examples of other sites that used tab navigation. The real challenge would be presenting all of the content at mobile. To begin I browsed Netflix, Hulu, and Stitcher, apps that I use frequently and know provide content in different forms of "tab navigation." I realized the content our users would be interacting with was completely different and started to look from a different angle. I worked with another designer to come up with a couple solutions and the following are two options I pushed further to get ready for review.
Testing
In order to see what option worked best, we set up sessions for testing. I created a moderators guide and read the tasks while someone took notes. I created prototypes of each option and had them open on my phone so they could interact with them as if it was a live site. Based on the results and feedback from the testing, I created a summary to present to my team.
Solution
In the team meeting, we agreed on a design direction. Next steps were fleshing it out in XD and prepping it for development.
