Assignment:

Responsive Redesign

Why?

How?

What?

My take on it:


Practice redesigning websites.

Choosing an website interface, analyzing its flaws and proposing changes to its design.

This project consists on an analysis part and a redesign part.

Coming out of this project, I am feeling much more confident in identifying flaws in design
and in taking action to make it better.

Part 1: The website and its flaws
For this part of the assignment, the goal was to choose the website we were going to redesign and analyze it based on usability and accessibility
Website: https://web.archive.org/web/20220710202121/https://www.diagnosticomaipu.com/
What? Argentinian medical center.
Why? I decided on this particular website as I have previously used it and noticed the lack of good design.


Figure1: The following screenshot shows the homepage of Diagnostico Maipu, an Argentinian clinic that works as a diagnostic imaging center as well as a laboratory. Through this website healthcare providers, patients and clients are supposed to be able to find all the relevant information they need.

Usability:
From conducting a quick survey, I know that people who use the website typically want to do 1 of these three things:
  • schedule an appointment
  • view their diagnostic test results
  • get in contact with someone at the facility.
    • I’m going to be looking at those three things in order to assess Learnability, Efficiency and Memorability.

    Learnability: Is it easy to learn how to use? (For new users)
  • First impression: not very easy.
  • First thing that pops up is a slideshow about irrelevant information (for the majority of users)
  • Users have to scan the webpage, easily getting lost with the amount of information that is being absorbed at once.
  • Contact information is nowhere to be found at first glance, we can find it at the top right of the page where it is barely noticeable.
  • Booking an appointment (Turnos Online) and viewing test results (Resultados Online) are in a color that blends in with the background.
  • The menu bar has some options that open new pages, some that toggle down and others that send you to a section below on the same page.


    • Efficiency: Can typical tasks be done quickly? (for frequent users)
  • I would say that the page is definitely easier to navigate if you are a recurring user.
  • Important things get easier to find.
  • Annoying to have irrelevant information popping up all the time.
  • If you want to dive deeper into what type of medical study to book (“Turnos Online”), it already gets messier for choosing from the dropdown menu. Note: No matter what you click it takes you to the same login window


    • Memorability: Is it easy to recall what to do and how? (For casual users)
  • Not hard, but also not simple.
  • As the page organization and features (such as the drop down menu described for efficiency) are not particularly intuitive, it's harder to remember something that was hard to use at first.
  • Again, the immediate take in of all random information is distracting and might make it harder to recall where the buttons that we need to click are.

    • Accessibility:
    My findings: 58 contrast errors
  • Most relevant type of error.

  • From my comments in the previous section on usability, we can see I had noted some of the same contrast errors.

  • The most relevant information of the page (Titles, buttons) is barely noticeable in part because it is blending in with the background.

  • Why? Lack of contrast in the colors and size.

  • No image in the whole page has an alternative text

  • Lack of accessibility, there would be no description if the image failed to load.

  • There is lack of consistency with hyperlinks

  • There are images next to each other and text next to each other of which some have urls that they are linked to and others that don’t. And no way of differentiating between them
    • Part 2: Visual Redesign

    Having reflected on the flaws of Diagnostico Maipu's website, the goal for this part of the assignment is to create a proposal for the redesign. It will consist on low and high fidelity prototypes, as well as visual guide.


    Low Fidelity Wireframes:
    The low fidelity prototypes were made using Balsamiq. As responsiveness is an essential aspect of this assignment, there is one low-fi wireframe for each: computer, tablet and phone.

    Proposal: The main goal with this redesign is to declutter the homepage, to where is much easier to find what you are looking for when entering the website while still clearly conveying Diagnostico Maipu’s mission.

    Different ways I am accomplishing is by:
  • The menu bar now has only one functionality that redirects the user to different pages specific to what they are looking for.
  • Search bar is now accessible at the top.
  • The “book an appointment” and “results” buttons are much more in the center, not blending out with their surroundings.
  • Ribbon at top with space for important announcements.
  • The first thing that appears when you open the page, and what is meant to catch the user’s attention is an image and a description of the company’s mission to provide the best service to patients, connecting them with the best doctors in the field.
    • Tablet view:
  • Keeping almost all of the elements of the computer view, main change is size of font (proportional to the change in size, a bit bigger in fact so that it is still legible).
  • The ‘news’ section now has an image carousel that displays one component at the time, instead of three.
  • Replaced search bubble with the search icon (will open a search bar).
    • Mobile view:
  • The logo and the menu bar are on two different rows.
  • The appointment and results button are now stacked.
  • Same carousel for the news section, the news that are not being displayed are smaller than the one that is.


    • Visual Design Style Guide:
    The visual style guide has the goal of helping the designer
    communicate their ideas to the developer. At the same time,
    it was very helpful and efficient having a guide of the colors
    and fonts before starting the high fidelity prototype.


    High-fidelity prototypes:
    Responsive adaptations (Notes for developer):

    Menu bar:
  • We want to keep all the options on the menu bar as well as the logo.
  • Uses flexbox as well (considering hamburger model where he logo is on its own row in mobile)

    • Search bar:
  • In laptop: ‘search’ word included
  • In tablet and phone: only the search icon to fit in the menu bar.
  • On the three views it expands when clicked to cover the whole menu bar.

    • Font size, Image size, Button size:
  • Change between the three screens, getting progressively smaller while still keeping the proportion.
  • Font in the buttons will get smaller, size of button will follow the same trend.

    • Changes with hover/click (user action):
  • Items on the menu bar will be underlined and changed to a darker color.
  • Buttons will change color and text size increases.
  • Search bar expands when clicked, as explained above.

    • Layout:
  • Buttons will use flexbox: will be in a row for computer and tablet, will compress to a column for the mobile view.
  • News section will use a carrousel tho display the blocks with information. The amount of blocks shown will change with the screen.
    • Part 3: Getting to Work
    In this part of the assignment I got the chance to put my observations and my redesign proposal into action, by making a similar version of the website.
    Note: There are a few elements that I couldn't completely follow the structure proposed in the design.
    They are: the style of the buttons, the moving carrousel, the icons at the top and the fonts.
    There are also no hyperlinks redirecting to other pages.

    You can access the website here: https://happydolphin111.github.io/RedesignedWebsite/
    Citations
    Search bar: https://codepen.io/k185/pen/PQajXE