Website Redesign

UI Design, Interaction Design, Responsive Design

The Beginning

The Client, a medical company focusing on providing point-of-care support, approached my team at DXC for assistance in the redesign of their internal site. The Client had already conducted research and created Low Fidelity Prototypes, but ran out of time to finish the designs.

We were given a set of web wireframes to apply a UI Design to. As well, the client wanted the following to be applied:

  • WCAG standards for Accessibility

  • Responsiveness in their site, so the inclusion of tablet and mobile designs.

  • A redesign style that would 'push the envelope'.

  • Ease of maneuverability in their site, to be able to find related articles and necessary tools information quickly.

  • Personalizing the experience based on the User's Profile Persona

I talked to the client almost every other day getting the information we needed and led my team through our designs.

See the preliminary set of style tiles we had prepared

Challenges

The start of our challenges actually was due to something out of our control. Our work was slated to begin mid-September but due to Hurricane Ida, we had been displaced for longer than anticipated, so we weren't able to start talking to the client until the end of September, and begin work until mid-October.

Our other issue was that we were given vague wants from the client about the style that they wanted for their redesign. Our guidelines were basically,

  • Use the colors from the logo (which was either white or had two colors),

  • Don't have a design too close to their direct competitor (they used a teal/green color we generally had to avoid), and

  • Push the envelope.

When asked for a direction to push the envelope to, we were again given vague responses. The client wanted to reign in any potential designs rather than expand on what we gave them. This made designing for them difficult, as we had to do a significant amount of research to find styles that would fit their user base without being generic.

The last challenge relates back to the first. Time. We spent so much time trying to agree on a design, we cut into the time that was meant to be spent on applying the design to the wireframes. To resolve this, I had to have a session with the client to go through parts of the styles he liked/disliked, then provide options for him to essentially pick and put together, resulting in the bottom-right style that is shown below.

Shown is the Dashboard. Unfortunately, the frames designed were not for the size of the Mockup Screens provided on this site.

Shown is the Dashboard. Unfortunately, the frames designed were not for the size of the Mockup Screens provided on this site.

UI Design

With the Client's direct feedback, we agreed on a darker design, using tones of dark blue as the background and placing all the content on white squares. The client wanted to do this for the look after I showed them how it could help emphasize the content without overwhelming the user.

We used lighter colors to help accent important features, like necessary calculation tools that the user would need, which was a necessary part of the design as the current site forces the user to navigate away from their article in order to get to those calculations.

I created the style guide (above) to be able to
Medical Client Internal Website Redesign

Designing for Tablet and Mobile

The client provided us with the wireframes for web view, which assisted in redesigning them very well and made that process very simple.

Though they wanted the site to be responsive, they did not have any frames available or done in consideration for how a mobile or tablet view would appear, so it was on me and my team to design those frames with the limited time we had.

The main issue, besides the time limits, was the mobile design as this site was heavily content-based. There was assurance that it was unlikely that a user would use the mobile site to pull up the information they needed, but it wouldn't have been acceptable to have a poor mobile experience. As well, the calculation pop-up pages needed to be useable for the off-chance that a mobile view was used.

The Resolution, of course, was to add more screens and be strategic with how information was presented.

Learnings

The main issue on this project was unfortunately time. It was a constant struggle and anxiety as our three-person design team went through and created these designs. Not to mention, we technically had the work of 1.75 designers on this project as I was part-time and our third designer, who was our WCAG expert was only slotted to give 25% of her time.

We had to prioritize our time and the wireframes that needed to be completed, which meant that our UI Designer (who was 100% on that project) was focused completely on doing the redesigns for the web frames. From there, I could go in, clean up those designs, then start laying out how the tablet and mobile designs would look. Our third designer would do a final sweep to ensure that everything was up to the accessibility standards that were required. It wasn't a perfect system, of course. It took me considerable time to do the tablet and mobile designs, as well as ensure that everything was put together on the web views. Our UI Designer wanted to do more, but she lacked the necessary knowledge of mobile-first design to make good user-first designs.

Needless to say, my main takeaways are the following:

  • Make sure the client has an idea and a visual representation of what they want for their designs. We are designers, not mindreaders.

  • Ensure that the timeline for the project leaves wiggle room for issues, and if not, prioritize differently

  • Confirm with the client, before designing each frame, what the most important feature on that page is.

That last bullet point wasn't mentioned very much so far, but another issue we had was that it was never made clear to us until after we mocked up our design for each page, what the focus of the content should be. These were not obvious in the wireframes provided to us, so we were forced to redesign pages on multiple instances.

But hey, it's over now. And hindsight is 20/20

2
Iterations
50
Screens
4
weeks
50ish
cups of coffee
"We adore you. And your work"
Maybe that's what your client said