• Skip to main content
  • Skip to footer

User Experience UX/UI Designer

Jeg skaper brukeropplevelser

  • Home
  • About
  • Skills
  • Blog
  • UX CASE STUDY
  • Android Apps
    • Rock, Paper, and Scissors Game
    • Classic Tic Tac Toe Game
  • Privacy Policy
    • Privacy Policy RockPaperScissors App
    • Privacy Policy Tic Tac Toe Game
  • Contact

Adobe XD

UX Case Study – Design System

Contents

PART 1 -Create the Design system

• Brand/design purpose and shared values
• Design principles
• Brand language and identity
• Logo usage (keep this brief!)
• Layout and spacing (grids)
• Typography (include a type scale)
• Colour usage
• Imagery (photos, video, etc.)
• Iconography
• Components (and their states)

PART 2 Create a PDF presentation report

• The purpose of creating a design system (briefly explain the benefits, e.g., consistency)
• Atomic Design/(introduce this concept and explain how it relates to your system)
• Visual principles (explain which principles you considered or used)
• Interaction design (show how you included interaction design in your design system, e.g., interactive buttons)
• Method (explain how you used existing branding, collaboration with classmates/colleagues, creativity, research, tools, software, etc.)
• References

LINKS:

UX Case Study Document

Design System

UX Case Study – Accessibility

Accessibility can be used to describe the quality of a product. It explains how possible or easy it is for someone with disabilities to use the product.

4. Principles of accessibility I used.

Now, let’s look at fundamental accessibility principles. The acronym
POUR stands for:

• Perceivable
Users must be able to perceive the product and how it works quickly. Usually, this is done using the sense of sight. As some
users might have limitations with how well they can see, UX
designers need to consider how to make a product accessible
with this in mind. I used high contrast text .5.4:1 following
WCAG.

• Operable
To reach their goals to fill in the form, the users must be able
to operate the product (e.g., driving a car or using a website
can be considered operations). To interact with a digital product,
the users need to use buttons and can reach these with a
mouse or a keyboard. Carefully thought-out interaction design
can improve how easily interacting with and operating the product is. The form you can follow from the top to the bottom of
the form with the keyboard tab button.

I considered keyboard accessibility.
It is essential to ensure that all functionality is available from
the keyboard. That means the whole interface should be
operable with only a keyboard, but it does not mean other
input forms will not be used. In other words, a keyboard
could be used as well as a mouse. Yet, if the user cannot use a mouse
for some reason, they should be able to navigate through the entire
website using only the keyboard. In other words, users should be able
to do everything typically done with a keyboard and mouse by using a
keyboard only. The Tab key can move from one form field to the next.

Ensure proper timing.
Some websites and user interfaces have timers set that advance a
user after a certain period or on another basis. If this happens too fast,
it can interfere with the user experience and be frustrating. Ensuring users have enough time to read and use the content is essential.
Let users decide when to move on.
Prevent adverse physical reactions.
Some individuals have specific sensitivities that can spark physical
reactions when triggered. UX designers need to be aware that the way
that they choose to design interfaces or present content might cause
discomfort or harm to these people – flashing visuals negatively impact
users who have epilepsy, for example. I have excluded that from the
form.

Ensure ease of navigation.
Direct labels, for example, on links, make navigation much more intuitive.
It is always worth double-checking and testing link text to ensure
that it makes sense to the people using the website or digital product.
In other words, the link text should concisely tell users what the link
links to without leaving them to wonder or be disappointed when they
reach the page or place they navigated.

• Understandable
The third principle points to understanding. The product must be
easy to grasp conceptually and to understand without much cognitive
effort. It should behave consistently and predictably and be easy to
learn how to operate it. That includes the idea that the product should
be simple enough because that would make it easier to understand
and difficult to remember how to use. A confusing experience is a bad
user experience.

Make content readable.
When text is presented in a language unknown to the user, the
content is not accessible, no matter how well it is written. For this
reason, it can be helpful to have translation options available, but it
is only sometimes required to have every website available in every
language. It is essential, however, to let users choose which language
they want to view the site in. It is also worth considering the website’s
purpose, user’s goal, and web literacy. To ensure that a website or
digital product is understandable, content needs to be written in a
way that is easily readable and understandable. UX
designers should check that the text makes logical sense, flows well,
and is natural.

Provide predictable interface behavior.
A predictable interface helps users understand the system or product
more efficiently and gives them confidence the next time they interact
with the system. Predictability is achieved using consistent navigation.
Offer help up front.
When users are required to pass information to the system by inputting
data (in a form, for example), there are ways that digital products
can help users avoid making mistakes. First, straightforward,
concise, conventional, and meaningful labels are helpful. This tells
users what is expected of them.
A confusing experience is a bad user experience, so it is essential
that all the content and information, including the user interface elements
that a user perceives and uses to operate a system or digital
the product should be naturally understandable.

• Robust
Lastly, robustness points to the importance of strength and flexibility
in product design. A robust product can function well across different
technologies; in this case, an entire website can work well with other web browsers. A website that
only works on one browser would not be described as robust.
Websites need to work well with different types of assistive technologies.
This means they must be adaptable and support disabled
users in this way. Through thoughtful coding, users must be aware of
other states. This is done by using frontend languages like HTML
correctly. Here’s a list of the design elements and conditions we
explored:

• Checkboxes and radio buttons (checked/selected).
• Accordions and menus (expanded/collapsed).
• Input fields (disabled/read-only/required/invalid).

• Images and other elements (zoom percentage).
In addition to states, there are also statuses that UX designers need to
make clear to users. Commonly, success and failure states need to be
communicated clearly and timeously. They must be programmed to
work perfectly well with the assistive technology that will likely be used, which I have done in the form.

LINKS:

UX Case Study Document

Prototype Design System and Form Design

UX Case Study – Diabetes-Risk Web Dashboard

Title: UX Case Study – Diabetes-Risk Web Dashboard

Introduction:

  • Project:  Diabetes-Risk Web Dashboard – A User-Centric Online Web Platform
  • Duration: 28.04.2023 to 28.05.2023
  • Presented by: Thomas Strandebø

Objective:

  • To enhance the user experience and accessibility of the Diabetes-Risk Web Dashboard platform.
  • To create a more engaging and user-friendly environment for Diabetes.

Phases of the UX Case Study:

  1. Empathy Phase:
  • User Research: Conducted user interviews, surveys, and observations to understand user needs, pain points, and motivations.
  • Personas: Developed user personas to represent different user segments, highlighting their goals and preferences.
  1. Define Phase:
  • Problem Statements: Defined vital design challenges and opportunities based on user insights.
  • User Needs Prioritized user needs and expectations to inform design decisions.
  1. Ideate Phase:
  • Brainstorming: Generated creative ideas and concepts to address identified challenges.
  • Prototyping: Created low-fidelity and high-fidelity prototypes to visualize design solutions.
  1. Prototype Phase:
  • User Testing: Conducted usability testing with real users to gather feedback on prototypes.
  • Refinement: Iteratively improved designs based on user feedback and usability findings.
  1. Test Phase:
  • Usability Testing: Evaluated the platform’s usability with real users to validate design decisions.
  • Feedback Incorporation: Incorporated user feedback into design iterations.
  1. Implementation Phase:
  • Design Improvements: Implemented design enhancements, focusing on accessibility, engagement, and personalization.
  • Cross-functional Collaboration: Worked with developers and stakeholders to bring design solutions to life.

Results and Impact:

  • Improved user satisfaction and engagement.
  • Enhanced accessibility, making the platform more inclusive.
  • Streamlined user journeys and navigation.
  • Increased user retention and community engagement.

Lessons Learned:

  • The importance of user-centricity in design.
  • The value of empathy and continuous feedback.
  • The iterative nature of UX design.

Future Outlook:

  • Commitment to ongoing improvement and user-centered design.
  • Expansion of features and inclusivity efforts.
  • They are embracing innovation and emerging trends in UX design.

Conclusion:

  • The Diabetes-Risk Web Dashboard UX case study showcases the power of user-centered design in transforming an online art platform. It highlights the importance of empathy, iteration, and accessibility in creating a more engaging and inclusive user experience. The journey continues with a dedication to ongoing improvement and innovation in diabetes solutions and design.

LINKS:

UX Case Study Document

Diabetes Web Dashboard Prototype

Moodboard

Sketches

Thank you for your attention! Questions and feedback are welcome.

UX Case Study – Movelt Fitness Mobile & WatchOs App

Title: UX Case Study – Movelt Fitness Mobile & WatchOs App

Introduction:

  • Project: Movelt Fitness Mobile & WatchOs App – A User-Centric Online Art Platform
  • Duration: 30.3.2023 to 30.04.2023
  • Presented by: Thomas Strandebø

Objective:

  • To enhance the user experience and accessibility of the Movelt Fitness Mobile & WatchOs App platform.
  • To create a more engaging and user-friendly environment for fitness.

Phases of the UX Case Study:

  1. Empathy Phase:
  • User Research: Conducted user interviews, surveys, and observations to understand user needs, pain points, and motivations.
  • Personas: Developed user personas to represent different user segments, highlighting their goals and preferences.
  1. Define Phase:
  • Problem Statements: Defined vital design challenges and opportunities based on user insights.
  • User Needs: Prioritized user needs and expectations to inform design decisions.
  1. Ideate Phase:
  • Brainstorming: Generated creative ideas and concepts to address identified challenges.
  • Prototyping: Created low-fidelity and high-fidelity prototypes to visualize design solutions.
  1. Prototype Phase:
  • User Testing: Conducted usability testing with real users to gather feedback on prototypes.
  • Refinement: Iteratively improved designs based on user feedback and usability findings.
  1. Test Phase:
  • Usability Testing: Evaluated the platform’s usability with real users to validate design decisions.
  • Feedback Incorporation: Incorporated user feedback into design iterations.
  1. Implementation Phase:
  • Design Improvements: Implemented design enhancements, focusing on accessibility, engagement, and personalization.
  • Cross-functional Collaboration: Worked with developers and stakeholders to bring design solutions to life.

Results and Impact:

  • Improved user satisfaction and engagement.
  • Enhanced accessibility, making the platform more inclusive.
  • Streamlined user journeys and navigation.
  • Increased user retention and community engagement.

Lessons Learned:

  • The importance of user-centricity in design.
  • The value of empathy and continuous feedback.
  • The iterative nature of UX design.

Future Outlook:

  • Commitment to ongoing improvement and user-centered design.
  • Expansion of features and inclusivity efforts.
  • Embracing innovation and emerging trends in UX design.

Conclusion:

  • The Movelt Fitness Mobile & WatchOs App UX case study showcases the power of user-centered design in transforming an online fitness platform. It highlights the importance of empathy, iteration, and accessibility in creating a more engaging and inclusive user experience. The journey continues with a dedication to ongoing improvement and innovation in the Mobile/WatchOS app and design.

LINKS:

UX Case Study Document

Prototype WatchOS App

Prototype Mobile App

Logo

Thank you for your attention! Questions and feedback are welcome.

Footer

Social Media

Follow by Email
Facebook
Facebook
fb-share-icon
Twitter
Visit Us
Follow Me
Post on X
LinkedIn
LinkedIn
Share
  • Home
  • About
  • Skills
  • Blog
  • UX CASE STUDY
  • Android Apps
  • Privacy Policy
  • Contact

Copyright © 2025 · Altitude Pro on Genesis Framework · WordPress · Log in