I start the user experience process with research and analysis. Before creating any wireframes to determine the features and functionality, I learn users' behaviors, pain points and needs to understand their goals and improve their experience.
I'm a problem solver for design issues. I design clean and minimal user interface while making sure not to sacrifice functionality just to achieve an aesthetic. Making a design attractive is extremely important but clarity and functionality are always primary.
I enjoy designing a variety of visual content such as brochures, advertisements, logos, packaging, trade show graphics and apparel graphics. I also support site management, define design guidelines and create brand strategies.
I'm a 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.
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青岛天橙娱乐软件ios 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.
Interactive prototype for Bon Appétit Recipe built with Bootstrap.
bon appétit is a popular food magazine since 1956. The slogan is "Where food and culture meet." Their website, bonappétit.com, consists of several sections; restaurant+travel, entertaining+style, drink, people, event, videos, test kitchen and recipe. Since the website has a massive amount of content, the recipe section is almost buried beneath other sections even though it is very popular. For that reason, I designed a didicated recipe website, "bon appétit Recipes" based on the existing website design.
Although the website has high traffic, it looks very disorganized and it doesn't have functional search options. I focused on creating an easy-to-find navigation with some key criteria (diets, meal types, cooking times and ease of cooking) and re-categorizing the sections to improve findability.
Creative Direction and UI Design
These interactive web interface patterns are implemented to improve usability and user experience.
Scoped search with the search criteria
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 青岛天橙娱乐手机版
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.
This case study is to analyze the world's largest beer archives and outline the user behaviors, pain points and motivations to identify user needs and solutions to enhance usability.
Note: * I did this case study in February 2015 before BeerAdvocate's recent site renewal. I worked on this UX case study as I'm a passionate craft beer enthusiast and BeerAdvocate was one of my favorite websites at that time.
BA is a global, grassroots network, powered by
an independent community of beer enthusiasts
and industry professionals who are dedicated to
supporting and promoting beer. In addition,
they publish BeerAdvocate magazine.
BA website is a free resource to:
Site users hail from all over the world, making BA one of the most diverse and largest beer communities.
Untappd is a hybrid website / app consisting of content source and is a task-based application for craft beer enthusiasts. It has a clean, ituitive design; it's easier to figure out how to navigate through the pages, post comments and rate beer than BeerAdvocate.
Untappd helps you to connect with your friends and track your specific-beverage check-ins. It also provides tasting notes, breweries/brewpub information, a robust rating system and a badging/achievement structure. Untappd will offer you beer recommendations based on what you and your friends have been enjoying. Also, they allow you to earn a number of badges for completing a variety of different criteria.
Untappd doesn't offer a forum which is a large part of BeerAdvocate. BA is more information oriented青岛天橙娱乐娱乐代理, enhancing the beer culture and encouraging you to communicate with other beer geeks around the world. On the other hand, one of the best parts of Untappd is that you can keep tracking of the beers青岛天橙娱乐网站地址 you've had and what score you gave them. Also, you can check what your friends are drinking or where they're hanging out. Just check their profile where you can toast and comment on their beers.
He visits the website occasionally to trade beers he cannot find locally and check the beer information such as styles, rating, brewery information. He found the website useful but it's a little difficult to use it on the small screen of his iPhone as the website doesn't adjust the navigation and page size well on mobile. They have an app but since he doesn't use it all the time, he prefers not to download it.
She checks beer ratings, the user forum, rare beer release information, and beer and pub/brewery reviews. She also checks bar and brewery reviews when she travels to look for a place to visit. She likes to comment on the forum sometimes but finds it a little difficult to keep tracking the conversations as the website offers a "watch forum" function but it doesn't work well sometimes; the forums she checked didn't come up on the watched forums page.
He checks the website to find the beer rating, styles or more detailed information such as which year the beer was brewed when he finds rare bottles. He felt that their search engine is "picky" and not so accurate for search results. Also, if there was typos it doesn't show even similar names. He wishes the search engine would have more flexibility.
BeerAdvocate (BA) is a content source website which is known as one of the largest beer archives in the world. The landing page introduces the latest issue of BeerAdvocate magazine, a promotional product from their store, new posts on the forum, tweets and a few ads. The color scheme is clean and crisp, however, it lacks visual hierarchy; there are too many links and the size balance of all the elements are about same. Users might be confused which setion is most important.
The advertisements and promotional products are standing out really strong (some are Flash or GIF animations); more than the contents that users want to fi nd. Advertisements are important income resources for the company but it doesn't look professional with all the ads screaming at the users to buy.
The top navigation is divided into two sections: the main navigation under the logo (Magazine, Forums, Beers, Places, Events, Trading Members and Store), and the secondary navigation (Your profile, Inbox, Alerts and Logout). When you mouse over one of the links, the drop-down menu won't appear unless you exactly mouse over on the small triangle next to the text. In terms of usability, it is not easy for users because the text is very small to read. The top navigation has the large numbers of links but they can be merged into one to simplify a mega drop-down navigation.
The large number of beer styles are listed as text links on one page which require users to scroll a long page (*The only half of the page is shown). From the usability stand point, it is not user friendly unless it is a well structured parallax website with links for ech section.
Instead of the individual style text links, having a drop-down menu on the top of the page always under the "Beers" category would be much easier for users to reduce the number of clicks.
Clicking one of the styles, you'll be navigated to the next page showing all the beers in the style.
The landing page needs to be re-organized to change the cluttered look青岛天橙娱乐ios of the page including the numbers of advertisements and links on the same page. Also, creating a clear visual hierarchy and regrouping the contents and links青岛天橙娱乐app网站 are important; all the text links are same sizes, SNS icons have all different color and distracting user's eyes in the top of the pages. For these number of reasons, users won't be able to recognize where they can find information they need quickly.
On the other hand, the competitor Untappd website doesn't have any ads on the landing page. Also all the text links and metaphors links have a simple look in the same color scheme. The low traffic links are placed on the footer to simplify the top navigation青岛天橙娱乐首页地址 that draws the users' attention and navigates them to the information seamlessly without interruption.
The top navigations can be changed to a mega dropdown menu for accommodating a large number of links青岛天橙娱乐app网站 by proper grouping.
Throughout the site, remove duplicated SNS links from multiple locations to clean up the page青岛天橙娱乐检测注册. The social media text links can be metaphor icons in same color scheme as the BeerAdvocate logo and placed on the footer. This solution makes the page look cleaner yet the icons can draw proper attention.
On the beer style page, convert all the beer style links into drop-down menus to ease the search青岛天橙娱乐手机版 and add "sort by" drop down menu as well. This solution can avoid adding two different style pages and look less confusing for users.
The website has overwhelming information and needs some updates mainly to organize the page structure and navigations. However, BeerAdvocate has been one of the most popular beer archives in the world. They provide a large number of information for craft beer geeks all over the world and help them connect to each other and enjoy a sense of camaraderie. Some updates will help with re-organizing the website and will help to build up a sense of fellowship over delicious craft beer for all the craft beer enthusiasts around the world.