Jump to section

• Organizing data

• Sitemaps

• Test results

• Personas

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

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

Going into it, I felt like I had created a simple sitemap that would work well.  However, I learned that there was still plenty of room to improve the information architecture by 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 flesh out the elements, and I was able to make a working prototype to begin testing.

The testing phase has been thorough and comprehensive. I conducted video testing, which I was able to record and review later in depth. I was fortunate to have a couple of my original interview participants back to do prototype testing, ensuring a diverse range of perspectives were considered.

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 conducted 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 its accessibility. I changed course and created a design that passed with a minimal AA rating.

Fields

The fields worked well and had signifiers, so my adjustment was to simplify the color palette and use blue as the primary CTA color to make the interaction easier.

Buttons

I liked the idea of incorporating colorful buttons into Sobrii, but changing them to monochromatic, clean white and gray would make the CTAs more impactful. The design is more contemporary, and the text has enough contrast to read, even if a user has trouble viewing the variants of white and gray.

Orientation

The greeting at the top is part of the navigation geared toward the user's personal information. The bottom navigation is the user's way of interacting with others in the Sobrii community. The motivation feature was originally less prominent, but users mentioned it was a meaningful part of the app.

Sizing

Making the contact cards more condensed without removing any content made them look more contemporary, and limiting the colors lowered the number of distractions.

Contrast

Accessibility passed with a AAA rating: text sizing and black-to-white legibility.

Signifiers

A heuristic evaluation found that users felt the app was intuitive, and they effectively completed outlined tasks.

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, researching, creating wireframes and prototypes, and collaborating with cross-functional teams to ensure 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

Check out my art!

robbmiller

Get in touch

Check out my art!

robbmiller

Get in touch

Check out my 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

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

Going into it, I felt like I had created a simple sitemap that would work well. However, I learned that there was still plenty of room to improve the information architecture by 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 flesh out the elements, and I was able to make a working prototype to begin testing.

The testing phase has been thorough and comprehensive. I conducted video testing, which I was able to record and review later in depth. I was fortunate to have a couple of my original interview participants back to do prototype testing, ensuring a diverse range of perspectives were considered.

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 conducted preference testing.

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

I took screens I had designed with a few differences and conducted 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 its accessibility. I changed course and created a design that passed with a minimal AA rating.

Fields

The fields worked well and had signifiers, so my adjustment was to simplify the color palette and use blue as the primary CTA color to make the interaction easier.

Buttons

I liked the idea of incorporating colorful buttons into Sobrii, but changing them to monochromatic, clean white and gray would make the CTAs more impactful. The design is more contemporary, and the text has enough contrast to read, even if a user has trouble viewing the variants of white and gray.

Orientation

The greeting at the top is part of the navigation geared toward the user's personal information. The bottom navigation is the user's way of interacting with others in the Sobrii community. The motivation feature was originally less prominent, but users mentioned it was a meaningful part of the app.

Sizing

Making the contact cards more condensed without removing any content made them look more contemporary, and limiting the colors lowered the number of distractions.

Contrast

Accessibility passed with a AAA rating: text sizing and black-to-white legibility.

Signifiers

A heuristic evaluation found that users felt the app was intuitive, and they effectively completed outlined tasks.

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.  However, I learned that there was still plenty of room to improve the information architecture by combining, moving, renaming, or deleting content.