Responsive Web Design Using Adobe XD for Google's UX Certification

Responsive Web Design for an Art Courses Site Using Adobe XD Brittney Banning

Project overview The product: This website offers classes and tutorials in art, with a variety of options in both physical and digital art mediums.

Project duration: September 3 - Sept 26, 2022

Project overview

The problem:

The goal:

Current websites have a broad array of classes,

Offer a minimalist and straightforward,

we wanted to simplify a niche for art.

art-specific experience for users.

Project overview

My role:

Responsibilities:

UX Researcher and Designer

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

Understanding the user

●

User research

●

Personas

●

Problem statements

●

User journey maps

User research: summary

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users use art classes with both personal and professional goals in mind. However, many websites offering online courses are overwhelming and confusing to navigate, which frustrated many target users. Many users were looking for a more straightforward way to take art classes online.

User research: pain points 1

2

3

4

Pain point

Pain point

Pain point

Pain point

Current websites tend to be overwhelming to navigate.

The cost structure is often not clear and sometimes deceiving.

Course certificates are not offered on some course sites.

Extra fees to earn course certificates deter some users from signing up for the platforms.

Persona: Becky Problem statement: Becky is a community college student who needs affordable online classes because she would like to explore different art mediums and supplement her current education..

User journey map A user journey map using the art site to identify user pain points and give insight into area of needed improvement.

Starting the design

●

Sitemap

●

Paper wireframes

●

Digital wireframes

●

Low-fidelity prototype

●

Usability studies

Sitemap An overwhelming amount of choices was a primary pain point for users, so I used that knowledge to create a sitemap.

I wanted to make the process of finding classes streamlined, as well as picking up with current classes a user is enrolled in.

Paper wireframes I sketched out paper wireframes for the website and mobile app, focusing on streamlined

Paper wireframe screen size variation I adapted the screens in the mobile version to be responsive.

Digital wireframes This course page showcases some of the implementation of user research, based on a request for a straightforward course structure to see which sections are completed and which are still in progress.

Ability to review recent videos and keep track of course progress

Sections of each unit show have check marks to gauge progress.

Digital wireframe screen size variations The desktop and mobile version of the same page.

Low-fidelity prototype

This low-fidelity prototype highlights the main user flow through the website.

Link to the prototype.

Usability study: parameters

Study type:

Location:

Unmoderated usability study

United States, remote

Participants:

Length:

5 participants

15-20 minutes

Usability study: findings Insert a one to two sentence introduction to the findings shared below.

1

2

3

Finding

Finding

Finding

Users weren’t sure how to enroll or save courses for later; the prototype was missing these buttons.

User would like to be able to see more course options user the fly open menu.

“Courses by Topic” could use a clear course name to identify it on or near the course image link.

Refining the design

●

Mockups

●

High-fidelity prototype

●

Accessibility

Mockups From insights of the usability study I made changes to improve the visuals here by adding the course names to the “Courses by Topic” page.

Before usability study

After usability study

Mockups Here I added more navigation options and visual elements to the browse fly-out page.

Before usability study

After usability study

Mockup 2 after

Mockups: Original screen size

Mockups: Screen size variations

High-fidelity prototype Color, photos, and a unique font were added to create a more unique style to the website.

Link to the high-fidelity prototype.

Accessibility considerations 1

2

3

To help users navigate the site landmarks were used.

I used a contrast checker to make sure the colors and text aligned with standards.

I used heading hierarchies to structure organize content.

Going forward

●

Takeaways

●

Next steps

Takeaways

Impact:

What I learned:

“The website is easy to navigate through and

I learned to make sure my prototype is set up

browse courses. The colors popped and the

thoroughly and the interactions are intuitive. I

layout is clean and simple.” - From a user tester

learned that people tend to get overwhelmed by complex websites with a lot of options and simple websites can make users feel less stressed. It’s important to always have the user not only in mind but at the forefront of your design decisions.

Next steps 1

2

3

Conduct another usability test to ensure designs are meeting user needs.

Create a version of this site that works with tablets.

Incorporate more accessibility features such as language translation.

Let’s connect!

Thank you for viewing my work!

If you would like to get in touch, you can reach me at brittneyleighb@gmail.com