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.

Process

  • Strategy development
  • User research
  • UX design
  • Usability testing
  • Prototypes

Challenge

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.

Process

Strategy Development

I sat down with the stakeholder to understand the business objective, background information, and requirements for the design. We would later regroup several times throughout the design cycle to revisit the strategy and ensure advancements were being made.

One area we discussed was structuring the backend system to support the creation of multiunit (MU) properties. The only difference between listing a single versus multiunit property is that the multiunit property would have unique information about each unit.

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

Business Requirements UX

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.

Wireframe A

Wireframe B

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

Data Filtering Option

Majestic Analytics Tool

UX Design / UI Design

Majestic Analytics Tool

Data Filtering Option

Majestic is one of the top link intelligence databases used to analyze backlink profiles. It is brimming with valuable information for SEO, but the presentation of that data leaves a lot of room for improvement.

My goal with this redesign was to make it easier for users to find the data they need within Majestic’s interface itself, which would ultimately help inform their SEO strategy.

Process

  • Personas
  • Information Architecture
  • Sketches
  • Interaction Design
  • Prototypes

Challenge

The challenge was redesigning the CMS dashboard to be more modern in design and user-friendly.

Process

User Research

From G2 Crowd, I took 10 users and their reviews to extract patterns from them. From there, I developed two personas: agency and in-house SEO.

These personas would be used to help inform the design, keeping in mind their goals and motivations.

User Personas

Content structure

The next step was to organize the information. The database has several tools and reports, but their most utilized feature is checking the backlink profile of a website, which I focused on in my design concept.

They have two types of reports that generate the same data, but different date range: Fresh and Historic Index reports. The Fresh Index report displays backlinks that were obtained from the past 90 days and Historic displays backlinks older than that. On top of the date range difference between reports, they also split the reports by Referring Domains and Backlinks (or URLs).

As one user wrote, “It is very confusing trying to understand when is the best time to use which and how to bridge metrics you pull from both.”

UX Task Flow

I combined the Fresh and Historic index data into one index as well as combine the Referring Domains and Backlinks reports into one. Now, when you visit the Backlinks report, you’ll find the referring domains displayed in rows. You can find backlink information from those domains by selecting the drop-down arrow in the first column.

Content Structure

Data Table UI Design

Seeing as how the Fresh and Historic indexes were separate, I went with the assumption that that separation of data is important for some users. While I combined that data into one presentation, I added a date range selector to give users the control to choose the dates from which they want the data. This allows them to view backlinks from the past 90 days (fresh index) or all of the backlinks (historic).

Calendar UI Design

Drilling into the data

Different users have different goals and questions they have to answer. For a tool to appeal to many users, it needs to provide them the option to only view the data pertinent to their needs in any given situation. To address this, I included a Columns filter that allows users to choose the type of data they want to see in the table.

Columns Filter Design

Result

The result is a modern design that incorporates features to make it easier to analyze data within the interface. I’m aware that this design can be considered a drastic upgrade from the current site, and I didn’t address how reprogramming the reports will work. This was a personal project, and if I were a UX/UI Designer for them, I’d definitely conduct user testing and explore the requirements to implement this design.

UX Reward Points Program

Reward Points Program Redesign

UX Design / Marketing Design / Content Writing

Reward Points Program Redesign​

UX Reward Points Program

Reward points can be a great incentive to customers. A customer purchases your service or product and she’s rewarded with points that can be used toward a future service or product. Going from point A to point B seems straightforward enough, so why wouldn’t more customers redeem their points? That was the question I sought the answer to in my role as UX Designer for BoutiqueHomes. I was asked to optimize the reward point redemption process to increase purchases in the Marketplace and indirectly increase bookings.

Process

  • User research
  • Customer journey map
  • Heuristic evaluation
  • Wireframes
  • Prototypes

Filling in the gaps

Users receive an email two days after their stay. The email informs users they have received reward points and includes a link to their dashboard where they can redeem them. At this point, there are several possibilities for why users would drop off. A customer journey map, user interviews, and internal feedback helped pinpoint areas of improvement and missed opportunities.

Reward Points Customer Journey Map

Dashboard confessionals

No matter how persuasive an email is, the open and click-through rates cannot be controlled. On the flipside, the dashboard where the emails link to can be controlled. An updated navigation made the Reward Points page more visible, use of a side panel brought the reward points calculator above-the-fold, and typographic changes prioritized content relevant to users.

Confirmation page

Redeeming points was only one part of the equation. The other part was to encourage users who have redeemed them to make a purchase in the Marketplace. After users have clicked the button to redeem their points, they’re redirected to a confirmation page where it lets them know when they can expect to receive their gift card. A few clickable products and a CTA button to the Marketplace encourage users to visit the online store.

Confirmation Page Design

Result

An updated email and redesigned dashboard pave the way for an easier reward point redemption process. Buried below layers of design, the reward points program is now more visible and discoverable than before. For the first time since the program’s launch, users are now redeeming their points.

Mobile Responsive Restaurant Web Design

Tomato Joe’s Pizza Ordering Process

UX Design / UI Design / Branding

Tomato Joe's Pizza Ordering Process

Mobile Responsive Restaurant Web Design

Tomato Joe’s is a pizza restaurant in Valencia, California. Their pizza is great, but their pizza ordering process could be better. In my redesign concept, I focused on simplifying the process of customizing a concept pizza with the goal of improving mobile user experience.

Process

  • Heuristic evaluation
  • User research
  • Task flow
  • Mockups

Challenge

Their pizza ordering process occurs on a website separate from theirs. While the website is responsive, valuable real estate is wasted on unnecessary white space and repetitive copy.

Pizza Website

Process

Research

During my sketches, I stumbled into several questions.

  • Should “Customize” and “Add to Order” be options for every pizza from the main menu?
  • When should users be asked to select a size and quantity before adding it to their cart?
  • How can I best present options for which side of the pizza a topping should be on?
  • How can I best present options for how much of a topping should be added?

To answer those questions, I analyzed their website for insights into what they prioritize most as well as their competitors.

Pizza Ordering Flow Chart

Design

Pizza Menu

Upon landing on the pizza menu screen, I placed a “Customize” button next to the “Concept Pizzas” heading. This allows users to skip scrolling through concept pizzas and customize their own from the get-go.

Below each pizza is the option to either customize it or add it to one’s cart. When a user selects “Add to Order,” a modal pops up where she can select the size and quantity and add it to her cart.

Pizza Add to Order Design

Pizza Add to Order

Custom Pizza

Customizing a pizza comes with many more options and, therefore, I designed the “Customize” button to direct users to a new screen rather than a modal pop-up.

Toppings are broken into categories. Selecting the down arrow reveals options for each category where users can check the checkbox or uncheck to remove a topping.

Pizza Custom Menu Design

Custom Crust Menu Design

A challenge I ran into was listing the quantity of a topping from least to most. Tomato Joe’s offers five options for quantity. It was unclear whether “light” or “single” was the least—and where “extra” fell in the spectrum. To answer the question, I asked several users:

Imagine you’re ordering pizza and choosing how much of a topping you want to add. You see this list: Triple, Extra, Light, Double, Single. From least to most, how would you order those options?

60% of the users I asked had stated “light” was the least and “extra” to be the most, which informed my design.

Custom Cheese Menu Design

Custom Cheese Menu

Result

Redesigning a pizza ordering process was a learning experience, as it was more challenging than I thought. Customization offers a number of options—and making those options available to users without overwhelming them with information overload requires research and careful design.

ABC Mobile Responsive Design

Animal Behavior College Website

Web Design / Content Strategy / SEO

Animal Behavior College Website

ABC Mobile Responsive Design

The company website was overdue for a responsive website as more than 50% of its traffic were coming from mobile devices. An agency helped us design two templates for our website. They provided us mockups for two types of pages: homepage and general content page. From these mockups, I developed the company’s first design system and drove the mobile responsive redesign project from concept to execution.

Process

  • Style guide
  • Content strategy
  • On-page SEO
  • Information architecture
  • Mockups

Process

Before trying to apply the agency’s templates to the rest of our pages, I first decided to create an official UI style guide that would help direct all future designs as well as help the developer. At the time, no official style guide had been used, leaving many pages with inconsistent fonts, font sizes, and even font colors.

A style guide would ensure every page had a consistent look and feel, which would help strengthen the company’s brand and identity.

 

Style Guide

The mockups provided a good foundation for a style guide. There were buttons, banners, and highlight boxes. However, they were static mockups and a few elements required more elaboration, such as hover states of buttons and links as well as the placement of components.

I selected two new typefaces that were more modern than the company’s existing mix of Arial, Helvetica, and Verdana.

I chose Fira Sans for the display font because it was friendly, easy to read, and fast to load. I chose Open Sans for the body text because it was slightly more structured and wider than Fira Sans, making it easier to read on mobile devices.

The style guide came to include:

  • Illustration of how content should be laid out
  • Use and layout of headers
  • Brand colors and their uses
  • HTML attributes for links and images
  • Font icons

Style Guide

In addition, I broke down their mockups into wireframes to make communication between stakeholders and developers much easier as there was some confusion as to what “templates” were.

Mockups and Wireframes

Content

It was decided the content should be reviewed and updated, so my next step was to proofread each page and optimize it with SEO in mind. I fixed typos and grammatical errors; included keywords when and where appropriate; added internal links with title tags; and deleted any pieces of content that were either repetitive or unnecessary.

After editing the pages, I reviewed each one with business stakeholders for approval. Once approved, it was time to start coding them.

 

Development

A CMS was in place, but it pulled many unnecessary styling and code from Microsoft Word. It was easier for me to copy and paste the text from Word into Atom and code it from scratch.

I implemented on-page SEO techniques, such as internal links, title tags, and alt attributes. Since the developer took the style guide and created CSS classes for each element, I was able to create buttons and custom bullet points on the spot.

 

Challenges

Sitemap / Drop-Down Navigation

There were a few unaddressed parts of the website we had to work through. First, we had to decide on the sitemap since we had planned to remove a few pages. Then, we had to design how the drop-down navigation would appear on desktop and mobile.

ABC Sitemap

For the mobile menu, I proposed making the contact functions (e.g. call) into buttons that sit on the same line as the menu function. However, the third option became the final navigation.

Mobile Responsive Navigation Iterations

Footer

The second challenge was deciding what to keep or remove in the footer.

Old Footer vs. New Footer

Result

We redesigned the website to be both modern and mobile responsive. In comparing the nine months post-launch to the same period in the previous year, mobile organic traffic increased by 57.77%, goal completions by 64.73%, and goal conversion rate by 13.66%.

Online School Mobile Responsive Design