What did & didn't work

With Prototype #2, my group and I determined that what worked well was the fact that it looks like an actual website (professional & organised), maintained consistency between spacing, font, and colour, and it looked extremely clean and straightforward

What we determined did not work well with this prototype was the search bar as the focal point on the homepage because the website does not have information regarding everything, and we want the users to see what the website does offer first.

Acnedocs.com, a public service website, was created with the purpose of educating its users on dermatological care, dispelling myths, as well as providing information about their dermatological clinic in Waterloo, Ontario. The AcneDocs clinic was closed permanently in 2015, but their website was still active as of March 2019.

The original AcneDocs website lacks organisation, consistency, and is difficult to navigate. Myself and a team of two others endeavoured to redesign this website and create a functioning website redesign using HTML & CSS.

Featured:

Detailed critique of the original website

Summary of the business + User Analysis

Sitemap

Phase One

Critique of AcneDocs.com

There are several contributing factors to why we decided to redesign this website. The first being that when we showed several people the website's homepage, there was a lot of consistency in their initial opinions on it: it was overwhelming.

The first thing I consider when critically analysing a website is the immediate feeling I get from looking at it for the first time. A gut-reaction. People tend to form their opinion on a business or on a website as soon as they enter it, which makes it an important factor to look at when designing.

Design Elements

There are several design elements which this website utilised, but they did not do so in the most thoughtful or useful way:

Similarity

This website has several instances of similarity. The top bar of menu items is aligned at the top of the page below the banner, and they are all the same colour and size. Along with this, there is a second menu on the leftmost side of the screen, which has titles for each section that are all different colours. This shows similarity in that the user is able to tell that they are a menu title, based on whether or not it is blue.

Usability

The links on this website bring you to pages containing information regarding specific topics. It is not difficult to tell what a link is and what is regular text, however it is difficult to tell which link to click to get the information you are looking for.

There is a menu option at the top for “Acne” but there are also a few links pertaining to acne on the menu toward the side of the screen such as “What is it?”, “Complications” and “Adult Acne”. The “Acne” menu option brings you to the same page as the “What is it?” menu option, however the other menu options under acne brings you to different pages. The fact that there are two links to the same page, and two links that bring you to two separate pages in the same category is confusing for any user.

There are some pages within this website that are not currently usable, or running. An example of this is the ‘Warts’ menu option, which brings you to a page that says ‘Page Not Found’. This is very clearly a flaw in the navigation of this website, and makes it complicated for a user to browse this site conveniently.

When you enter the “SUN Damage” page, it does not give you an option to return the home page of the website. This is the same when you enter the "Clinic Info" page. As well, this page and many other pages within this website bring you to a new site entirely, but it doesn’t do so by opening a new tab. Both of these factors make it very inconvenient for someone who is browsing the site and may want to return to the home page or the original site to find out more information about other topics.

In addition, some links on this page change the banner at the top again, and others bring you to a new site entirely. Despite this, the information provided is useful, however it does seem slightly excessive, as it claims to be an entirely new site dedicated to the International Skin Cancer Awareness Network.

Content

The information on the homepage of the website is useful as it clearly states the purpose of the website, however it could be done more concisely. Along with this, the content of the “clinic info” page is simply a notice about the clinic being closed and does not provide any actual information about the clinic.

A lot of the content on this website is a collection of links to external resources. It seems as though instead of providing this information itself, this website did the job of compiling a selection of resources for the user to access. This is useful but can be done in a more organised and concise manner to provide the content that users are looking for.

The images used to display the external health and safety websites seem unnecessary, as they do not directly provide information that the user may be searching for. I don’t think that linking to these sites is unnecessary, however having such large images on the home page does not seem to provide much utility for a user who is not searching for this information.

Usability & Content

Proximity

All of the menu items on this webpage are put into groups. Along the top of the screen, there are the main 7 menu items. Along the leftmost side are an extra 7 menu items that link the user to more specific information. The fact that these two groups are in separate locations may cause a user to assume that they are not related, but some of the links on both menus bring you to the same page.

This causes a disconnect between the two menus and creates an undesirable ‘grouping’ effect that doesn’t make sense for this instance.

Focal Point

Upon entering the AcneDocs website, you can see that there is a large banner at the top left of the page with their logo, website name, and a quote. This banner creates a focal point due to its location and size relative to other items on the screen. This being a focal point may distract a user from the information and content of the website, as it does not guide your eyes toward those.

After the banner, my eyes are then directed to the brightly coloured icons and titles on the right side of the screen. These are used to display external links to health and product safety websites such as the FDA, Health Canada, and ISCAN. These also create a focal point due to their colours and size in relation to everything else on the page.

Obviously, a gut reaction is not all that matters when deciding to redesign an entire website. We had to go off of more than just a feeling, but that was our starting point.

When accessing some pages within this website, the banner/logo at the top changes. Along with this, the menu items change, the text colour changes, and the health and safety links change.

This causes an issue with the element of similarity as it has nothing to do with the website although it is a page within the site.

This may confuse a user, because by changing the defining element of this website as well as all of the options to go back to the homepage, a user may think they’ve entered an entirely different website.

Who is the website for?

AcneDocs is a website targeted towards people with skincare issues and curiosity especially related to acne and acne treatment. Generally, 85% of people between the ages of 12 and 25 years old experience issues with moderate to severe acne.

This is the primary group of users this website is targeted towards.

This website is also targeted toward those looking into elective treatments such as facials, peels and removal of skin tags. Any person who is curious about skin care and treatments is likely to access this website for the purpose of accessing a detailed, truthful, and comprehensive collection of information on treatments, conditions, and resources.

Along with this, users living in the Waterloo area might be interested in accessing information about the original AcneDocs’ dermatological clinic and its staff. According to the International Journal of Environmental Research and Public Health, 45.9% of dermatological patients are between the ages of 18 and 30, and 21% are between the ages of 31 and 40.

Why do people visit the website?

The information that the users of websites such as AcneDocs want to access can vary from person to person. This may mean people will go on this website to seek information about the clinic, acne treatment, the disinformation surrounding it, who and where one can obtain it, sun damage, or other skin related topics.

What are the users trying to achieve?

Despite what information the user is seeking, the most important thing is that the users leave the website knowing that they’ve found the information that they needed while also feeling that they've been conveniently guided through a variety of topics relevant to them, without complications or being overwhelmed with the amount of information.

Moving Forward

Because AcneDocs is a website for a clinic, but is also meant to provide accurate and trustworthy information, we decided to look into the websites of other clinics and skin care providers.

We found that most well-designed clinician and skin care websites looked and felt trustworthy, professional, and were easy to use. The websites typically contained pictures of their facilities as well as supplemental images with other useful information. As well, we noticed a lot of dermatology clinics made use of a horizontal menu bar along the top of the screen. We felt that this was useful information for later on in our design process.

When visitors first stumble on the website, they immediately see a wide range of information regarding different topics. AcneDocs gives visitors many sources, to a point where it can be overwhelming because of how disorganised it is.

An example of a solution for this problem would be the removal of duplicated links in the main header and the links on the sidebar. It may confuse visitors by creating too many unnecessary links.

Skin care is something that people of all ages can struggle with, and AcneDocs has the resources and information to help people. However, in order for users to keep wanting to return to their site, we need to make visitors want to use this as their main source of truthful information.

We determined, based on the information gathered in Phase One, that our main goals would be to reduce the amount of clutter, disorganisation, and lack of consistency throughout this website, so the users feel that they are getting reliable information.

Summary of Business + User Analysis

Adam’s goal with with their redesign was to create a more digestible hierarchy of information, with a simple navigation system. The three sections used - accessible from a toolbar on the top of each page. There’s also an addition of a new section for booking a consultation with the Acnedocs clinic directly through the website.

The main goal with their redesign was to make AcneDocs fun, organised, and simple to navigate. The Toolkit and booking features will make it easier for users and Acnedocs’ professionals to determine the problems the users are facing, and some simple navigation changes make the site far more friendly for all ages.

With Prototype #3, my group and I determined that what worked well was the quality of the colours and graphics, organisation, the links within the sub-pages changing the content but not the entire page, as well as consistency between the colours and fonts.

What we determined did not work well with this prototype was the inconsistency between the home page and the sub-pages, some of the graphics seemed slightly targeted at a younger audience, the "book a consultation" button did not belong because the clinic is closed, and the subpages do not look like an actual website.

What did & didn't work

End of Phase Two

By the end of Phase Two, we collaborated to create a list of things we all agreed should be present in our final website design:

Content that is provided along with links (regarding skin care)
Minimal menu options on main page.
Don’t open too many different pages. Keep the pages consistent.
More pictures.
Search bar that is bigger than the original website, but not the main focal point
Colours based off of Adam’s designs (see image)
Main page guides your eyes to what the website offers
Logo based off of Adam's designs
Page layout using Madalayne's multi-menu approach
Professionalism at the same level of Celina's prototype

Phase Three

Low fidelity Mock-ups

Using the list of things we determined we wanted to include in our final website, we threw together a very basic prototype of what we thought the website should look like. This was done using Figma, and we all communicated our ideas and gave feedback throughout this process.

Once we got the basic layout of the webpages done, we wanted to move into designing the high-fidelity prototype as we knew that there was a long and tedious road ahead of us.

High fidelity Mock-ups

When we created the high-fidelity prototype, we made sure to include every element we knew we wanted to. Images, content, text, layout, spacing, font, colours. Figma's group sharing feature made this process a lot easier so we could all make changes at the same time.

I began this process by creating each page on Figma and organising all of the pages and layers, so everyone would know where and what everything was. I also began designing some of the pages on my own (ie. home page), based on the low-fidelity wireframe. Once everyone joined, we were able to bounce ideas off each other and process truly begun.

We began with the home page, and then moved on to the Acne page, and then used the layout of the acne page to create the rest of the pages. Throughout this process, our pages and elements were constantly changing. The layout of the home page had gone through many adjustments before we all felt that it worked well.

For the sub-pages, we decided to add in information about each topic. This was not done on the original website, but we felt it was necessary (and it helped us later when we had to actually create the site)

After creating each page of our website redesign on Figma, we decided to take things a step further and make this prototype usable.

This process meant creating and dragging links from each button on each page to the page that they should lead to. Below is the interactive prototype of our website. Try it out!

The Prototype

The Process

We used a software called Atom which allowed us to work on any file in the project and have it update for everyone else in the group in real-time. It also helped us make changes to every page and suggest changes to each other when we see someone working on something.

We switched from each focussing on one page, to each of us focussing on a specific element of the website. Celina did the top menu bar, Adam did the graphics and image editing, and I focussed on the side menu for the sub-pages. Because the content already existed, we were able to input that information easily.

Collaborating with HTML & CSS

My Role

My role in development portion of this project was focussed on the side menu bar on the sub-pages within the website. Our vision for the side menu bar was that it stayed static once the top of it hit the bottom of the top menu bar. Along with this, we wanted each menu option to have a shadow to show which page you're on.

After some trial and error I accomplished the task of having the menu stay in the same place on the screen once you scroll down past a certain point. After this, we decided that we'd change the layout of the sub-pages from each menu option being it's own page (within that topic) to each topic being one long page. This gives the user the option of scrolling through all of the information and resources available. I added a grey hover over the menu buttons, to show that they are clickable.

The Final Website

The final website we created features a dark blue (static) menu bar with a new-and-improved logo on the left of it which consistently brings the user back to the homepage.

There are four menu options on the bar, which consist of Clinic Info, Skin Care, Resources, and a search icon. We decided to turn this into an icon in order to save space and leave room for dropdown menus.

When your mouse hovers over either "skin care" or "resources" of the top menu options, the little arrow pointing down flips around and points up, and a list of options relating to that menu option appears.

On the home page, we decided to add a little blurb about what the website is all about, as well as provide a quick link to the clinic info (where a user could find that the clinic is closed) at the bottom of it. We added in a little graphic to the right to bring a little bit more life to the website.

When you navigate to one of the skin care pages or clinic info page, the layout is the same. There is a sticky white menu on the left with links that take you to the related section of the page within that topic.

On the skin care pages, we made sure every link worked and brought you to the correct external website. We also made sure to open these external sites in a new tab so the user is not fully taken away from the AcneDocs website. We did the same for the resources tab, as each menu option brings you to the corresponding resource in a new tab.

We also added banners to the tops of the sub-pages in order to demonstrate what the topic of the page is. In hindsight, I think we could have executed this portion a bit better, but overall we are satisfied with what we created.

Sitemap

Original Website Sitemap

Pictured to the right is a sitemap of the original AcneDocs.com website. Because the original AcneDocs website was so difficult to navigate, we felt that a sitemap would help us to visualise the layout of the website in a more organised way.

This sitemap helped us understand where the navigation of the original website lacked, and what is truly consisted of.

There are 7+ menu options on the main page, and some of them bring you to the same page. Below is a redesigned sitemap.

Redesigned Sitemap

After analysing the content of each page and going through the website thoroughly, we determined that there need only be three menu options on the main page. This is because all of the content on the webpage could fall under one of three things: Clinic Info, Skin Care, or Resources.

This second sitemap includes all of the information on the original website, but reorganised to limit the amount of menu options on the original website, and eliminate the repetition that we felt was unnecessary

Low-fidelity

Independent Prototype #2 (Madalayne):

Individual Wireframing + Prototypes

Phase Two

The main motivation behind my prototype design was simplicity. Because we determined that the users of this website would be seeking information from one of three categories, I started with that. I put three buttons in the middle of my page and a search bar below it. Above was the logo (which I redesigned) that is no longer distracting from the most important information. In between the buttons and the logo, was a quote from the original website, which I felt did a good job at letting the user know what the website's goal is without being too wordy.

By providing a dropdown menu under each main menu option, as well as a search bar - the user can efficiently access the information they desire without as many steps or distracting information. For example, If a former patient of the clinic were to go to the website, they would be able to access clinic information, as well as information about the clinic’s closure under the first main menu option. If they do not want information about skin care, they do not have to access or look at it.

When an option from the dropdown menu is selected, the user is brought to a page with information regarding that specific topic, while still being able to access the other links regarding that topic on the left. By using this design, I have utilised the original website’s multi-menu approach, while still maintaining a simple home page and an understandable way of interacting with the site.

These are all changes that I felt helped the user achieve their goal of accessing information as fast and as easy as it can be done.

I wanted to keep the use of colours to a minimum in my prototype, because I feel that too many colours can take away from the trustworthiness of a website. This was an important thing for me to include because of how the original website used (or mis-used) colour.

I chose a light red for the background of the main menu and upper part of the screen. I chose this colour because it is not too bright or too flashy, however my main focus was not the colour of the page. The button style I used for the main menu has a plus sign. I chose this to signify that there are more options to appear when the user presses it. It changes to a minus sign when the user opens the drop-down menu to show that it can be closed.

I chose white for the text on the coloured background because it shows up better, while the dark grey text makes more sense for the pages with white as their background, without being too harsh on the eyes. When a sub menu option is selected, it is grey to show which page you are on.

Overall, I created this prototype with the user in mind. With less distracting stimuli, an easier interface, and information regarding the topics they are looking for with clearly laid out titles and descriptions, I feel I have solved the major issues the original website currently causes without missing any details of this vast and plentiful resource for users.

High-Fidelity

With Prototype #1, my group and I determined that what worked well was the plus signs on the links, the links within the sub-pages changing the content but not the entire page, consistency between pages and links, as well as clean and easy access to information.

What we determined did not work well with this prototype was the size of the top section (too large), the "prettiness" of the website, the colour choice, as well as the font choice.

What did & didn't work

Low-Fidelity

In Celina's designs, her main focus is around better organisation of the site's content so that the user is able to access information easier by knowing where things are located right away. Each page within her prototype has the same layout, which is an improvement from the original website as it lacked consistency between the colours, links, and page designs.

High-Fidelity

It was important for Celina to incorporate consistency on each page with the colours, layout, and also elements such as spacing and font choices. Celina's low- and high-fidelity wireframes seem effortless and clean compared to the original website.