UX Designer, Musician, Psychologist, and Animal Whisperer
I spend most of my time thinking about how to make the human experience simpler. Good design is integral to this goal, especially on the web. After several years in the customer service industry, where I found joy in working with people to address concerns and solve problems, I decided I needed to delve deeper into the world of online human behavior, with the end goal of minimizing cognitive stressors and subconscious pain points. I strive to build simple, intuitive, and highly functional content.
Get In Touch
I'd love to hear from you
Enhancing Vi
Consultation and Research in Auditory Cognitive Neuroscience and Music Cognition
Vi is an AI running coach created by LifeBEAM that is housed within a pair of biometric sensing headphones and a connecting neckband. Vi takes cues from your pulse, respiratory rate, and step rate to give you real-time coaching as you’re running. LifeBEAM hired me to provide empirical data on the most motivating and effective sounds for exercise with a focus on running, and to help test their beta product.
The Research
When I began my research, the LifeBEAM team was focused on integrating Spotify and developing Vi’s spoken phrases, milestone indicators, and step rhythms. Given that music and sound profoundly affect emotion and mood, there were many opportunities to improve these sounds and better motivate Vi’s runners. In order to eliminate my own biases and zero in on universal pain points, I had LifeBEAM’s usability leader take me through their beta tests, and go over the other runners’ responses. Using their feedback, I distinguished and prioritize the most important auditory cognitive phenomena from the exercise science concepts I researched.
Presentation
In my presentation to the team, I taught them how different elements of music like rhythm, timbre, tempo and key affect different areas of the brain, and how responses to stimuli in those areas affect movement and emotion. I gave them a quick crash course on how athletes use sound to improve their performances, and why different rhythms, keys, and tempos might make them want to dance or move. I went on to explain in more detail how the mechanisms of music cause improvement in exercise before presenting my most pertinent empirical findings. My presentation functioned much like an open discussion. I explained an important concept, we discussed its relevance to the specific sounds it could improve, then I fielded questions about how they could best apply the concept to their design. After I had presented all of my findings, I summarized takeaways and fielded ending questions about the most important auditory motivators.
Given LifeBEAM’s product launch schedule, the team pivoted the product to add cycling and chose not to focus on sound development. The world's first AI running (and now cycling) coach can be found here.
Ladder Digital
UX Consulting
Ladder hired me to increase usability, enhance user flow, and fix visual issues with the trial version of their marketing tactic playbook. The playbook has hundreds of strategies paired with simple descriptions and illustrations, which can be selected to create a unique pipeline. The trial product generates a short, tailored list of strategies users can download and add to their calendar.
The Process
My first conversation with the CEO and Head Strategist at Ladder covered what changes they thought were needed and who they thought would be using this app. Since I had already illustrated over 400 marketing tactics for their playbook, I was very familiar with the original product. I put myself in the client’s shoes to see how a marketing professional or budding startup founder might try out their services with the trial version. I tested the trial product’s functionalities and learned how changing customer input influenced the program’s output. I charted personas with different marketing goals and how they would navigate through the app to gain an understanding of how one’s thinking might direct their answers to the questionnaire. I restructured the questions with a more “top down” approach, so that users could start with bigger, more concrete questions and move to the more subjective, possibly mutable ones. This would initially make users feel more secure with their answer choices, which could help them feel more comfortable choosing details down the line.
Original Design Teardown
New Landing and First Question Page
During my visual teardown, I noticed a few incongruences with data input types, visual objects, and branding. Another designer and I adjusted general sizing to fit with Ladder’s existing product, and updated functionalities like page scrolling and next/previous page buttons to aid users’ understanding. We adjusted font and icon sizes to be more easily visible and legible. We added descriptive text when data input options were not inherently clear to marketing newbies, and visual elements to indicate missable functionalities (such as a darker box with a visible scrolling mechanism to show that a field had more hidden options below).
Landing Page
First Page of the Questionnaire
Fourth Page of the Questionnaire
Growth Plan Page (result of the questionnaire)
We presented our teardown and design solutions to Ladder’s Co-Founder and their Head Strategist. The discussion included details of how this trial app could create better tailored outputs, and therefore offer better proof of value to potential clients than Ladder intended. Our critiques of their app covered design conventions in Ladder's brand (and how we could better align the design of this app with them), functionality, mobile responsiveness, how and for what purposes their users would interact with the app, and how to increase marketing opportunities for their services within their product. Our designs were then passed to Ladder’s developers. You can experience it and build a free growth plan here.
Eco-Origami
UX and UI
Bernie Peyton, an origami artist with international acclaim, hired me to redesign his 10+ year old website. His site hosted his blog and some images of his work, but did little to actively engage users and was difficult to navigate. My goal was to create a simple website and branding assets that would appeal to a varied audience and boost Bernie’s online presence.
During our first in-depth conversation, I asked Bernie open-ended questions and discovered he had two goals for his site: to highlight his work in origami education, and to display images of his work in a simple, scrollable way. The challenge lay in creating a site that would appeal to three potential audiences: peers of Bernie’s in the origami world, beginners looking for inspiration and folding diagrams, and fine art enthusiasts. These demographics spanned a range of ages and nationalities, thus I had to make sure my designs were easy to follow despite knowledge gaps in technology and culture.
After creating a few branding guidelines, Bernie and I reviewed a few artists’ websites with to determine his preferences for image displays, blog formatting, menu optimization, and information hierarchy. From this meeting, I began mocking up a new design.
I used our audiences and my knowledge of human behavior to create several user flows, which I leveraged to make high fidelity mock-ups. Bernie needed to be able to bring up images of his work on his phone to show when he travels, so I chose to display Bernie’s images on a single page with a lazy loading mechanism (i.e. as you scroll, more images are loaded. This speeds up the site and allows for a greater number of browseable images). Each image has a hover functionality to let users know they can click to open the image in a lightbox. I cleaned up the rest of his site, re-organized his menu options, and made buttons and actions clearer.
Bernie didn’t like using prototype software like Invision, so I created a communication strategy to demonstrate my designs without using software he wasn’t familiar with. Because our initial planning had been so productive, Bernie had few critiques. We met with his preferred team of developers, and I evaluated their development ensure elements remained true to my designs. The end result is a better functioning website that reflects the simplicity of Bernie’s art while elevating its perception. You can see some of Bernie’s work, and get in touch with him at BerniePeyton.com
Fresh Prints
UX Design for Mobile
Fresh Prints helps students start their own custom apparel business on their university campuses. They provide the mentorship and infrastructure, and students provide the sales and some marketing. During my time at Startup Insittute, three other web design students and I worked with Fresh Prints to create a responsive mobile version of their new website.
The Process
We began by talking to the students business owners to determine specific features they desired for the new website and mobile version. We addressed current issues they faced, and began to brainstorm solutions.
The tricky thing about Fresh Prints' model is that it does not function like a typical e-commerce site. Instead of clicking on a design and purchasing it immediately, the user must reach out to a student brand ambassador (business owner) and work with them to place their perfectly customized order. The website will assign you a student ambassador if you are not familiar with one already, or if you are not a college student. The brilliant thing about this system is that each order is completely unique. All art is created by Fresh Prints' in-house artists, and re-worked (with unlimited revisions) until the user is completely happy with it. However, e-commerce tradition and instant gratification tends to turn users away from this longer, more involved process. Thus, our primary challenge was to engage the customer and guide them through the matching and customization process with as few stressors as possible. Also, because Fresh Prints' primary demographic is college students, we needed to make the process visually entertaining. We based several design choices on this necessity.
Each of my cohort-mates and I were responsible for translating one page of Fresh Prints' new website designs for mobile. I chose to tackle their gallery of images. I have included the images Fresh Prints sent me and my mobile mock-up below.
The bottom banner here indicates that the user has already matched with a student business owner. If the user were to click the banner, a contact window would put them in direct contact with them. If the user has not been matched with a business owner yet, the banner would take them to the matching page.
I was also tasked with creating a verison of the Fresh Prints home page. This page served multiple purposes. The primary goal was to explain how their unique ordering process works and get the user to contact a student brand ambassador. Secondary goals included showing a few design and apparel options and attracting more student ambassadors. Below is a rudimentary mock-up.
You can find Fresh Prints here. For more information on Startup Institute, check them out here.
Ladder
Marketing Illustrations and Wireframes
Ladder is a digital marketing agency with a unique collection of over 2,000 marketing tactics. The tactics are easily browseable on Ladder's portal, where users can select and test them out.
Each tactic is accompanied by a written description and an illustration. My task has been to create those illustrations. To date I have done just shy of 400 of them. The creation process is quite simple. I am given the description, and if I am unsure of any of the terms I do some research until I have total comprehension. I then begin conceptualizing the terms. My goal is to create the least complicated image that I can. Sometimes copy is necessary to explain the concept, and sometimes I can simply mock-up systems to indicate the settings to which the tactic refers. Throughout this process, I keep company branding consistent, as all the images need to appear stylistically congruent with one another.
Below are a few of the images I have created.
Responsive Ads
Speed Up Your Wordpress Site
Pre-Fill User Data
You can try a free demo of Ladder's marketing playbook here here .
