MBA Portal Design

MBA Portal Design

UX Design / UI Design / Design System

MBA Portal Design

MBA Portal Design

Due to the nature of this work, designs are not shown below.

FCTI operates a network of multi-bank ATMs (MBAs) that provide cardholders of small banks and credit unions access to their accounts. On these ATMs, partners also have the option to run campaigns or display advertisements. Creating these campaigns, however, was a manual and time-consuming process. Seeking a way to automate the campaign creation process, they hired me as their first UX/UI Designer to design the end-to-end user experience of the MBA Portal.

Process

  • Requirements gathering
  • Information architecture
  • Sketches
  • Wireframes
  • Prototypes
  • Design system

Requirements gathering

After interviewing stakeholders and internal team members, the objective of the portal boiled down to two tasks: 1) Provide users a self-serve platform to submit their campaigns and 2) Allow FCTI to review campaign submissions. The portal was to be simple and straightforward enough for their wide range of users.

Requirements Gathering

A picture worth too many words

User research and internal interviews revealed graphics to be the biggest pain point for both personas. To address this, I designed several reminders in the Content step of the multi-page campaign creation flow. Placeholders are thumbnail versions of the actual graphic size and orientation, providing a visual cue to partners. Size dimensions are explicitly written beneath each label. As an extra layer of prevention, I suggested the system reject graphics that don’t meet the dimension requirements and trigger an error message to users if unqualified graphics are still uploaded.

Wireframe Examples

Scalable design

As part of the project, I supplied a style guide for this new product. Using the marketing website as a base, I extended beyond its colors and components to develop a scalable style guide for the MBA Portal.

Scalable Design System

Result

After several sessions of usability tests and design iterations later, I delivered high-fidelity mockups of the MBA Portal. FCTI regains the hours previously lost to submitting campaigns on behalf of partners. In addition, users are given more control over the campaign creation process and have more insight on when their campaigns will be reviewed and published. The result is increased operational efficiency, higher ratio of correct graphics being submitted, and more satisfied partners.

Portal Design Result

Contact Form Design

Contact Form Redesign

UX Design / Marketing Design / WordPress

Contact Form Redesign​

Contact Form Design

I led a responsive redesign of the contact form task flow for Animal Behavior College. A major source of their student enrollments comes from users filling out the contact form. I worked with stakeholders and programmers and used user data to design their contact form process to be responsive.

Process

  • Design review
  • Stakeholder interviews
  • Conversion rate optimization
  • Wireframes
  • Content writing

Background

The process of getting their information is split into two contact forms or screens.

The process begins with the first contact form. After users fill it out, they’re taken to another page with a second contact form. Any input on this page is optional. However, as an incentive for users to submit this second form, this page says it will check whether or not there is an externship location in their area.

If the zip code is valid, they’re taken to the second (and final) Thank You page. If the zip code is invalid, users are directed to an error page where they can try again.

Contact Form Flow Chart

Challenge

An agency had previously provided desktop and mobile mockups for essentially two templates: one for the homepage and one for a content page. Also included was their redesign of the first contact form. They didn’t include annotations, so the challenge was designing contact forms and Thank You pages that were in line with their design, but also met business goals.

Process

The first step was to take their design of the first contact form and improve on it based on stakeholder preference and usability. Their design had a couple of usability issues. First, the proximity between the radio buttons was too narrow. The form displayed radio button options on a single line. Not only does this decrease the tap target size of each option, but also the burden was then on the user to accurately select his desired option on his mobile device.

The second issue were the field names. While having field names within the field makes for a shorter form and cleaner look, it can become a frustrating experience for the user. When field names are within the field where placeholder text would be, they disappear upon selection of the field. This may lead users to forget the information they should enter and potentially leave the form altogether.

Working off of the agency’s mockup, I created wireframes for the:

  • First contact form
  • Second contact form
  • First Thank You page
  • Invalid zip code page

 

First contact form

Aside from displaying the radio buttons vertically and moving the field names above the fields, I also designed one field per line as opposed to having two fields on the same line. I did this to help make filling out the fields easier for users on mobile. I also changed “What program interests you most?” to “Which program interests you most” for grammatical purposes.

Contact Form Iterations

Second contact form and first Thank You page

The existing second contact form included some text I felt were unnecessary. For example, above the fields read: “Please fill in the fields below.” Another bit of unnecessary microcopy was the “Almost Done!” text after the Country field.

I removed these from my wire and instead wrote “Meanwhile, see if we have a location near you by telling us a little more about yourself” above the second form.

From past experience with this company, I knew the original microcopy was added to get users to fill out the form, so I reworded it and placed it outside of the form on top.

I also switched the red font color to the brand’s navy blue color because users might mistake the red text for an error message.

Previous First Thank You Page

Thank You Page Design

Second Thank You page

If users enter a valid zip code into the second form, they’re directed to this page. This one needed the most improvement because it was the final page in the taskflow and a great opportunity to improve the conversion rate.

Old Second Thank You Page

The existing second Thank You page read “Congratulations! We have locations that provide hands-on training for ABC students residing in zip code _____.” Then, in red again, “Please contact us at (800) 795-3294.”

After users get to this page, they receive a call from the company. To help prepare them for the conversation, stakeholders suggested creating a list of topics users should discuss with the Admissions Counselors. They had brainstormed other ideas, but nothing was ever set in place.

I looked at their list of ideas, selected the ones I felt would be best for conversions and provide value to users, and included my own ideas. For the second Thank You page, I:

  • Wrote new copy
  • Added a click-to-call phone number
  • Made a bullet point list of topics the user should discuss
  • Selected an image
  • Added a few testimonials
  • Added social media buttons
  • Included a carousel of student images

The result was a content-rich Thank You page designed to keep the user engaged and excited about his chosen course.

New Second Thank You Page

Invalid zip code page

If users enter an invalid zip code on the second contact form, they’re directed to this page. For this wire, I edited the copy to have a warmer, human-like voice. The existing error page read: “I am sorry the zip code you have entered is not valid or is currently not in our database. Please try again.” I changed that to “Unfortunately, we don’t have externship locations for students residing in _____.” I mentioned externship locations to remind the user why he had entered his zip code in the first place.

 

Review

From my wires, the graphic designer made mockups, which we presented for review. Stakeholders preferred to preserve the colors of the original forms (i.e. yellow top bar and red button). They also wanted to keep most of the original copy on the first Thank You page and invalid zip code error page.

The second Thank You page was completely approved. However, they requested a few more changes to our mockups.

After a few iterations, we had our final designs.

Design Iterations

In the beginning of this process, I had originally suggested having an inline error message on both contact forms. Rather than the user selecting the button and then seeing error messages for either missing fields or invalid data entries afterwards, I suggested having a tooltip display during the form filling process.

This would help users fill out or correct any fields on the spot, which may reduce the time it takes for them to fill out the form. Furthermore, this feature would eliminate the need for an invalid zip code error page.

I had presented a wireframe for this tooltip as well as a video demonstrating the behavior of the tooltip to the developer and stakeholder. While the idea was approved, it didn’t make it in the final design due to programming issues.

Result

With a contact form that is responsive on all devices, users have an easier time filling out the form, which increases the potential for more enrollments.

Contact Form Responsive Design

Epiphone Ecommerce Design

Epiphone Website

WEB DESIGN / MOBILE RESPONSIVE / ECOMMERCE

Epiphone Website​

Epiphone Ecommerce Design

OVERVIEW

Epiphone is an American musical instrument manufacturer known for their acoustic and electric guitars. Their website was dated and due for a modern upgrade. For this ecommerce design, I focused on redesigning the ecommerce grid and product detail pages with consideration to mobile responsiveness and usability.

ROLE

UX/UI Designer

DATE

2019

Ecommerce Grid UI Design

Filters

An important feature of any ecommerce site is the ability to filter products to avoid decision fatigue. After reviewing Epiphone’s current products and conducting competitive analysis, I designed a filter for the ecommerce grid page. Filter options include the product type, brand, and price. Set to “Featured” products by default, the sort feature allows users to view the latest products or products in ascending or descending order of price.

Interaction Design

Product Detail Page

The product detail page gives each guitar the stage it demands. A bold hero sparks interest and a balance between words and imagery, modern layout, and smart use of trendy UI elements pull the user further down the page. Paragraphs accompanied with bulleted summaries aid with skimming and paginated reviews save vertical real estate.

Outcome

Modern and mobile responsive, this ecommerce design concept for Epiphone highlights the qualities of its products and makes it easier for users to find the perfect guitar for their musical needs.

How UX Can Amplify Your Digital Marketing Efforts

How UX Can Amplify Your Digital Marketing Efforts

How UX Can Amplify Your Digital Marketing Efforts

How UX Can Amplify Your Digital Marketing Efforts

Looking to boost sales? Are your digital marketing efforts not working? You may need to take a deep look at your product or service and optimize its user experience.

User experience refers to the overall experience your customer has during their interaction with your product or service. UX encompasses a person’s emotions, attitudes, and opinions about her experience using your website or app.

Web Designer vs. UX/UI Designer

Unlike a traditional web designer, a UX/UI designer identifies the problem and takes a user-centered approach to solve it. The UX design process includes: talking to customers, using research to inform decisions, testing and iterating designs, and ensuring business requirements are met and technical constraints are considered to produce a win-win solution for everyone.

What Does UX Design Have to Do With Marketing?

You might be asking, “What does UX design have to do with marketing?” It’s simple. The goal of UX design is to design products that make your customers happy. What makes them happy? Intuitive interfaces that help them accomplish their tasks. It also helps if the interface is easy on the eyes and maybe even delightful to use.

One way to think of UX is Yelp. Companies with a good Yelp rating often reflect positive user experience and, conversely, those with a bad Yelp rating reflect a negative one. No amount of marketing can turn those negative reviews into positive ones. Those customers have already had first-hand experience with a company’s offering. If that’s the case for you, it’s time to step back and understand how you can improve their experiences.

Why are your customers hesitant to purchase? What is preventing them from submitting a contact form? Getting to the root of the problem—why your customers are frustrated—will guide you to the solution. Perhaps you had too many competing CTAs on your landing page or your error messages weren’t specific enough. Listening to your customers and providing solutions to their problems set your business up for success. Designing a website, app, or product from a usability standpoint lets users know you care to address their pain points and goals and that your product or service can meet their needs.

UX Working With Marketing

Marketing is great at driving traffic to your website and conversion rate optimization (CRO) excels in closing those leads into sales, but both of these tactics end there. They don’t take into consideration what happens to users after they become customers. UX bridges this gap and delivers on what you’re promising in your marketing campaigns.

When you invest time improving the product or service you’re marketing, you’re giving a reason for your customers to talk positively about you. Given that people are 4 times more likely to buy when referred by friends, these word-of-mouth recommendations can cut your marketing spend and increase customer retention.

UX is an important part of your digital marketing strategy. Aside from creating an inherently marketable website or app, it can also positively impact the rest of your organization, including your customer service and engineering teams. Before spending another dollar on a paid ad or commercial, look internally at your product or service. It may be time for an update.

6 Signs Your Legacy System Needs Modernization

6 Signs Your Legacy System Needs Modernization

6 Signs Your Legacy System Needs Modernization

Legacy System Modernization Company websites are often the top priority when it comes to modernizing a brand, leaving the legacy systems that support those websites behind. A legacy system is a backend interface or application that plays a critical role in day-to-day business operations. It’s often built on outdated technology with little to no consideration of user experience. They can be a custom homegrown system or a system of multiple applications. Legacy systems pose several problems ranging from operational inefficiency to even security vulnerabilities. While your backend could get by with a repair here and there, it might make more financial sense to replace the system altogether and rebuild on a more secure and growth-driven platform instead. If you’re on the fence on whether or not your legacy system is truly in need of modernization right now, read on below.

6 Signs You Need to Modernize

1. Your development team spends more time fixing than developing

Every day seems to come with a new issue. The save function is no longer working, data goes missing, or an invoice was never sent. Your programmers should be spending more time developing new functions for your expanding business—not fixing repeat issues or those that could have been prevented with a better infrastructure.

2. Fixing one area of the application breaks another

You know there’s a problem with the underlying technology when resolving one area of the system causes the failure of a different area. Sometimes, it’s not always clear-cut that those two events are even related to each other either. Perhaps one of the applications was updated at the time or maybe hosting was the root of the issue. You start to become weary of making any fixes at all.

3. Difficult, or impossible, to implement new features

As your business grows, your strategy or offerings may change with it as well. You may want to add new functions, but are often limited by what the current technology can accommodate. At this point, you begin making compromises for what can be technically achieved while still making progress with your goals. Your legacy system is holding you back from expanding your business.

4. Special training is required

Your employees don’t understand how the system truly works. They might be wondering what an input field is asking them to enter or where to go to complete a task. Their misconceptions and lack of knowledge may cause them to make grave mistakes, costing you time and money to correct.

5. The system frequently crashes or shuts down

It’s not uncommon for the backend interface or business application to crash. Your development team have looked into it, but can’t pinpoint the root of the issue. Fortunately, the system does end up rebooting and your employees can resume their work. While the system always gets back up and running, those few seconds or minutes can greatly hinder your business and not to mention your customers’ perception of your company.

6. Workarounds are often the solution

Your employees are turning to workarounds to perform their jobs. They have stopped emailing your IT team for support because they know their priorities fall low on the list. Out of necessity, they have found ways to make the legacy system work for them—even if it’s a temporary solution. Sure, they get the job done, but these quick wins run the risk of being lost after an update or cause an issue with the code. Worst is that these employees might be teaching their coworkers these workarounds too, further spreading a nonviable solution. There are a number of problems with legacy systems, but at the end of the day it’s up to you to decide what is best for your company. Modernizing your backend interface or business application is a major undertaking—costly at that. However, when done right, rebuilding your system for sustainable growth can also save you a lot of headaches and money in the long run.
How UX and SEO Can Work Together

How UX and SEO Can Work Together

How UX and SEO Can Work Together

How UX and SEO Can Work Together

UX and SEO Go Hand-in-Hand

User experience (UX) refers to the end-user’s emotions during the interaction with a product or service. UX design is the process of improving a website’s usability through user research, testing, and reiterating. Search engine optimization (SEO) is also a process of improving a website, originally focusing on increasing visibility in search engines. It achieves this through on-page SEO, backlinks, and other methods. With Google’s algorithms getting smarter—RankBrain, I’m talking to you—the goal of SEO has shifted from satisfying Google bots to satisfying users.

SEO Now Focuses on UX

It can be said that the focus on UX within the SEO community began when mobile devices became a popular way of accessing the Internet. As more users turned to their phones to do a Google search, Google needed to provide faster and more mobile-friendly results. Hence, the first mobile-related ranking factor in July 2013. What better way to get publishers to adopt your idea than to make it an SEO ranking factor, right? 😉 Aside from having a mobile responsive website, there are several traditional SEO factors that involve UX. In fact, UX impacts SEO more than you might think. Poor usability, mystery meat navigation, and lack of content can hinder a website’s SEO efforts. Let’s take a look at factors that affect both UX and SEO.

Factors that Impact Both UX and SEO

Page Speed

The time it takes for a page to load affects UX and SEO. Users’ attention spans have reduced from 12 seconds to 8 seconds, and 40% of users will abandon a page if it takes more than 3 seconds to load. For the rest of the users waiting for websites to load, they’ll be frustrated in the moment, especially when feedback is nonexistent. When users get frustrated, they’ll likely not return. The next time they search for a website that offers similar products or services, they might click on a different website in the SERPs. Thus, negatively affecting the other websites’ SEO efforts. Page Speed Meme There are several ways to improve a website’s page speed. One (free) tool to diagnose how Google views your page load time is PageSpeed Insights. It gives you a page speed score on both mobile and desktop along with recommendations to reduce page load time. Minifying code bloat, enabling browser caching, and compressing images are all ways you can speed up your website. A note about images: Before you reduce their files, make sure they have optimized meta data. Fill out the title, description, and keyword fields of the image file. Save the file with a descriptive name that includes your keyword (e.g. cosmetic-dentistry.jpg). Filling out this data and saving the file with your keyword helps its discoverability in image search.

Site Structure

Site structure, or information architecture (IA), is an SEO ranking factor. A well-organized site structure with content arranged logically plus a clean global navigation to reflect that is beneficial for both users and Google. Users depend on the navigation menu to discover and find their desired pages. Google uses the sections and sub-sections to determine the website’s theme. When organizing your pages into sections and sub-sections, use your keywords as the menu labels. If you use breadcrumbs, which you should, use your keywords as the labels as well. Using keywords where appropriate and relevant in your navigation helps users understand the topic of a page without having to click on it. Links should explicitly describe their target pages. Having broad terms as navigation links or using “Click Here” are both examples of mystery meat navigation. Mystery Meat Navigation

Dwell Time

Dwell time, or time spent on page, is one data-backed way to measure user engagement. Long dwell times usually indicate high engagement whereas short dwell times may mean user dissatisfaction. One way to keep users on your page is by ensuring your content is exactly what they need. In SEO, content is king. Although content is sometimes neglected in the final product where large beautiful images are instead prioritized. Despite the rise of image-heavy web and mobile app experiences, there’s still tremendous value in having high-quality content. (I mean it is one of the three biggest SEO ranking factors.) Plus, images aren’t sufficient for those with disabilities. When writing content, make sure you keep the scent. Write descriptive title tags and meta descriptions that include your keywords. Then, reiterate the topics of your pages by including your keywords in the page titles and/or H1 tags. Matching what users see in the SERPs to your actual page reassures users they’re on the correct page. It’s not enough to have well written content though. Part of high-quality content is having the right typography to get the message across. Font choice, size, and color all play a critical role in the readability of content, especially on mobile screens. UX should enhance the reading experience for users.

Broken Links

No one likes using a website littered with links leading to 404 pages—not even Google. Broken links are a sure-fire way to lose users because 1) they’re not valuable to the user and 2) they can reflect negatively on your company because it shows disregard to the quality of your website. From an SEO perspective, broken links prevent Google bots from crawling your pages. This is especially bad when your backlinks point to 404 pages. Imagine if all your hard work to get authoritative sites to link to you diminished because the wrong URL was used. UX and SEO teams should work together to identify and resolve broken links. They should either write 301 redirects to alternative, but relevant pages, or provide a user-friendly 404 error page.

Accessibility

Bouncing off broken links, websites should be accessible to users who have disabilities and/or who depend on screen readers. Both UX and SEO teams can help those who use assistive technologies by writing descriptive title tags for links and images. They should also write descriptive alt text for images. Title tags should describe the target pages of links and alt tags should describe images. You should include your keywords in these HTML attributes as long as they’re relevant and appropriate. Doing so provides context to screen reader users and serve as a relevancy signal to Google. As you can see, UX and SEO are quite complementary to each other. UX depends on SEO to be visible in search engines while SEO depends on UX to retain users. Prioritizing UX and SEO in the early stages of web development can only benefit your final product. When executed flawlessly, you can have a high-performing website optimized for user satisfaction and ultimately conversions.
UX Design Benefits

3 Benefits of UX Design

3 Benefits of UX Design

3 Benefits of UX Design User experience (UX) has become a buzzword as of late, but it has existed for a while. As companies become more competitive and Google emphasizing the need for great user experience, it is more pertinent than ever to invest in UX.

What is UX?

UX is the process of designing digital experiences with the user in mind. UX design is a user-centered approach to designing solutions that anticipate user needs.

3 Benefits of UX Design

1. Increases conversions

Good UX helps ensure marketing efforts don’t go to waste. You may rank on the first page in Google or have a compelling Facebook ad offer that drives users to your website, but if your website suffers from bad UX those users will abandon.

2. Lowers development costs

How often have your programmers rushed to release a new feature only to spend the following three months fixing it? You’re not alone. Dr. Susan Weinschenk found that developers spend 50% of their time fixing problems that could have been avoided in the first place. In addition, fixing the problem after development is 100 times that of fixing it prior to the project’s completion. Spending the time to do user research, explore different solutions, consider edge cases, test ideas, and finalize the design all before the design is even sent to your programming team can save you valuable resources spent on rework.

3. Boosts brand perception

Your website is an extension of your brand. A well-designed website that goes above and beyond meeting user needs says your company cares about users. An outdated website that lacks the most basic of functions may signal otherwise. Good UX has the power to keep your existing customers happy and increase customer acquisition. UX is about making your users happy. Investing in UX not only benefits your users, but also your employees. It improves the bottom line, keeps overhead costs down, and strengthens your brand.
Usability Heuristics

10 Usability Heuristics for User Interface Design

10 Usability Heuristics for User Interface Design

Jakob Nielsen’s Usability Heuristics Explained

10 Usability Heuristics for User Interface Design

In the beginning of a project, it’s easy to start brainstorming design ideas. The usability issues are evident, and you have ideas for how to solve them. Before jumping straight into design, you may want to consider conducting a heuristic evaluation.

A heuristic evaluation is a method to identify usability issues in a user interface (UI). During the evaluation, you compare the UI to a set of predefined usability heuristics. The most common set of heuristics are from usability consultant Jakob Nielsen.

Evaluating the UI against these principles allows you to objectively assess a design. Plus, it serves as documentation, which can help you gain buy-in from stakeholders. Below are the top 10 usability heuristics you should refer to next time you’re auditing a website or product.

10 Usability Heuristics for UI Design

1. Visibility of system status

The first principle states that the system should always keep the user informed of its status. Displaying system status can take on the form of a progress bar, loading spinner, or change in button color. These microinteractions provide users instant feedback, so they always know what’s going on. Rather than wonder if they need to submit an image or fill out a form again, they rest assured knowing the system is computing their actions.

Visibility of System Status
A confirmation in VSCO informs users their image was imported successfully.

2. Match between the system and the real world

A website or product should speak the user’s language. Sometimes, businesses bog users down with long promotional content before they present the information pertinent to the user’s search. Or worse, content will include system-oriented language that no one other than programmers would understand. Keeping the copy relevant and concise will help users complete tasks faster.

In addition to language, this principle states that an interface should match the mental model of users. A mental model is a user’s idea of how an interface should work. Users develop a mental model based on their experiences and beliefs. An example of matching the system with the real world is designing a navigation menu that conforms to how a user would find information in a brick-and-mortar store.

Match Between System and the Real World The Metrolink app uses words users would say when referring to train tickets and the location where they would physically store them.

3. User control and freedom

Users should have the ability to correct their mistakes. They should be able to take control of their actions and have the freedom to leave the interface without an extended dialogue. Users who feel empowered interacting with your website or product even if they make a mistake will have a much better experience than users who have to contact customer support to have their mistakes corrected for them.

User Control and Freedom An undo function allows Evernote users to revert to a non-formatted note.

4. Consistency and standards

It’s important for your website or product to have a consistent UI and standardized processes. A button that always turns a darker shade of blue on hover or confirmations that always appear at the top of the page teaches users how an interface works. If a button turns blue on one page, but turns orange on another page, users may be more hesitant to take their desired actions.

In addition to having a consistent UI, a design should also follow platform conventions. A couple of platform convention examples include the placement of the company logo on either the top left corner or in the top center of the page or a magnifying glass icon to represent the search function.

Consistency and Standards The Starbucks Locations page follows the design pattern of many other Locations pages with the list of locations on the left and a map view on the right.

5. Error prevention

While an interface should support undo (see heuristic no. 3), it would be more ideal to design an interface that prevents users from making mistakes in the first place. One way to prevent users from making mistakes is providing a confirmation message before the system registers the action. This way, users are forced to verify whether or not they meant to delete an item from their cart.

Error Prevention ID.me displays a tooltip with password requirements. As users type in a password, each requirement turns green to indicate it is met.

6. Recognition rather than recall

Along the same lines of the error prevention heuristic, an interface should be designed in a way that allows users to complete tasks without having to rely on their memory to do so. All objects, actions, and options pertaining to a particular screen should be visible on that page. This minimizes memory load and assists with faster completion rates.

Recognition Rather Than Recall Google Maps displays recent searches to allow users to select from one of their previous destinations.

7. Flexibility and efficiency of use

An interface should be flexible enough to cater to both novice and advanced users. Some users may be visiting a website or product for the first time, which may mean a higher learning curve. In contrast, some users may already be experienced with an interface and may seek shortcuts to complete frequent actions.

Flexibility and Efficiency of Use

Novice and advanced users have access to the same data, but Google Analytics offers Segments for advanced users who would like to drill into the data.

8. Aesthetic and minimalist design

Minimalist design refers to an interface that is stripped down to only the core functions and content the support a user’s goals. Irrelevant content clutters the design and can detract the user from completing their tasks.

Aesthetic and Minimalist Design Nordstrom’s layout is minimal, but not plain. White space separates groups of information from each other and the size of the buttons draws users’ attention to the CTAs.

9. Helps users recognize, diagnose, and recover from errors

Users will make mistakes whether they triggered them or the system did. An interface should clearly explain the error, so users can take the appropriate action to correct it. Error messages should be written in the user’s language (see heuristic no. 2) rather than system-oriented language.

Helps Users Recognize, Diagnose, and Recover From Errors

An inline error message in Best Buy’s checkout process specifically informs users which field needs to be corrected.

10. Help and documentation

This last heuristic states that every interface should be equipped with help and documentation. These usually come in the form of a help desk or FAQ section. Providing these resources allows users to find answers to their questions, which results in fewer calls to the customer support team.

A help desk should be organized by the user’s goals with articles that clearly define the steps to achieve them. Apply heuristic no. 2 regarding the user’s voice and add images to support the text.

The ultimate goal of a heuristic evaluation is to identify usability issues objectively. You may present this evaluation by annotating the design or creating a spreadsheet. In most cases, you may want to prioritize the issues based on level of effort and impact on usability—creating a roadmap for improvements.

Help and Documentation Shopify’s help center places a search bar at the top and divides content into broad categories with descriptions of each sub-section below.

Music Website Design

Sun + Sound Website

Web Design / Mobile Responsive / Branding

Sun + Sound Website

Music Website Design

I designed a website for a concept company called Sun + Sound. The idea stems from having visited several festival websites and identifying areas of improvement. This company is a concert promoter known for its annual summer music festival.

Process

  • Personas
  • Affinity Diagramming
  • Sitemap
  • Wireframes
  • Prototypes

Challenge

The challenge was to design a website based on both business and customer goals. Since this was a mock company, I had to approach the project from a stakeholder standpoint as well as that from a user.

Process

The first step was to decide on the target audience and their needs and goals. From there, I determined the goals of having a website. This data would inform the features and functionalities the website would need to meet those goals.

 

Target Audience

The target audience includes people who: enjoy watching live music, have the money to spend on concerts, and listen to particular types of music. In the table below, I list the user’s needs, pain points, and goals.

 

Goals

The mock company’s primary goal is to sell tickets to users followed by promoting their other events. For users, their goals are being able to purchase tickets and find information for upcoming events on the website.

 

UX Design

I started the design process by collecting the features and functionalities that would enable the company and users to achieve their goals. I also incorporated unique features, such as a Spotify playlist, that would help differentiate the company’s website from competitors.

Affinity Diagramming

From there, I organized the items into categories and created a sitemap.

UX Design Sitemap

Wireframes

Once the information architecture was set and the website requirements were established, I designed wireframes for three pages. I chose these three because I wanted to design the homepage, a level-1 page, and a level-2 page. Included in my wires are annotations for the web developer.

Annotated Wireframes Web Design

Result

Since this was a design concept, there are no results. Although if I were to assist with the development of this website or a similar one, I’d incorporate user data and conduct usability tests to inform the design.

Backend Interface Mobile Responsive

BoutiqueHomes CMS

UX Design / UI Design

BoutiqueHomes CMS

Backend Interface Mobile Responsive

BoutiqueHomes is a vacation home rental company. To stand out from the competition, one initiative was to allow property owners to list their accommodations under a single listing. A single listing would provide travelers the full picture about a property and make it easier for them to book multiple accommodations at the same time.

The problem was their existing content management system (CMS) wasn’t set up to allow such properties to be published. In collaboration with the founder and developers, I redesigned the CMS.

Background

There were several challenges in this project:

  • New product structure: Stakeholders wanted to offer property owners the ability to split sections of their properties into multiunits. At the time, only single units were being listed.
  • Unfinished designs: A new design for most of the pages had already been created before I joined, but required more work for a seamless user experience.

Strategy Development

The first step was determining how the properties would be laid out. The existing CMS created a listing for each accommodation. Since the information about the property as a whole was the same, this created duplicate information across the accommodations and required duplicate entry on the admin’s part.

Instead of replicating the pages required to list a property for each accommodation of a property, I proposed isolating the data required for a property listing (“overview”) and having pages specific to the accommodation information separate. This way, content that pertains to all accommodations were filled out once and content specific to each accommodation would be filled out on a one-by-one basis.

Publishing Requirements

Task Analysis

With the strategy in place, I analyzed the current workflow of admin users to identify pain points and areas of improvement.

A takeaway from this exercise was revisiting the information architecture. Different admin users work on different parts of the property listing, but they were sharing the same page to enter that data.

Task Analysis

Partial Design

As mentioned, a partial design was created before I had joined. I mapped out the fields from the original pages to the partial designs. The partial designs had content in different places as well as new and missing fields. After interviews with the stakeholder and developer, I was left with the fields we would keep in the final design.

UX Mapping

Card Sort

I developed a card sorting study to understand how users would group the fields into pages based on their needs for the new design.

Card Sorting UX

Design

Based on the information I had learned during the research phase, there were several features I wanted to incorporate into the final design.

  • Easy way to switch between subunits within a property
  • Progressive disclosure
  • Collapsible tabs

Sketches

I sketched ideas for the multiple pages of the backend interface. Storyboarding was one technique that helped me visualize the workflow of admin users for the Images page.

UX Sketches

Wireframes

The stakeholder and I sat down and sketched our ideas for how the template should look—primarily the navigation. After exploring different designs, we had two concepts, which I asked users for their feedback.

Wireframes

Users described the designs as “clean” and “well structured,” but were split between the two concepts. Ultimately, we moved forward with design A since its navigation on the left sidebar allowed for important content to appear higher on the page.

Usability Testing

From there, I designed clickable prototypes that provided a near reflection of how the experience of publishing a property will be in the redesign. After a few rounds of usability testing, I iterated the design, received the go ahead, and prepared the final handoff for programmers.

Result

The result is a finished interface that keeps the familiarity and functions of the old interface, but accommodates multiunit properties and streamlines several functions for improved usability and greater efficiency.

Style Guide UI

Backend Dashboard UI