WORK
Silver Award - Digital Marketing (Website Category)
Scripps Wireframes











Problem
Scripps is a healthcare company based in San Diego. They wanted a redesign of their site to make it easier for users to navigate.
Tools
Axure
Collaborators
Olivia Chen - UX & IA Consultant
Approach
To achieve simpler user navigation and wayfinding, my mentor sketched an accordion menu for a page she wanted me to work on. She explained because there was so much information, especially for a site like this, we wanted to make it easy for users to find information quickly and reliably. With dynamic panels, she taught me how I can make my wireframes livable, which opened the doors for wireframing practicing/work for me. She let me have some freedom with how the rest of the page was going to look, but there were still guidelines I had to follow.
Personal Actions
I created the wireframes for three pages: Why Scripps, Esophageal Cancer, and Clinical Trials and Studies. I implemented an accordion menu on all three wireframes. This was challenging as I had to experiment with dynamic panels and how they logically worked. After some tinkering, I got the accordion menus to function. Though, whenever I tried to make my menu responsive, the page didn’t adjust like it was suppose to. For example, resizing my browser from desktop to tablet and back to desktop would create this problem. As a result, there were some texts overlap and misplacement (see last image). I tried researching and troubleshooting the issue for a few days, but I still could not get it to function 100%. On a forum, they discussed a problem similar to mine and that this was by design (I could be misinterpreting the problem as I’m still learning about menus and their dynamic properties). This taught me I should do everything, like even resizing text boxes, to exact measurements or else problems could arise later. This was a valuable lesson to learn. I was introduced to the hamburger menu here as well so learning how to create a functional hamburger menu in Axure was something new and exciting!





.png)