Jump to section

Organizing Data

I gathered data from the recorded interviews and
began categorizing the input for analysis.

Organizing Data

I gathered data from the recorded interviews and began categorizing input from the interviewees.

Personas

Using data from all three ideal users, two personas were created.

Empathy Mapping

Using personas created from data acquired from interviews.

Card Sorting

In order to evaluate or generate ideas for the information architecture, I chose to do a open card sort using the website Optimal Workshop.

Going into it I felt like I had created a simple sitemap that would work well.  I learned that there was still plenty of room to improve the information architecture with combining, moving, renaming, or deleting content.

Original Sitemap

Revised Sitemap

User Flows

User Journeys

Usability Testing

Bringing the sketched wireframes to a mid-fidelity level helped to flesh out the elements and I was able to make it a working prototype to begin testing.

I conducted video testing which I was able to record and review later more in depth. I was lucky I was able to have a couple of my original interview participants back to do prototype testing.

Testing Results

After completing my testing I was able to take the data and chart out the metrics to see how my prototype measured up.

Preference Testing

I took screens I had designed with a few differences and did preference testing.

Peer Reviews

Using high-fidelity designs I worked with peers and had my work critiqued.

Accessibility

Seeing how my design tested with accessibility changed the look quite a bit.
The most important part of how users engage with the app is how accessible it is. I changed course and created a design that passed with a minimal AA rating.

Fields

I really liked the idea of using gradients throughout the various screens. Gradients don’t do particularly well with accessibility.

By eliminating the gradient background and eliminating the glass effect, I created fields that pass accessibility standards.

Buttons

By doing a contrast check with the Plugin A11y, I was able to see my buttons did not pass to AA standards.

By choosing a darker hue of the branding colors I was able to make them work better for accessibility.

Orientation

Moving the greeting lower offered more room for the motivational graphic to be larger. Putting the pagination below and larger informs the user that there are five pages in total.

Sizing

By adjusting spacing to create a more uniform look, I was able to increase the bottom navigation.

Contrast

All fields reflect the solid white with a black stroke so fields are much more visible.

The branding colors did need to change to a darker hue to pass AA standards.

Simplifying colors creates more separation and contrast.

Signifiers

By changing the size of the sponsor card I was able to increase the buttons that are on each card. The various communication methods have plenty of room for the user to make contact with when pressing. Putting the most important info on the card, then the side arrow button reveals more details.

Creating big tabs show which sponsor are Online and if the user wishes to see All sponsors.

Take aways: what did I learn?

A UX designer plays a crucial role in product development by focusing on creating a seamless and satisfying interaction between users and the product. They are responsible for understanding user needs, conducting research, creating wireframes and prototypes, and collaborating with cross-functional teams to ensure that the final product is user-friendly and intuitive.

Throughout the development process, UX designers learn to empathize with users, design user-centric interfaces, conduct usability testing, and iterate based on feedback, ultimately striving to enhance the overall user experience and optimize the product's usability and functionality.

Thank you!

I appreciate you taking the time to check out my work.

Sobrii prototype

Sobrii main

Hit 'R' to reload the prototype to see the splash screen.

Next case study

robbmiller

Get in touch

RobbMiller art

robbmiller

Get in touch

RobbMiller art

robbmiller

Get in touch

RobbMiller art

Jump to section

Organizing Data

Organizing Data

I gathered data from the recorded interviews and began categorizing input from the interviewees.

Personas

Personas

Personas

Using data from all three ideal users, two personas were created.

Using data from all three ideal users, two personas were created.

Empathy Mapping

Using personas created from data acquired from interviews.

Card Sorting

In order to evaluate or generate ideas for the information architecture, I chose to do a open card sort using the website Optimal Workshop.

Going into it I felt like I had created a simple sitemap that would work well. I learned that there was still plenty of room to improve the information architecture with combining, moving, renaming, or deleting content.

Original Sitemap

Revised Sitemap

User Flows

User Journeys

Usability Testing

Bringing the sketched wireframes to a mid-fidelity level helped to flesh out the elements and I was able to make it a working prototype to begin testing.

I conducted video testing which I was able to record and review later more in depth. I was lucky I was able to have a couple of my original interview participants back to do prototype testing.

Testing Results

After completing my testing I was able to take the data and chart out the metrics to see how my prototype measured up.

Preference Testing

Preference Testing

Preference Testing

I took screens I had designed with a few differences and did preference testing.

I took screens I had designed with a few differences and did preference testing.

I took screens I had designed with a few differences and did preference testing.

Peer Reviews

Peer Reviews

Peer Reviews

Using high-fidelity designs I worked with peers and had my work critiqued.

Using high-fidelity designs I worked with peers and had my work critiqued.

Using high-fidelity designs I worked with peers and had my work critiqued.

Accessibility

Seeing how my design tested with accessibility changed the look quite a bit.The most important part of how users engage with the app is how accessible it is. I changed course and created a design that passed with a minimal AA rating.

Fields

I really liked the idea of using gradients throughout the various screens. Gradients don’t do particularly well with accessibility.By eliminating the gradient background and eliminating the glass effect, I created fields that pass accessibility standards.

Buttons

By doing a contrast check with the Plugin A11y, I was able to see my buttons did not pass to AA standards. By choosing a darker hue of the branding colors I was able to make them work better for accessibility.

Orientation

Moving the greeting lower offered more room for the motivational graphic to be larger. Putting the pagination below and larger informs the user that there are five pages in total.

Sizing

By adjusting spacing to create a more uniform look, I was able to increase the bottom navigation.

Contrast

All fields reflect the solid white with a black stroke so fields are much more visible. The branding colors did need to change to a darker hue to pass AA standards.Simplifying colors creates more separation and contrast.

Signifiers

Take aways: what did I learn?

Throughout the development process, UX designers learn to empathize with users, design user-centric interfaces, conduct usability testing, and iterate based on feedback, ultimately striving to enhance the overall user experience and optimize the product's usability and functionality.

Thank you!

Thank you!

Thank you!

I appreciate you taking the time to check out my work.

I appreciate you taking the time to check out my work.

I appreciate you taking the time to check out my work.

Hit 'R' to reload the prototype to see the splash screen.

Hit 'R' to reload the prototype to see the splash screen.

Going into it I felt like I had created a simple sitemap that would work well.  I learned that there was still plenty of room to improve the information architecture with combining, moving, renaming, or deleting content.

Seeing how my design tested with accessibility changed the look quite a bit.
The most important part of how users engage with the app is how accessible it is. I changed course and created a design that passed with a minimal AA rating.

I really liked the idea of using gradients throughout the various screens. Gradients don’t do particularly well with accessibility.

By eliminating the gradient background and eliminating the glass effect, I created fields that pass accessibility standards.

By doing a contrast check with the Plugin A11y, I was able to see my buttons did not pass to AA standards.

By choosing a darker hue of the branding colors I was able to make them work better for accessibility.

All fields reflect the solid white with a black stroke so fields are much more visible.

The branding colors did need to change to a darker hue to pass AA standards.

Simplifying colors creates more separation and contrast.