AD banner 2.png

👩🏻‍⚕️  AcneDocs

Overview

In my digital imaging course, I worked alongside two of my classmates to redesign a local business' website. We were required to reach out to our chosen business, research the industry that it was in and create a website using HTML and CSS using design elements taught in class.

Course & Duration

GBDA 103: Digital Imaging for Online Applications

Jan - Apr 2019

Programs

Prototyping: Adobe XD & Figma

Coding: Brackets & Atom

Graphics: Adobe Illustrator & Photoshop

Team Members

Adam Code

Madalayne Rockarts

Role

Sitemap, wireframing, coding

Skills

Research & analysis, wireframing, prototyping, HTML & CSS

BACKGROUND

Problem

The first thing to consider when analyzing a website is your gut reaction upon entering it. Users tend to form an opinion on a business/website as soon as they enter, and it is important to consider the design elements being used. Our team's first initial reaction is that AcneDocs' website causes confusion because the website misuses critical design elements. To analyze, we further looked into elements such as similarity, focal point, proximity, and continuity.

Screen%20Shot%202019-01-22%20at%201.57_e

01   Similarity

• Red and blue text is used frequently on the website, however, there are also many other colours that interfere and don't provide any logic behind the choices.

• The banner/logo at the top changes depending on which links are being clicked causing confusion.

02   Focal Point

• The overuse of red text might cause a distraction.

• The banner at the top creates a focal point due to its location and size relative to other items on the screen.

03   Proximity

• There are two areas at the top and the side which display a group of links. Some of these links lead to the same page which isn't necessary.

04   Continuity

• Images used to display the external health and safety links are not the same size - our eyes want to see continuous lines formed by the alignment of objects and the varying sizes of these objects don't allow that.

PLANNING

Sitemap

After identifying problems with the Acnedocs website, we realized one apparent problem throughout the website is that there isn't a clear sitemap of all links. The original website had links leading to the same pages and to new pages causing a lot of confusion. Therefore, we wanted to simplify their user flow by breaking down their pages into three main categories.

Screen Shot 2020-01-20 at 9.39.21 PM.png

1.0   Clinic Information

As a business, it's important to let customers know where the business is located and how to easily contact them.

2.0   Skin Care

This is the main section where it provides information regarding acne, warts, etc.

Users will gain insight from these pages.

3.0   Resources

The last link directs the users to important links about skincare and overall health.

DESIGN PROCESS

Wireframing

The next stage was to independently wireframe our designs to present to each other. By doing this, it allowed us to see a variety of design routes and solutions to the problems that the original site had.

Homepage
Homepage

Clinic Info
Clinic Info

Skin Care - Resources
Skin Care - Resources

Homepage
Homepage

1/7
Homepage
Homepage

Clinic Info
Clinic Info

Homepage
Homepage

1/2

Low-fidelity wireframe

High-fidelity wireframe

Design Rationale

When users first see the original website, they are bombarded with information. Therefore, my main focus revolved around improving the organization so that users would be able to access information with ease. I decided to include a search bar on the homepage so they could search up any specific things as well as making each page consistent. When viewing the wireframes, it's effortless and clean compared to the original website.

Updated Wireframes & Mockups

Using each of our designs, we organized elements that would be beneficial to the new website. For example, in my wireframe, the homepage was only a search bar. As a group, we felt that it was not necessary considering we already know what information Acnedocs already has. If the user was looking for something, they would most likely type it in Google. It is more effective if we have a homepage with a simple description that isn't filled with information. 

Using a single topbar also helps direct the user to the necessary links that Acnedocs has to offer. 

1.jpg
3_edited.jpg
new.png
CONCLUSION

Colour Palette

#1C1F1F

#528C97

#64A9B6

We chose this colour palette because, through research, we found that blues/teals are associated with health/skincare.

Final Design

As this project was a collaborative team assignment, a lot of the work was evenly split. In phase one, Adam took the role of researching how professional medical websites operate. He later took care to craft a set of thematic illustrations that could be used in a variety of ways such as homepages and presentation slides.

 

Madalayne spent time critiquing the website in depth which allowed the team to recognize problems that we could change and assisted in creating the high-fidelity prototypes.

 

I created the sitemap and helped Madalayne with coding the final website. I mainly took the role of creating the topbar menu with the dropdown links.

 

Key Takeaways

Before this assignment, I already had knowledge of HTML and CSS, therefore I found this project fairly easy in that aspect although coding as a group was new to me. I really enjoyed being able to work with people that have different skillsets and so we are able to learn from each other. Next time, I would like to work more on the user interface because I feel like it could be improved. While our website was easier to navigate compared to the original, it could look visually better without the amount of whitespace we had. Overall, I enjoyed the process of creating a website using code from scratch and working with my team.

🤙🏻  Check out my other projects!
Banners3.png
Banners5.png

[ 2018/19 ]    Graphic Design

[ 2017 ]    Mobile UX/UI

Banners6.png

[ EST. 2017 ]    Digital Illustrations