UX Designer

Guiding Inclusive UX for Ecommerce Success at Mouser Electronics


Mouser Electronics

Internship Project

Assessed the Mouser.com checkout process for accessibility and usability issues.



Untold Dallas

Design Project

Untold Dallas is a student project that aims to educate Dallas's many residents and visitors on the culture and history of Dallas.




Mixify

Design Project

With Mixify, sharing music becomes an encounter that brings us closer together.





Mixify

Design

Mixify, designed by Austin Todd and Chloe Hewitt is an app dedicated to putting personality back into music streaming and sharing. Through Mixify’s interface, users have the opportunity to curate and customize “mixes” that speak to them, with the ability to share mixes between users through hovering phones next to one another (using NFC chips built within devices). Users can customize mixtapes to create vintage-inspired, personalized tracks– appealing to generations young and old allowing them to seamlessly share their favorite hits. With accessibility considerations such as lyrics access and haptic feedback during hover sharing, Mixify allows users of any ability or experience level with technology to share music and create meaningful moments. Users also have the ability to earn stickers, track their listening stats, and follow the latest trends– creating a community platform for music fans.

Role
UX & UI Designer

Team
Austin Todd
Chloe Hewitt

Duration
7 Days

Design Challenge

Our challenge was to identify a target market and area of need, and design an accessible third-party mobile app where people can easily discover and share their love of music with others in the same space, in-person, whether or not they have a music service subscription or digital library.

Prototype

Discovery

Who are our users?Adults who want a way to share music with their own touch of personality.

Their MotivationWanting to explore new music.Wanting to share curated playlist with friends and family.

Their NeedsEasy to find and perform sharing function.Simplified ways to discover new music from friends and see what is trending

Their Pain PointsSharing music can be combersome and confusing.Playlist lack the personality of previous music mediums.

Ideation

User Interviews

First, we interviewed someone within our target demographic, a 45-year-old male who misses the physical media sharing of the not-so-distant past.

Framing The Solution

SharingUsers need the ability to share songs, albums, and playlists with other users. Our solution needs to make this a key consideration.

CustomizingUsers miss the personality that came with sending and receiving mixtapes. In order to inject this into the digital medium we will need to come up with a creative solution.

RediscoveringRediscovering old favorite artist is a delight to longtime music fans. We need to remove the constant attention needed to keep track of your favorite artist.

User Flow

Wireframes

Retrospective

The Mixify project for the Adobe Creative Jam taught me so much about working efficiently tight deadlines. The project timeline was one week so

Mouser Electronics

Internship Experience

During the summer of 2022, I had the opportunity to intern at Mouser Electronics located in Mansfield, TX. This was my first experience being a part of a large organization's UX/UI team and it taught me a lot about the role design has within a large organization such as Mouser Electronics. I learned new tools like UsableNet AQA and FullStory to assess the entire checkout process for usability or accessibility issues. This deepened my knowledge of WCAG and ignited my curiosity about the critical role of accessible design within a large e-commerce website such as Mouser.com. Apart from sharpening my design skills I also learned about the electronic industry.

The Ask

During my Internship at Mouser Electronics, I was tasked with assessing the entire checkout process for Mouser.com for accessibility and usability issues.

Identifying Issues

During my Internship at Mouser Electronics, I was tasked with assessing the entire checkout process of Mouser.com for accessibility and usability issues. Before I started I knew I would need a way to prioritize each issue to ensure my time would be spent solving the problems with the most impact.

Tools

I used three different tools to discover and prioritize potential issues.

UsableNET AQA
AQA allowed me to create multiple recurring tests to view accessibilty compliance over time.

Fullstory.com
Using Fullstory.com I got key analytics that helped me identify and prioritze pain points within the checkout.

Baymard Institute
Using the Baymard Institutes research I was able to suggest best practices during my solution.

Prioritized Issue

Using AQA, Fullstory, and Baymard I was able to identify an issue with the radio button input type. This issue offered me and the UX/UI team an opportunity to improve the usability and accessibility of the site with one minor change.The problem was centered around the radio buttons not being associated with the label. This affected screen reader users' ability to make their preferred selection while also increasing the number of misclicks on the pages where this error was present.To further illustrate this relationship I have included an image that I think describes it well.


This fundamental usability issue is a matter of affordances. Without the input being associated with a label, the user doesn't get any type of feedback on whether the element is clickable or not.

Whiteboarding

As a way to understand the problem better one of the senior designers and I had an impromptu whiteboarding session. This was a great way to better understand where users were clicking.


Taking data about where users were clicking out of FullStory.com led to some great insights into how large of an issue this was.

Click on image to view in full screen.

We came back from this session with a great problem statement:
For every 5 selections of the "Credit Card/Debit Card" button there is 1 misclick

Presentation

At the end of my internship, I had the opportunity to present my findings to the Internet Business Department at Mouser Electronics including senior leadership. This gave me a great first experience of contributing to stakeholders as an individual and left me confident in my ability to present abstract ideas to business stakeholders.

Retrospective

My 10 weeks at Mouser came and went quickly but the countless learning experiences have remained a pivotal experience in my early UX career. From the opportunities to brainstorm with the entire UX team to post-lunch design discussions. My internship was dense with important lessons in design and business.My internship at Mouser Electronics gave me the experience necessary to start my user experience career on the proper footing.




Up Next

Untold Dallas

Design

Untold Dallas is a student project that aims to educate Dallas's many residents and visitors on the culture and history of Dallas.




Untold Dallas

Design

In the spring of 2022, I had the honor to work alongside impactful student designers and mentors during the 2022 Dialexa EDU Program. Our team had the opportunity to analyze the rich history of Dallas, conducting and implementing persona interviews and rapid design strategies to create a functioning, robust prototype in order to educate Dallas residents about the culture and history present in their communities. I gained meaningful insights on technical implementation, the value of user research, and the importance of relying on your design team and mentors along the way. We ended the Dialexa EDU Program by presenting our findings and prototype to the team at Dialexa creating a memorable experience for us all.Through consistent feedback and hands-on mentorship from Dialexa, our team was empowered to create a design we are very proud of. **This process grew my abilities as a user experience designer exponentially. ** This experience also significantly strengthened my skills and awareness across disciplines such as business, engineering, and communications. I know that my growth as a designer and the applicable skills I have gained will extend well past these nine weeks in the program and I am so thankful for this experience.

RoleI had the role of UX Designer and UX Researcher on a team of 5 other UNT students selected by the Design faculty at UNT. Each member of the team contributed to weekly standups with our Dialexa mentors where we had the opportunity to ask questions and get advice from UX professionals.

Tools
Figma
Slack

Team
Austin Todd
+ Others

Duration
9 Weeks

The Ask

What are ways we can educate the residents of Dallas in a valuable way to foster awareness and support for the history of Dallas’ districts, buildings, local businesses, schools, people, cultures, events, etc?

Process

During this experience, we were taught Dialexa's UX process by our mentors who walked us through each of the 3 sprints: research, perform, and report.

Sprint 1: Research

User Interviews
Personas
Empathy Maps
Journey Map
Market Research
Competitive Matrix
Business Profiles

Sprint 2: Perform

"How Might We?" Questions
Crazy 8 Brainstorming
User Flows
Style Guide
Mid-fi Wireframes
High-fi Wireframes

Sprint 3: Report

Prototype
Presentation

Sprint 1: Research

Product IdentificationOur first goal as a group was to ensure we come to alignment on the products identify. Our first exercise achieved this by having each team imagine our product as a person and describing what we think this person would be like. At the end of the exercise, we voted on each other's suggestions to ensure we had a unified vision of the design direction for our future product.

Click on each image to view in full screen.

Empathy MappingIn order to better understand the humans, we are designing for we created Empathy Maps as a way to better empathize with our users. We used 2 of our personas and focused on specifics like what they are doing, saying, thinking, and feeling throughout their experience. This helped the team to have a shared understanding of the users as well as identifying what we didn't know.

Click on each image to view in full screen.

Competitive AnalysisWe used what we knew about possible competitors to identify gaps in the services offered in order to design a better product for our specific problem.

Click on image to view in full screen.

Sprint 2: Perform

How Might We?How Might We's (or HMW's) are a great exercise in identifying potential solutions. I found this to be a highly effective way to get the ball rolling during the ideation phase of a project.

Step 1: WriteWe started by writing down individual statements we think our personas would benefit from.

Step 2: ConsolidateAfter we had each written down our HMW's we consolidated them into similar groups.

Step 3: VotingWe voted as a team to decide on which HMW's would benefit our users the most.

Click on image to view in full screen.

Crazy 8'sBased on our findings from the How Might We's and earlier research we began to ideate as a group, first focusing on a wide range of ideas before converging on a few we think will benefit our users the most.We all started by coming up with 8 ideas followed by a group discussion on each team member's ideas. We then voted on the most beneficial features represented by stars.

Click on image to view in full screen.

User Flow

Click on image to view in full screen.

Mid to High Fidelity WireframesThis was when the project really came together. The entire team worked from low-fidelity to working prototypes. Style guidelines were a vital tool at this point of the project because it enable all of us to work semi-independently while also maintaining a strong visual style that unified our designs into one cohesive brand.

Click on each image to view in full screen.

Name IdeationIn order to come up with a name for our app we had a workshop in office in order to align our ideas in to one short title for our app.

Click on each image to view in full screen.

This excersise helped the group to come up with the name for our project. We landed on the name Untold Dallas.

Sprint 3: Report

ReportI definitely learned the most from this section of the Dialexa EDU experience. We were given the opportunity to present our product to the other groups of students and mentors as well as Dialexa employees in the office.

Retrospective

The Dialexa EDU was a challenging and worthwhile experience through and through. This project required strict time management of myself. Being a full-time student, working part-time, and working collaboratively with the Untold Dallas design team pushed me to work hard. Looking back on the experience I am confident the hard work was well worth it. I left the experience with a new understanding of Engineering, storytelling, teamwork, and UX design as a whole. I left his experience with a renewed appetite to continue to build my skills around design in a corporate setting.



AboutMy passion for functional, utilitarian ceramics eventually led me to discover the field of UX Design. I realized that UX Design allowed me to merge my love for design and my desire to create meaningful experiences that serve a purpose.My experience in ceramics has taught me the importance of paying attention to the smallest details and understanding how every element works together to create a cohesive and functional whole.As a UX Designer, I have honed my skills in user research, prototyping, and user testing. I have a passion for learning and continuously improving my craft, and I am always seeking new challenges and opportunities to grow. I have worked on projects for clients in a variety of industries, including healthcare, finance, and e-commerce, and have received positive feedback for my ability to understand complex problems and create simple and elegant solutions.Contactaustinmtodd@gmail.comConnect with me!https://www.linkedin.com/in/austinmt/