My job as a UX designer is matching technology to the way people think. I unite products and users, design and experiences.
I'm a problem solver for design issues. I design clean and minimal UI while making sure not to sacrifice functionality just to achieve an aesthetic.
As a designer and developer, I help my clients to bridge the gap between design and development. I also support site management with various CMS's.
I'm a UX/UI designer with a passion for the creative process and the application of user experience best practices. I know how to balance a strong focus on details without losing sight of project deadlines. I'm intrigued by what UX design can reveal about product perceptions by customers; Combining beautiful designs and great usability makes users happy.
An app for busy pet owners to feed their pet remotely
PetPal is a pet feeding app that I designed to help busy pet owners feed their cats/dogs in a safer, easier and more reliable way. To accomplish this, I designed a solution that not only dispenses food remotely but also provides users interactive safety features in just a few taps.
My main goal was to fully understand user needs and motivations and to remove any pain points and concerns.
A common concern of pet owners is that if they leave a full bowl of food out then their pets will eat too much. There are many auto feeders on the market. Feeding cats with an auto feeder is easy but making sure that the feeder worked properly or that your cats actually ate the food is not. Notifying pet owners when the feeder successfully worked and when the food bowl became empty will give extra relief to pet owners.
My job as a designer is matching technology to the way people think. I went through the research methods below to deeply understand user needs, their behavior and pain points:
Based on the research, I discovered users’ common pain points and user needs.
As a busy pet owner, I want to:
Kevin has two very active black cats. Since they are still young and very active, they easily become hungry and ask Kevin food every few hours. Kevin can’t give them a bowl full of food because one of the cats can’t pace himself and pukes often due to eating too much or too fast. Sometimes, Kevin comes home late at night after hanging out with friends and can’t feed his cats on time. He needs to feed his cats a small amount of food without staying home so his cats won’t be starving.
My design process included:
Storyboards are an effective and inexpensive way to capture, relate, and explore experiences in the design process. I visualized two stories of why and how users interact with the product to convey my design ideas. This step helped explore some ideas and communicate related issues and solutions to others.
Based on the storyboards, I made two quick paper prototypes for usability testing. Paper prototyping is a fast and effective way to get early feedback.
I conducted heuristic evaluations to identify all the major issues as well as potential solutions and prioritized each problem. Next, I created the development plan for the upcoming tasks to complete the project within the timeline.
Through heuristic evaluation, I came across a number of potential usability issues. One of the major issues I found from the paper prototype was the lack of error prevention. During the heuristic evaluation, one of the evaluators said that he wanted to review all the settings (food portions, time and recurrence) on one screen before clicking the “Confirm” button.
Another evaluator also mentioned the concern about how she’ll know when a problem happened. Although I added a notification when an event successfully occurs, an evaluator felt that an error alert is far more important than the notification for when it successfully works.
As a solution, I added an alert setting to the 2nd step and a review page as the 3rd step.
After making these revisions, as each step has less information, the alert toggle is not buried in other settings. Also, after clicking the “Set Schedule” button, now the user can review the settings and make final adjustments without clicking the “Back” button.
Based on the early feedback, I created low fidelity wireframes. In this step, I focused on the flow and hierarchy of the UI elements.
In this process, I spent most of my time designing the schedule feeding process as simple and clear as possible yet I also added the flexibility which allows the final adjustment on the final overview page. I conducted A/B testing with the final two designs and received insightful feedback from users for making the final edits.
Building on our findings, I was able to design an app which allows users to:
UX enhancements for an existing app
The DiverLog+ app is the full-featured dive log application that gives you all the information you need, including dive data, location, and dive site information, tank and buddy information, gear bag, and more.
The DiverLog+ app was originally designed by a developer who mainly focused on the functionality of and overlooked user interaction and usability. My challenge was to take over the leadership of the project, analyze the existing app and provide “quick win” solutions within a short period of time before redesigning the entire app.
To evaluate the user interaction of the DiverLog+ mobile app, I reached out to three DiverLog+ app users and conducted usability testing and interviews. This allowed us to gain insights on their needs, motivations, and frustrations to clarify underlying issues.
I created a quick win case study to analyze the issues and user needs in-depth. Based on the findings, I outlined the solutions and improvements and shared with the stakeholders
Although users frequently used the app to record their dive information, they continued to struggle to reach the information quickly when they needed it. Interviews with users revealed that they often had a hard time selecting the right icon on the primary location (Tab Bar) because the icon designs are not intuitive without a label. In addition, the icons are overly small because there are too many (total 7) on the small Tab Bar.
We also discovered that all three users only used some of the key features for their dives. They claimed that they prefer a simpler interface to get to the features they use the most because having too many icons in the primary location is a little distractive.
New Web Development
MP Swim is a line of innovative, technologically advanced performance-enhancing swim gear driven by the ultimate desire to improve the sport of swimming.
Our challenge was to refresh the design of the MP Swim website, adapt it to current usability standards and build global strength, recognition and brand awareness before the Rio 2016 Olympics.
I conducted a comparative analysis against PUMA.com which is not in direct competition with MP products but may have similar interface elements, processes and design patterns that are worth reviewing as they are also targeting a passionate and youthful audience and enhance exciting visual and innovative products.
The MP website worked fine when it was built but it's become outdated compared to the latest standards. The existing website was not responsive. Responsive web design sites are fluid which means the content moves freely across all devices and all screen resolutions. Additionally, Google ranks websites with responsive design higher in search engine results. This is essential to take into account with regards to search engine optimization (SEO). Also, all the text was embedded in the banner graphics which had significant drawbacks for SEO because the pages contained no real text to index.
Additional improvements we focused on were new product categorizations and filter/sort tools. The swim goggle categorization, listing only the product names, was not user friendly because new users are not familiar with the product lines and might not know which swim goggles match their swim type (e.g. competitive swim, fitness, etc.). It's very time consuming for users to open every single product page and read all the product descriptions to find the best goggles for their need.
Persona development is an important part of understanding potential visitors and customers. After multiple user research and ideation sessions with the team, we created three personas for this project. The primary persona is a 17 year old named Josh who is a passionate, energetic competitive swimmer and takes swim training 4-5 times per week. These three personas helped to create an ideal, reliable and realistic representation of a specific audience.
Before wireframing, I drew some sketches. Sketching helps me to visualize the initial layout and the basic concept of the interface. It also helps me to express my ideas quickly and share them with the team. After reviewing all the questions and the basic UI, I moved onto wireframing to evaluate functionality and features.
Prototyping is essential for resolving usability issues before coding. I created hi-fidelty prototypes which provided detailed feedback from users on something we needed to more closely resemble in the final product. In this project, we especially spent our time on redesigning the product overview and detail pages to improve product search which was a serious issue on the previous website. We saw engagement numbers increase siginificantly.
Brand Story, Style Guide and eCommerce Web Development
This is a design challenge to develop a brand identity for a small business in the local community. I came up with an idea for a local nano-raoster / coffee shop which wants to start selling their fresh roasted coffee beans online. The primary goal of the project is to:
Based on the potential user research and interviews, I created two personas; The primary persona, Justin, who is a 32 year old industrial designer and the secondary persona, Crystal, who is a 28 year old freelance writer. These personas helped to visualize their busy, active lifestyle, preferences and frustrations.
I created a brand story and a visual style guide which both reflect the findings above.
"Zuk Coffee Roaster is a local nano-roaster / cafe located in South Park, San Diego, CA. We only purchase ethically sourced coffee beans to support coffee grower. We focus on roasting the freshest quality of coffee beans daily, in-house by using a miniscule small batch roaster (selling coffee beans less than 48 hours from roasting) and serving the most aromatic cup of coffee from simple 'vintage' methods to make people smile."
I focused on designing a mobile-friendly, eCommerce website incorporating large text / buttons, simplified product information and minimal required fields for checkout to make all the shopping processes easy on small screens. Also, I provided an option to check out as a guest based on the user research.
I collected user feedback if the mobile size wireframe has any difficulties for new users to find the information they need and purchase the products quickly.
After adjusting the interaction details, I created a high fidelity prototype to conduct usability testing with actual users and to validate concepts.
I conducted usability testing with five participants.
The usability testing showed a high overall usability satisfaction level. However, the interface design leaves room for improvement. The research result showed that, especially for participants over 40 years old, the font and button sizes were still too small. Also, a few users commented that the checkout process as a guest was a bit confusing. "If I want to register, it was equally confusing which section to fill in."
Based on all the findings, the font and buttons were made larger to improve the readability. In addition, I redesigned the guest checkout and made the process clearer by adding specifications for which section to fill in.
White Labs manufactures liquid yeast for professional and amateur brewers and vintners. Whitelabs.com is a branding presence website which features beer, wine, distillation, education and online ordering. Each beverage type link on the top navigation bar contains four main categories; product information, lab services and supplies and technical information. The main users of the website are professional brewers, vintners, distillers and advanced home brewers. They want to find yeast strain data and fermentation data such as attenuation and flocculation rates or fermentation temperature.
The website has some usability issues which are explained below. However, many users frequently visit the website so they learn where to find what they need over time; the usability depends on the users' effort and time invested. The usability issues make it more difficult for new users to find information. The website needs improvements to make it more approachable and useful by delivering the right information in the right place.
I interviewed three actual users and learned more about their frustrations, needs and behavioral patterns.
He visits the website about once a month to look at the yeast strains and the fermentation data and a couple of times per month to order yeast online.
"In general I think their website is nice but contains a lot of information so it could be simplified to make navigation easier."
He's visited the website many times over the years for checking the seasonable yeast availability, online ordering and tasting room hours and location.
"I think I always found what I was looking for. Not a lot there to keep me coming back regularly, but I'm not sure what they could do to make me visit the site more often."
He uses the website to look for information about brewer's yeasts, availability and characteristics.
"Some information seems to be duplicated in multiple places. It's hard to tell exactly where I need to be going. Seems like there are multiple ways to get to the same place which leaves me a bit confused."
I conducted a case study to analyze the issues and user needs in-depth. Task based analysis were broken into four sections; landing pages, navigation, product pages and online ordering. Based on the findings, I outlined the solutions and improvements.
White Labs is a world leader in fermentation sciences for the brewing and wine making industries. Their quality products have been beloved by people around the world for decades. Unfortunately, the web usability and functionality don't match the quality of their products.
The website has a little bit of information overload. The number of links on the sub-menu under the top navigation are overwhelming and confusing for users because there are too many duplicated links. In addition, there are no specifications anywhere whether the product is for professional or home brewing. These usability issues make it especially difficult for new users to reach the right pages because users need to invest a lot of time and effort to find the information they need.
I used Adobe Illustrator for creating wireframes to visualize the initial layouts and ideas. Creating wireframes helps me to organize information for the screen and to evaluate functionality and features. I conducted usability tests on the wireframes using a think-aloud method.
User feedback: "The new design is more straight forward and easy to navigate."
I created all the elements and layouts using Adobe Illustrator and then converted them into an interactive prototype using InVision. In this project, I especially spent my time on redesigning the mega menu into a side navigation to clearly separate the professional and the amateur pages.