Responsive Website UX Design

1
Responsive Website
Presented by Christine Morrison
2
Project overview
Responsive Web Design
The product This product is a responsive
website for DIY users. The product goal is to
make it easier to acquire the needed information
that will allow users to create, build, or repair
projects on their own . This product provides
this information, and allows other DIY users to
share their skills with like-minded individuals.
Project duration December 2022 to January 2023
3
Project overview
The problem Too much information for DIY
instructions in too many places. Information is
complicated to sort through and difficult to
follow from sites using different fonts, and
viewing methods.
The goal Create a simple website that filters
information from all of the most used DIY sites
in one place. The filtered information will then
be converted to display as a single font type.
Videos will also be converted to be seen with the
sites video player. The ability to view the
videos will be web based and not dependent on a
specific software or device type.
4
Project overview
My role I am a student UX Designer for this
project.
Responsibilities I began work on this project
in the beginning of December 2022. I started with
conducting product and user research. After this
I began conceptualizing the UI with sketches and
wireframes. Then I moved on to mockups, creating
assets, prototyping, testing, iterating on my
designs, and collaborating with other students.
The designs were finalized towards the end of
January 2023.
5

• User research
• Personas
• Problem statements
• User journey maps

Understanding the user
6
User research summary
7
User research pain points
1
2
3
4
Information Overload
Complicated
Inaccurate
Printing Difficult
Too much information is included with tutorials
that dont help users apply the information
easily.
Too many bookmarks to keep track of and organize
for web search of DIY information. Too many
moves. Not simple.
Categories of bookmarked information from some
sites are not always accurate, and can even be
misleading.
It is difficult to print instructions on many web
pages that have instructions for DIY projects.
8
Persona Jessica
Problem statement Jessica is a crafter who needs
tutorials she can get online and learn from
easily because there are too many tutorials that
are confusing and miss information that she
needs.
9
The first goal for helping Jessica is to find a
method for collecting and filtering the
information she needs in one place. The second
goal is to make the instructions that are found
to be easily viewed and consistent.
10

• Paper wireframes
• Digital wireframes
• Low-fidelity prototype
• Usability studies

Starting the design
11
Paper wireframes
My goal with these wireframes were to create a
simplified user experience when there is a large
amount of information to search through. My
thought process began with categorizing material
for DIY projects.
12
Digital wireframes
Projects by categories can give users a more
targeted option for project lookup
A notification counter can let a user know that
other DIY members are connecting with them.
My research has shown that DIY information can be
too broad at times. This makes it harder for
users to get the information they seek to
complete a project. Providing multiple options
that include projects by material can help solve
this problem.
13
Digital wireframes
My research has shown that saved information can
sometimes be incomplete. A project that provides
video demonstration with step by step
instructions can give a user more confidence in
the reliability of the information.
1
2
Users have several options to review their
project information with saving to their account,
printing, or emailing to themselves. Emailing
also encourages sharing with others.
1
Video demonstrations can aid users who may have
difficulty reading.
2
14
Low-fidelity prototype

• The user flow
• Find a project by either a material or by a
  project by name.
• Select the project which links to the project
  instructions.
• The directions can then be saved in the users
  account.
• The user can then opt to seek additional help
  from other DIY members using the community page.

15
Usability study findings
This was a moderated usability study consisting
of (5) participants. Four of my (5) participants
were interviewed in-person. One of my
participants was interviewed using a Zoom meeting
with a shared screen, and video recording to help
in my knowledge of conducting a usability study
remotely.
Round 1 findings
Round 2 findings
All participants were understanding the Community
page use with the addition of a share and help
button.
All participants were able to search for the
project in a manner comfortable to them.
1
1
One of the (5) participants did not know that the
logo would take them back to the Homepage.
All participants felt the necessity to have a
video presentation with written instruction for
the project.
2
2
Two of the (5) participants did not know how to
use the Community page.
3
16
Low-fidelity desktop mockups
Before usability study
After usability study
The useability study provided information that
some users may not know the site logo is used as
a home navigation option.
A home icon was added to the menu as a part of
the design iteration process.
17
Low-fidelity desktop mockups
Before usability study
After usability study
The useability study provided information that
some users might be unfamiliar with the benefits
of a community blog.
A share and help button was added to the project
selection with explanations, and a link to the
community page as a part of the design iteration
process.
18

• Mockups
• High-fidelity prototype
• Accessibility

Refining the design
19
Desktop high-fidelity mockups
The design choices used for these mockups were
intended to be visually engaging while offering
simple user navigation.
20
Desktop high-fidelity mockups
The user notification and the share button for
this design is intended to create a sense of
social interaction with other site users.
21
Mobile high-fidelity mockups
22
High-fidelity prototype
23
Accessibility considerations
1
2
3
The colors used for this design provided a high
contrast to assist visually impaired users.
The minimum font size is 18px to maintain the
recommended 16px Web Content Accessibility
Guidelines.
The content is organized using a heading
hierarchy to help users taking advantage of
assistive technology reading tools.
24

• Takeaways
• Next steps

Going forward
25
Takeaways
Impact Early on in this project, my research
led me to focus on the problem of users being
overwhelmed by some of the available DIY
sites. While testing my high-fidelity prototype
with a family member he stated, that seems
pretty simple. Success
What I learned I learned that many users depend
on both written and video instruction when they
are seeking to complete a project on their own. I
also learned that design decisions led by user
case studies have much better outcomes than
creative thought from a designer alone.
26
Next steps
1
2
3
The designs would need to be presented to
stakeholders to ensure that the product has met
their expectations.
The research and useability studies should be
filed for any future upgrades or iterations to
prevent unnecessary rework on this product.
A shared development link can be presented in
Adobe XD, that will provide the necessary data
for the engineering team to then develop the
website.
27
Insert a few sentences summarizing the next steps
you would take with this project and why. Feel
free to organize next steps in a bullet point
list.
Lets connect!
If you would like to discuss this project with
me, or would consider me working on a project
for you, I can be reached at working4uremotely_at_gma
il.com.