Audigy

Web Designer
Overview
Here is a display of my work as a web/UX designer for Audigy and what I did to assist in bridging the gap between the web and design teams in the company. I collaborated with both in order to create better communication between the two. In addition, I've introduced and created a website specific style guide, including a guide for developers in order to further their understanding of design structures and color theory. I was also tasked with creating wireframes and high-fidelity prototypes of upcoming projects as well as existing projects that were multi-functional for landing pages and over 150 client websites.
Role & Tools
My Role: Web Designer, Assistant UX Researcher

Tools: Adobe XD, Microsoft Teams, Outlook, ClickUp, Photoshop

I was initially brought onto Audigy in order to better bridge the gap between the design and web teams, communicating with both in order to find better solutions to web and design problems that would work for all teams involved. I also worked closely with the marketing team to bring in their specific needs to my design solutions. In order to do this, I curated a new style guide that not only included a member-facing guide to look over and approve, but also a separate developer-specific guide that not only showed how the design should be presented, but also gave a bit of an educational tilt in order to allow for better usage in the future. The reason for this is that I noticed while talking with my colleagues that there was a bit of a gap in knowledge when it came to how to apply certain designs and colors. At present, I'm currently working with the team to try and implement a process that includes high-fidelity mockups in order to eliminate guesswork almost entirely.

Throughout my time in the company, I was also given the opportunity to do website design reviews, communicate across teams to provide feedback on confidential projects, as well as interview and speak with members so that I could gain better insight into their wants, needs, and concerns with their own websites. Combining all of this, I was able to take that data and create better solutions that took the form of new and improved questionnaires, guides, and internal structure changes.

My designs and templates were implemented and further iterated on to create not only websites, but landing pages as well. I also constructed mobile versions of sites, and often operated in a mobile-first style of design to ensure that everything worked together across platforms. Often, I would also present to the member directly with variations and give informed opinions to allow them to choose whichever design best worked with their brand while also being accessible, balanced content and imagery, and was pleasing to the eye.

Image of landing page design

Landing page mobile and desktop example - click for fullview


My last project at this company was leading the process for an entire design overhaul of our company's templates. As Audigy has been around for awhile, I was able to get insight into their company's needs, pain points, and their developed target user personas. Through this, I conducted a quick competitor's analysis in order to see how other similar companies are operating and structuring their web designs for audiologists and, more recently, over the counter hearing aid sales.

Image of a competitor's analysis

Competitor's analysis snapshot

Through looking at a variety of our competitors, I was able to ascertain that while Audigy has a strong relationship with their members and a good hearing aid dispensing program, their websites are both outdated and difficult to customize fully. In addition, many were difficult to navigate in comparison to their more modern competitors and I hoped to change that with my new designs. I also collaborated with the senior developer on the team in order to figure out what kinds of designs were needed and what I was able to do since we were working within the confines of Wordpress. Thankfully with Gutenberg, I was able to have a lot of creative freedom when it came to those things. We hoped to gut the backend of the templates as well and essentially start anew so that the user experience could be seamless both for the member and for the developers on the team in the backend!

Image of a low-fidelity mockup

Low fidelity mockups

Image of a mid to high fidelity mockup

Mid-fidelity mockups


With a lot of the initial set up complete, I went on to structure 3 low fidelity mockups in order to structure out how the block patterns on Wordpress would look as well as get a general feel for how one might set up their website depending on their needs. I wanted to be sure to have card sets that could function as both product display and service cards. Versatility in design was the key at this point. In addition, I quickly designed some general sites to see how one might want to design their website - for those, I focused more on aesthetic, look and feel rather than structure. As I presented these to the stakeholders, we agreed to move forward with the first template listed below, known as the "Beyond Template".

After getting approval for the Beyond Template design, I then went on to create a more complex design based on a combination of our current limitations, our "shoot for the stars" dreams, and most importantly the wants and needs of our clients. For this new round, I created the Altamid Template, featuring sleek gradients and a modern feel.

Image of a high fidelity mockup

Altamid Template design