A-Vibe web blogs

Embrace .NET 8 for Cutting-Edge Web Development

Wed, 13 Mar 2024 00:00:00 GMT

Today, making savvy technology choices is key to business success. Enter .NET 8, Microsoft’s latest advancement in web development. Packed with tailored features, it’s designed to meet diverse business needs. Here at AVIBE, we’re excited to explore its potential. From turbocharged performance to seamless AI integration, .NET 8 promises to elevate your web applications. Let’s dive in and see how it can drive your business forward!

Microsoft .NET 8 Features

Microsoft .NET 8 is more than just an update; it’s a game-changer for businesses and web solutions. One standout feature is the significant performance boost provided by the .NET 8 runtime. This means faster and more efficient application execution, enhancing user experiences and productivity. Additionally, .NET 8 comes with robust security measures to keep sensitive data safe. Plus, new language features streamline development workflows, boosting developer productivity.

Businesses seeking broader platform compatibility will appreciate .NET 8’s cross-platform capabilities, enabling seamless application deployment across various operating systems. Additionally, .NET 8 offers impactful tools like .NET Aspire,enhancements in ASP.Net Core, improved operations through EF Core, and updates to Windows Forms and WPF.

.NET 8 is a comprehensive solution designed to elevate business and web solutions, emphasizing performance, security, and cross-platform capabilities to drive innovation and growth.

Boosting Business with Lightning-Fast Web Solutions

Here at AVIBE, we understand the importance of crafting efficient and user-friendly web applications that are essential for driving business success. With .NET 8, we ensure your web solutions are not only optimized for peak performance but also perfectly aligned with your business objectives.

With our proven track record in .NET-powered web development, we bring a wealth of experience and expertise to the table. Whether you’re looking to revamp your existing web presence or launch a new digital initiative, AVIBE is your trusted partner every step of the way.

Choosing the right technology is crucial for business success. With .NET 8, Microsoft offers a suite of features tailored to meet diverse business needs, from improved performance to enhanced security and scalability. Businesses can deliver lightning-fast applications, secure sensitive data, and adapt to changing demands effortlessly with .NET 8.

Partnering with AVIBE means gaining access to a dedicated team committed to delivering exceptional results. Our proficiency in .NET 8 ensures your web solutions not only meet but exceed expectations, giving you a competitive edge for long-term success!

Build vs. Buy: Navigating the Custom Software Decision

Wed, 11 Oct 2023 00:00:00 GMT

In the ever-evolving landscape of technology, organizations face a critical question: Should they build their own custom software or opt for the convenience of buying an off-the-shelf solution? It's a decision that can't be taken lightly, as it holds the power to reshape your company's operations, influence its budget, and ultimately shape its long-term success.

At AVIBE, we understand that this isn’t a simple choice and recognize that there's no one-size-fits-all answer; each business is as unique as its goals and needs. Your decision on whether to build or buy software is not just a technical one; it's a strategic move that can chart the course for your company's future. Let's discover the key factors that come into play and equip you with the tools to make the right choice for your business.

Understanding the Build vs. Buy Dilemma

In the world of software development, two primary paths emerge when a business seeks a new solution: custom software and off-the-shelf solutions.

Custom Software is an application developed from the ground up to meet the unique requirements of your business. Custom software is designed to address your company's specific processes, workflows, and objectives, offering unparalleled precision and flexibility.

Off-the-Shelf Solutions, on the other hand, are pre-packaged software applications or systems available for purchase or licensing. These solutions are created to address common problems faced by a wide range of businesses. Instead of customization, they offer convenience and speed of deployment.

At AVIBE, our goal is to assist you in making the right choice between the two solutions. We understand that what works forone business may not be suitable for another. With this in mind, we aim to ensure that your decision aligns perfectly with the specific goals, needs, and constraints of your business.

In this discussion,we'll explore the pros and cons of both approaches and provide you with the tools to make an informed decision that aligns with your unique circumstances. Whether you'reseeking a perfectly tailored solution or a convenient off-the-rack option, your choice should be driven by what best serves your business objectives.

Pros and Cons of Building Custom Software

Pros:

Tailored to Specific Business Needs:Custom software is designed from the ground up to meet your business's unique requirements. It aligns perfectly with your processes, workflows, and objectives. This tailored approach ensures that the software addresses your specific pain points and enhances productivity.
All-In-One Digital Tools Platform: Custom software solutions not only address specific business needs but can also integrate all your digital tools into a single, cohesive platform. This consolidation of tools creates a unified ecosystem that streamlines operations, enhances data management, and facilitates seamless communication across departments.
Greater Flexibility for Future Growth and Changes:Custom software offers unmatched flexibility. It can evolve and adapt as your business grows or changes its processes. You have control over the software's development roadmap, allowing you to incorporate new features and functionalities seamlessly.
Competitive Advantage:A well-designed custom solution can provide a competitive edge. It can be a source of innovation, allowing you to implement unique features that set your business apart from competitors. Connecting data to custom software solutions can further amplify the benefits of this tailored approach. By integrating your data seamlessly into the custom software, you create a powerful synergy that enables the generation of unique, data-driven reports. These reports provide valuable insights and analysis that cater specifically to your business's needs, making it easier to make well-informed decisions.

Cons:

Typically Higher Initial Costs: Much like choosing between renting and buying a home, opting for custom software development may involve higher initial costs. However, just as owning a home can lead to long-term financial benefits, custom software aligns precisely with your business needs, eliminatingunnecessary expenses like licensing fees, and enhancing overall operational efficiency, ultimately resulting in substantial cost savings over time.
Longer Development Times: The process of designing, developing, and testing tailored software can take more time, extending your time-to-launch.

Pros & Cons of Buying Off-the-Shelf Software

Pros:

Lower Initial Costs and Faster Implementation:Off-the-shelf solutions typically have lower upfront costs because the development expenses are distributed across many users. Additionally, these solutions are pre-built and ready to deploy, reducing implementation time.
Vendor-Provided Support and Updates:When you purchase off-the-shelf software, you often receive vendor-provided support and regular updates. This can save you time and resources in maintaining and troubleshooting the software.
Proven Track Record with Existing Users:Established off-the-shelf solutions often have a track record of success with existing users. You can benefit from the experience and feedback of other businesses that have used the software.

Cons:

Requires Adapting Business Processes to Fit the Software’s Capabilities:Off-the-shelf software is designed to accommodate a broad range of users. This means that your business may need to adapt its processes to fit the software's capabilities. This can lead to workflow changes and potential resistance from employees.
Limited Customization Options:While off-the-shelf software provides convenience, it comes with limitations in customization. You may not be able to implement specific features or modifications that are crucial to your business processes.
Potential for Hidden Costs Like Licensing Fees:Some off-the-shelf software solutions come with hidden costs, such as licensing fees based on the number of users or additional modules required for full functionality. These costs can accumulate over time, creating a situation where it can feel like you're held hostage by the company because your vital data lives within their ecosystem. Furthermore, there's the risk that the off-the-shelf software provider may go out of business, leaving you with zero support and potential upgrade paths.

Careful consideration of these factors will guide you towards the solution that best suits your organization.

Real World Example

AVIBE engaged in a collaborative discovery process working to identify problems and establish overall project objectives through a series of workshops. A new Business Management Application that was tailor-made to fit the way they do business. This new digitized system allowed for numerous successes such as the following:

Read the entire case study here!

Decision-Making Framework

To help your business navigate the build vs. buy software decision and make an informed choice, it's crucial to establish a structured decision-making framework. Here's a checklist that you can follow:

Define Your Business Goals and Needs: Clearly articulate your business objectives and specific needs that the software solution must address. Consider factors like scalability, industry-specific requirements, and competitive advantages.

Assess Your Budget and Resources: Determine your budget constraints and the resources available for software development and implementation. Balance the trade-off between upfront costs and long-term expenses.

Evaluate Your Timeline Requirements: Assess the urgency of your project and your time-to-launch goals. Consider how project complexity might impact your timeline and whether speed is a critical factor.

Analyze Integration Needs: Examine how the new software will integrate with your existing systems. Consider data migration requirements and the compatibility of the solution with third-party applications.

Consider the Customization Factor: Determine the level of customization your business requires. If unique features or workflows are crucial, lean toward custom software.

Examine Vendor Support and Track Record: If considering off-the-shelf solutions, research the vendor's reputation, support offerings, and track record. Ensure that they can meet your ongoing support needs.

Account for Hidden Costs: Be aware of hidden costs associated with both custom and off-the-shelf solutions, like licensing fees and maintenance expenses. Custom software typically offers greater flexibility to tailor your solution without incurring unexpected upcharges, whereas off-the-shelf platforms may charge extra for additional features, impacting your total monthly fees.

Engage Stakeholders Effectively: Involve key stakeholders from various departments in the decision-making process, as their insights can provide valuable perspectives and help ensure alignment with organizational goals. Make sure to include all relevant departments, as the impact of a software decision can span across the organization, and not considering everyone can lead to missed opportunities and challenges.

Create a Cost-Benefit Analysis: Quantify the costs and benefits associated with each option. Compare the financial implications, long-term value, and potential return on investment.It’s essential to look beyond short-term considerations and evaluate costs over a 10-year horizon, especially since our custom solutions typically have a lifespan of 10-15 years.

Explore Case Studies and References: Research case studies and references related to both custom and off-the-shelf solutions in your industry. Learn from the experiences of similar businesses.

Seek Expert Consultation: When in doubt, consult with experts in software development and technology consulting, like AVIBE! We can provide insights, recommendations, and help you weigh the pros and cons.

In making the build vs. buy decision for software solutions, remember:

Unique Fit: Custom software offers tailored solutions, while off-the-shelf options provide convenience.
Consider Carefully: Evaluate budget, resources, timeline, and integration needs.
No One-Size-Fits-All: There's no universal answer; choose what aligns with your goals and resources.
Data-Driven Decision: Make choices based on careful consideration and data analysis.

In the end, your decision should match your business's unique circumstances. Careful consideration and data-driven choices pave the way for success.

Defining the Dangers of Artificial Intelligence Writings

Fri, 09 Jun 2023 00:00:00 GMT

As with any technological advancement, artificial intelligence (AI) writings, which refer to texts or content generated by AI models, can come with potential dangers. Some of the main concerns associated with AI writings include:

Bias and Discrimination

AI models are trained on vast amounts of data, which can inadvertently contain biases and discriminatory content. As a result, AI writings may reflect or even amplify these biases, perpetuating existing inequalities and reinforcing harmful stereotypes related to race, gender, religion, and other characteristics.

Misinformation and Fake Content

AI writings can potentially generate false or misleading information that may be difficult to detect. This can contribute to the spread of misinformation, fake news, and hoaxes, which can have serious consequences on society, including influencing public opinion, damaging reputations, and undermining trust in reliable sources of information.

Ethical Concerns

AI writings raise ethical questions about the role of human creativity and the authenticity of artistic expression. There are debates about whether AI-generated content can truly be considered art or literature, and concerns about the potential devaluation of human creative labor and originality.

Legal and Copyright Issues

AI writings may raise legal challenges related to copyright, intellectual property, and attribution. It can be challenging to determine the ownership and legal rights of AI-generated content, as it is often a collaborative effort involving both human programmers and the AI models themselves.

Security and Privacy Risks

AI writings may also pose risks to security and privacy. For example, AI models trained on personal data may raise concerns about data privacy and the potential for misuse or abuse of sensitive information.

Manipulation and Influence

AI writings can be used to generate persuasive and influential content, including fake reviews, endorsements, and testimonials, which can be used for unethical or deceptive purposes, such as manipulating public opinion or promoting products or services without disclosure.

Dependence and Reliance on AI

Overreliance on AI writings can lead to a decrease in critical thinking skills and the ability to discern between genuine and AI-generated content. It can also reduce the diversity and richness of human expression, creativity, and originality.

It is important to recognize and address these potential dangers of AI writings through responsible and ethical use of AI technologies, including robust training data, rigorous testing and validation, transparent disclosure of AI-generated content, and thoughtful consideration of the social, cultural, and ethical implications of AI in the creative process.

Regulation, guidelines, and ethical frameworks may also be needed to ensure that AI writings are used in a responsible and beneficial manner that upholds human values and societal well-being. Overall, while AI has the potential to revolutionize the field of writing and creative expression, it is important to carefully navigate the risks and challenges associated with its use to ensure that it benefits humanity as a whole. So, responsible and ethical use of AI writings is critical to mitigate potential dangers and promote positive outcomes.

Keep in mind that AI technologies are still evolving, and ongoing discussions, research, and collaboration between stakeholders from different fields are needed to address the complex and multifaceted issues associated with AI writings. Always exercise critical thinking and discernment when consuming and interpreting AI-generated content. The responsibility ultimately lies with humans to ensure that the potential of AI is harnessed for the greater good.

This entire unedited article written by OpenAI

Lag in Technology Innovation is Detrimental to Businesses

Fri, 17 Mar 2023 00:00:00 GMT

In today's rapidly evolving business landscape, it is becoming increasingly essential for organizations to stay competitive by adopting new technologies and streamlining their processes. One area that offers huge opportunities to win an edge over the competition is custom web development business systems. By investing in bespoke software that is tailored to their specific needs, businesses can significantly improve their ROI by saving both time and money.

Custom web development business systems can help companies and organizations save money and time in a variety of ways:

Streamlined Processes

Automate and streamline various manual processes that take up a lot of time. For example, a custom software platform can automate invoicing and billing processes, eliminate duplicate data entry, and integrate different systems into a single platform. By automating these processes, businesses can save time and reduce errors, freeing up valuable resources to focus on more important tasks.

Increased Efficiency

Eliminate unnecessary steps and processes. Custom software can be designed to fit the unique requirements of a business, resulting in a more efficient workflow. With fewer steps and processes, businesses can increase efficiency and reduce the time required to complete tasks. This reduces costs associated with labor and improves productivity.

Better Decision Making

Provides businesses with real-time data and insights, helping them make informed decisions. Custom software can be designed to provide customized reports and dashboards that are tailored to the specific needs of the business. This can help businesses identify areas where they can cut costs and optimize their operations.

Scalability

Designed to grow with the business, making it easier to scale operations as the business expands. Building a custom software system that is flexible and scalable means businesses can avoid the need to invest in new software or systems as they grow. This can save time and money associated with implementing new systems and training staff.

Improved Communication and Collaboration

Improve communication and collaboration among employees. By providing a centralized platform for sharing information, collaborating on projects, and accessing relevant data, employees can work more efficiently and effectively. This can enhance their work experience and lead to better outcomes for the business.

Increased Job Satisfaction

Increase job satisfaction by enabling employees to work more efficiently and effectively. With automated processes and real-time data, employees can see the impact of their work and feel more fulfilled in their roles. This can lead to a more engaged and motivated workforce that is committed to achieving the business's goals.

Think of a web-based business system as a great member of your staff and should be regularly invested in. Companies that choose not to evolve with technology leave themselves exposed to competitors who can identify and react to opportunities more quickly and efficiently.

Custom developed web-based business systems can help your organization save both time and money by automating processes, increasing efficiency, providing real-time data, improving the customer experience, and enabling scalability, and creating a more productive, engaged, and fulfilled workforce. These factors all lead to better outcomes for the business as a whole.

Contact us today, and learn how we can help explore key project objectives and develop bespoke software that will significantly improve your ROI, and stay competitive in today’s rapidly changing business landscape.

Goodbye Universal Analytics, Hello Google Analytics 4

Tue, 28 Jun 2022 00:00:00 GMT

Google Analytics 4 (GA4) is replacing Universal Analytics (UA) on July 1, 2023, but don’t worry, it’s an easy transition to GA4. Most websites have Universal Analytics tracking scripts installed to gain insights on how users find and interact with their site. Google has been leaning more and more on machine learning to gain insights on user journeys on both desktop and mobile; partly because it’s cutting-edge but mostly due to new privacy laws. GA4 can help you identify data trends and includes predictive metrics that can assist with creating audiences or groups of users who may be most interested in your services or products. GA4’s reporting has shifted from focusing on session, device, and platform metrics towards customer-centric metrics from acquisition to conversion and remarketing to support your business’ bottom line.

Which Google Analytics Property Are You Using?

You can tell that your site is using Universal Analytics if you setup Google Analytics for your website before October 14, 2020. You can verify this by logging into your Google Analytics account. Once you are logged in, navigate to, “Properties” and view your Property ID. If your Property ID begins with “UA” you are still on Universal Analytics and will need to migrate to GA4 prior to July 1, 2023 so new user data continues to flow into your account.

Next Generation Reporting

GA4’s reporting is different than what you’re used to seeing in Universal Analytics. Leveraging Identity Spaces (User IDs, Device ID, and Google Signals), GA4 captures more details throughout the users’ journey on your site. If the user has opted into ads personalization and is browsing your site while logged into their Google Account, you will see the most data. For example, GA4 can track how users interact with your site from their phone initially and then log onto their laptop later to complete their purchase. It can even track if the same user later installs your mobile app and ends up making a purchase there. GA4 uses all consented Identity Spaces to create a single user journey. This is a stark difference from Universal Analytics, as a single, return user can appear to be a different user in Google’s current reports.

Another GA4 difference you will see is, “Goals” in UA are now called, “Conversions”. Conversions are based on Events. GA4 has some Events setup out of the box like, “first_visit” and “session_start”. If enabled, Enhanced Measurements can collect Event data for things like, “view_search_results” and “file_download”. This user data can be leveraged for ad personalization on Google Ads. Audiences can be setup for specific event parameters, targeting users based on how they interact with your website.

As mentioned earlier on, another great reporting feature is the ability to track acquisition to conversion and retention. Google has re-organized their reports so you can hone in on the part of the customer journey you are most interested in (e.g., abandoned cart). They have built-in “Life Cycle” reporting features like Acquisition, Engagement, and Retention.

Image Credit Google Analytics

Ongoing Data Evolution

With improvements to come from machine learning and artificial intelligence (AI), there’s no doubt that GA4 data visibility and insights will continue to evolve over time. Simultaneously, data privacy standards will continue to evolve. GA4 has done a great job rethinking their approach to user data controls. They’ve ensured that privacy standards are withheld while still allowing businesses to glean insights about how users are interacting with their website; without having to rely on cookies. This is done through machine learning where Google can “fill in the gaps” where data may drop off during the customer journey.

Google is investing in improvements to GA4 and understands that this will be a big jump for many users. That’s why they are giving everyone over a year to transition from Universal Analytics. We encourage you to setup your GA4 property now so you’re ready. You can get familiar with GA4 while still having the ability to collect and report on data through your current Universal Analytics property.

Password Security Best Practices

Fri, 27 Aug 2021 00:00:00 GMT

AVIBE employs several password security best practices when developing new web applications. In this blog post, we’ll touch on several password security methods:

Encryption – One and Two-way
Password Length & Brute Force
Password Strength
Login Attempts

Password Encryption

Encryption is crucial when an application is storing passwords in a database. Encryption encodes password data so it remains hidden. In the terrible event that a database becomes compromised, encrypted passwords are inaccessible. Encryption protects not only password data but private information and sensitive data like personal identifiable information (PII) or payment method information.

There are two types of encryption methods:

Two-way
One-way

Two-way encryption is reversible, meaning that passwords can be encrypted and stored but still are able to be deciphered and viewed again. One-way encryption is the preferred method. It’s irreversible and cannot be decoded in any way. This is done through “hashing”. Hashing is when plain text is turned into a fixed length hash so it cannot be decoded without considerable effort. When hashing, you take the password “test”, for example. The first step is to generate a “salt” for the password using the Java Random Library. This salt adds an additional value to the end of the password that changes the hash value produced. This extra step guarantees a unique output in the event where the hash inputs would be the same.

Password Length & Brute Force

Most websites require that a password contains a minimum of eight characters. This is because of Moore’s Law. Moore’s Law is the perception that the number of transistors on a microchip doubles every two years. This means that over time, the number of transistors increases the power and capability to brute force password logging. Therefore, password length crack times become significantly smaller.

In 2015, a password length of eight characters would have taken around five hours to crack. Thanks to data from HowSecureIsMyPassword.net, using lowercase letters only and no special characters or numbers, it would take about five seconds to crack. Long story short, the longer the character length, the better. We recommend that your password length is 10 to 15 characters that includes capitalized letters, numbers, and special characters.

Password Strength

Password length alone isn’t going to stop someone from getting into a system with your password, you have to consider password strength. Password entropy is the measurement of how unpredictable a password is. This can be implemented into code alongside password libraries and dictionaries. Password libraries contain millions of passwords used that can be cross-referenced to notify users that the password they selected is in the library and cannot be used.

There are other libraries like ZXCVBN, which can help define “weak” passwords, recognize common word patterns, repeat characters, keyboard patterns and sequences (EX: ASDFGHJK), and Leet speak (EX: p@ssw0rd). Additionally, there is an API called, haveibeenpwned API which cross-references the password entered by the user against millions of passwords that have been exposed in previous data breaches. All of these libraries can help users select secure passwords.

Image Credit: Xkcd.com

Prevent Scripting Spam Attempts

To prevent login and brute force attempts it is always a good idea to track login attempts and failed login attempts. By creating a login history table you can verify that the username inserted is actually a real username, track the date and time of login, and note if the login was successful. Logic can also be written to lock a user out of a system after too many failed login attempts within a certain time period. If the user account becomes locked after too many failed login attempts, users will be notified and prompted to reset their password.

Multi-Factor Authentication

Multi-Factor Authentication (MFA) is becoming more and more common to support login and password security. You see this on banking apps for example, which house sensitive personal information. It is an authentication method that requires the users to provide two or more verification factors to gain access to a web application. Here are three different authentication methods that are commonly used:

Email – A link or code is sent to the email address on file, this code must be used along with the password to allow the user to login.
Text – A link or code is texted to the phone number on file, this code must be used along with the password to allow the user to login.
Authenticator – Apps that allow a user to add an account via QR code and generates a random numeric code only valid for X amount of time. This authentication method is not sent over the air like an email/text, it’s sent through a third-party application.

The Future of Passwords

It’s possible that in the future we move away from passwords all together and rely solely on authentications and bio identification methods (e.g., fingerprints, facial recognition, etc.) to gain access to applications. No longer relying on passwords would eliminate the need for users to remember and keep track of various passwords and keep user devices and account data secure from hackers. We are a ways away from not requiring passwords but don’t be surprised when that day comes.

eCommerce Best Practices for UI/UX

Mon, 26 Jul 2021 00:00:00 GMT

More people are shopping online than ever because it’s typically easier than going to a physical location. The eCommerce convenience factor is encouraging more brick-and-mortar stores to focus on their online storefront; which means users need to have a great user experience to convert “window” shoppers into buyers. The first step in a successful eCommerce site is making sure the user interface is intuitive to navigate and supports every step of the customers’ purchasing journey, all the way through to an effortless check-out process.

Customer Purchasing Journey

There are several steps in a typical shopping journey that every eCommerce site needs to support:

User enters on the homepage or product category page
User utilizes an intuitive navigation menu to filter and search for desired products
User clicks into product detail page to review images, descriptions, pricing, and has ability to customize product and add to cart
User checks-out

Here are some best user interface practices to provide your customers with an easy and engaging shopping journey.

eCommerce Navigation Strategy

Product inventory can traverse several product levels which can be both overwhelming and difficult for users to navigate. It’s best to stick to one level of product categories to start. Some sites, like Macy’s who we are using as our example site in this post, begin by listing their various departments and then provide the user with additional category filtering options on the department landing pages.

Image Credit: macys.com

Product Category Filtering & Search

Providing shoppers with tools to “choose their own adventure” on their shopping journey is very important. Some online shoppers prefer to search for exactly what they need, while others prefer to browse and filter to until they find their desired products. Both methods need to be available and effective (e.g., product sorting/filtering options on every page, find-as-you-type strategies for product searches).

You can see how Macy’s offers both product filtering on the left side of the screen, as well as find-as-you-type search results for those who prefer to search for a specific product.

Image Credit: macys.com

Easy Product Customization and Sizing Selection

Macy’s is doing it right when it comes to searching for specific sizes. Users know that the left side of the screen is the place to be for drilling down to the products they want to view and applying their own size filtering. Macy’s also displays available pattern and color swatches below each product where applicable. Users can hover over the swatches to view the different colors and patterns on the product image without having to click into the product detail page – this is great UX.

Image Credit: macys.com

Visual Indicators for Sale and Out-of-Stock Products

Visually indicating sales items grabs shoppers’ attention and can encourage quicker conversions. Macy’s consistently calls out sales items by using a red font.

Image Credit: macys.com

There is nothing more frustrating than finding a must-have item and then finding out that the product is out of stock. If the product is out-of-stock, it’s best to clearly note this at product category view. Don’t make users click into the product detail page to find out the item is sold out. If the product has variants, it’s best to clearly indicate what size and color is out-of-stock like Macy’s has done with this shoe. Macy’s has another great feature on the right side of the screen, “Customers also loved”. This is a great way to cross-market similar items if the shopper’s first choice item is sold out.

Image Credit: macys.com

Guest Checkout

Check out is where shoppers decide to make their purchase or abandon their cart – the final step in their shopping journey. It’s so important that the check out process is effortless. Some ways that retailers are making it easy for consumers to purchase is by offering a guest checkout option. Removing the barrier requiring users to remember their account credentials has been proven to increase conversions and reduce the number of abandoned carts.

Image Credit: macys.com

What Did We Learn?

We have merely scratched the surface on best UX/UI practices for eCommerce sites by looking at Macy’s site. Many online retailers are venturing more and more into artificial intelligence and machine learning strategies to help increase conversions through personalization. We will talk more about this in a future blog post.

Today, we hope to leave you with various UX/UI strategies to support your online conversions and reinforce the most important takeaway...

Custom Website Design vs Templated Sites

Mon, 28 Jun 2021 00:00:00 GMT

What’s the Difference Between Custom and Templated Websites?

These days, almost every business has a website (or should). When embarking on a new website build or website redesign project, it can be hard to determine what firm or process is best for your business needs and goals. There are many different web firms in the world. Some specialize in custom website development, while others utilize templated website options like WordPress or Squarespace, and some do both.

Custom website design begins with an in-depth discovery and requirements gathering process. This is where project stakeholder meetings are conducted in order for the web firm to learn everything they can about your business goals, brand, target audiences, etc. Often times, custom development processes focus heavily on the end users' experience and accomplishing their specific goals on the site. To do so, user research is employed through various means (e.g., user surveys and user interviews). When the design phase begins, there are no limitations in terms of design or functionality and the site can scale with your growing business needs. With custom development, anything is possible.

Templated website solutions allow anyone to setup a website with or without the help of a web firm. Templated website options like WordPress, are open-source Content Management Systems (CMS) that allow you to purchase different website templates or themes that are often industry specific. Although almost anyone can create a website when starting from a template, many web firms begin with a templated solution. Templated web firms can customize templates by designing a layout to match your brand and add publicly available third-party plugins to quickly setup a basic shopping cart or blog on your website. With templated website development, it can at times limit the flexibility you have to tailor the site to your unique needs. There is so right answer in regards to which website route you take, however, there are pros and cons to both custom and templated website development.

Pros and Cons

Like we said, there is no one-size-fits-all website solution that will work best for every person or business. It’s important that you weigh the pros and cons of custom and templated website development to determine what process and final product will be best for you.

Pros of Custom Website Development

Scalable – Custom built sites can stand the test of time and grow with your business. You won’t have to worry if there is a plug-in for something new you want to add to the site.
Unique Design – Starting from scratch allows designers full creative freedom to design unique layouts for both desktop and mobile.
Functionality - Programming restrictions aren’t an issue when a development team can build features to fit your exact business needs.
Less Unexpected Maintenance Needs – A maintenance budget for on-demand updates is always recommended, but you probably won’t be surprised by any unexpected maintenance costs due to your technology changing (a common pain point for templated websites).
Optimized – Custom developed code produces less overhead in terms of speed and performance. There won’t be extra, unnecessary code running like you see in universal website options.

Cons of Custom Website Development

Longer Timeline – Just like baking a cake from scratch, it can take longer to gather and combine all ingredients, but the end result tastes much better than using cake mix.
More Costly – The process to gather all requirements, complete the design phase, and develop the functionality of the site takes time which in turn can lead to higher cost than starting from a template.

Pros of Templated Websites

Budget – Starting with an out-of-the-box solution saves time, thus they are more affordable to build.
Timeline – Sticking with cake analogies, store bought box cake mix is quick and easy to make.
Third-party Plugins – WordPress and Squarespace have a large community working to build third-party plugins that can be purchased and added to your site for new functionality or integration needs.
Design themes for Specific Industries – If you’re in construction or own a restaurant, it’s guaranteed that there are several different website themes available for purchase that save on design time.
Easy to Use – Universal, templated website solutions need to be intuitive for the average web user and template CMS' are typically very user friendly.

Cons of Templated Websites

Design Constraints and Mobile Responsiveness Issues – One-size-fits-all solutions have to adhere to a specific design mold. This can become a pain point when you want something unique that stands out from your competition.
Lack of Security – Because templated solutions are so common, they have become a target for hackers to expose vulnerabilities.
Limited Support – You can’t really call WordPress if you’re having an issue updating a page on your website like you could when working with a web design firm.
Speed – Because templated sites are meant to be universal, this means they come with a lot of code that isn’t necessarily used or need by all sites. This can cause your site to load slowly, leading to user frustration.

Which is Right for Your Business?

At AVIBE, we specialize in custom web design and development and don’t work with templated solutions because we find them limiting in terms of design and functionality. However, this does not mean that we don’t believe in templated options. Templated sites are great for new businesses who need a great looking marketing site to begin promoting their business, or businesses that need a website built and launched quickly at an affordable price. We highly recommend weighing the pros and cons listed above to help determine if a custom or templated site is right for you.

We are happy to help you determine which option makes the most sense for your business. Schedule a consultation with us today.

Nudge Marketing - Sometimes Your Customers Need a Little Nudge

Fri, 28 May 2021 00:00:00 GMT

What is Nudge Theory?

Nudge theory was popularized by Richard Thaler. Nudge theory is a way to influence behavior through indirect suggestions and positive reinforcement. We’ve all seen basketball hoops setup over garbage/recycling bins. This is a great example of a nudge that encourages people to clean up after themselves. Nudge theory is often applied subtly; you probably wouldn’t even notice it if you weren’t looking for it – this is what makes it a successful marketing tactic. We see nudge theory applied in the real world and are seeing it applied more and more online, especially when visiting online retailer websites.

How is Nudge Theory Applied?

BJ Fogg, is a behavioral scientist at Stanford University who discovered and created the “Fogg Behavior Model”. In order to encourage users to take action, they must be motivated, able, and prompted.

B=MAP - “Behavior (B) happens when Motivation (M), Ability (A), and a Prompt (P) come together at the same moment.”

Image Credit: www.behaviormodel.org

Nudges are successful when the prompted action is easy and enjoyable for users and the timing is perfect. The Fogg Behavior Model is the perfect equation for successful nudge marketing application. Applying this formula to your online marketing strategies can encourage your users to take action, all while providing them with a great user experience.

Online Nudge Marketing Applications

Online nudges, when applied strategically, can have a positive impact on customer conversion rates and customer sign-ups. I mention “applied strategically”, because nudges are also capable of negatively affecting your numbers if the nudge leads to a negative user experience. Similar to animation application, if it’s overused it becomes an annoyance to users and can lead to dropped engagement and reengagement figures.

Ecommerce sites apply popular psychological principles to their product offerings to nudge their users to purchase, here are a few examples:

Social Proof – People often copy the actions of others. Yes, ‘keeping up with the Joneses’ is very real. Flagging bestseller products as, “Bestseller” or “Popular” can encourage users to buy.

Similarly, marking products as scarce can also encourage conversions. You’ve likely seen products flagged as, “Only 2 Remaining” or “Order in 10 minutes and you’ll get it tomorrow!”

Exit Intent Overlays – We’ve likely all experienced a pop-up modal, or exit intent overlay appear on our screen offering us 10% off of our next purchase if we share our email address. This type of visual cue (as long as it has a clear “X” button to close the modal) can be very successful in keeping users on the page and eventually checking out with their discount applied.

Not only is there an increased chance for a conversion, the company has also captured the user’s email address to remarket to them.

Price Anchoring – This is a great technique for providing users with a starting point that will influence their purchasing decision. Price anchoring is seen a lot on Google’s shopping ads where it lists the original price (e.g., anchor), typically with a strike through the original price and the sales price listed right next to the original price.

Nudge, Don’t Push Your Users

Nudges are powerful when applied correctly. Overuse and forceful user prompts won’t help your conversion rates. Although nudge theory is powerful, nothing is more powerful than the results and knowledge your business will receive by continuing to invest in user persona discovery and user experience updates. The more you know about your users the better; it will help influence when and where nudges should be applied to support your business goals.

Secure, Scalable Data Storage with Amazon S3

Fri, 19 Mar 2021 00:00:00 GMT

Amazon Simple Storage Service (Amazon S3) is a scalable, highly available, and secure object storage service to store, collect, and protect your copious amounts of data. S3 comes with intuitive management features that allow users to configure their unique security, compliance, and storage management needs. It’s a one-stop-shop where users can query and report on their data using SQL and available APIs, eliminating the need for a separate analytics platform. With S3, developers and IT Specialists can build scalable backup and restore solutions while protecting their data from natural disasters or system failures. On top of all that, it’s affordable! There are so many features and benefits that S3 can provide for your business’ data, we’ll only scratch the service in this post.

Features Available in Amazon S3

There are several awesome features available in S3 that Amazon highlights:

Storage Lens – Provides visibility into your storage usage, activity, and suggests cost-saving and data protection recommendations. It allows users to drill down to view insights at the account or bucket level (e.g., file folders with data and descriptive metadata) using an interactive dashboard.

Image Credit Amazon

Intelligent Tiering – Keeps costs down by automatically moving objects to different buckets based on the frequency that the objects are accessed.

Image Credit Amazon

Access Points – S3 Access Points make it easy to manage data access for applications that share the same data sets in S3 by setting specific permissions and network controls.

Image Credit Amazon

Batch Operations – Easily manage any number of objects in the S3 Management Console or via available API requests. You setup the job and associated parameters as you see fit.

Image Credit Amazon

Block Public Access – Lock down public access to your data at the AWS level, all the way down to individual buckets.

Image Credit Amazon

How Much Does It Cost?

There is no minimum/flat fee for using S3, as everyone’s data needs vary. This is why Amazon S3 only charges you for what you use. Amazon offers an AWS Pricing Calculator to help estimate your monthly costs which is billed at the end of the month. Amazon breaks down their S3 pricing based on four cost components. They even offer a free tier, as well as options for free trials for extended service offerings. Prices vary depending on which S3 Region you choose. Amazon charges its customers less in locations where their costs are less. For example, costs are lower on the East Coast than the West Coast.

S3 Benefits

More and more companies are moving to the cloud for all of their hosting and storage needs. It’s the place to be for flexibility, availability, scalability, and performance as S3 can easily scale and descale to fit your business’ specific data needs. Plus, it’s easy to use!

Do you have large amounts of data that you need to retain and store?
Do you have a growing data set that needs to continue to scale with your business?
Do you need secure, encrypted data that is still easy to upload and download?

Your business could benefit from Amazon S3 if you answered, “yes” to any of these questions. If you’re interested in learning more about how cloud storage options can support your business’ data, call us to schedule a consultation.

The Value of User Research is Invaluable

Fri, 26 Feb 2021 00:00:00 GMT

User research is arguably one of the most important steps in the web design and development process. User research helps surface how the user thinks and behaves, as well as their needs and motivations. Web applications and sites are meant to help, engage, or inform specific users on one or many topics or tasks. Before you begin designing, don’t you want to know what the end user wants and needs? It will sure save a lot of time in the long-run by avoiding assumptive decision making that could backfire once it enters user acceptance testing (UAT) or goes live.

Is a Successful Project Dependent on User Research?

Yes and no. You can certainly deliver a successful project without doing user research. But… ensuring that you are delivering a well-designed, intuitive product requires informed decision making at the earliest stage of the project. Often times, project stakeholders are the farthest removed from direct communication with their end users. This can be problematic when they are the ones approving application prototypes for development. If you miss the mark by approving designs prior to performing user research, it could end up costing you more than user dissatisfaction if you have to go back to the drawing board and redesign interfaces and workflows.

Web design and development shouldn’t be a guessing game if you have the option to avoid it. An intuitive user and customer experience relies on evidence-based strategies for an application to be successfully adopted and used. During the project lifecycle, you must constantly ask yourselves, “what are our users trying to accomplish?”, and “are we designing this to meet our users' expectations”? But before that, you must first know who your users are. This is where User Research methodology comes into play.

User Research Methods

User research techniques can be quantitative (e.g., statistics and numbers focused) and qualitative (e.g., insights and observations that can’t be computed). Google Analytics analysis is a good example of quantitative user research and user surveys are an example of qualitative user research. It’s best to balance your research to include both quantitative and qualitative methods.

Here are several research and strategy methods that we use throughout our process. These methods provide our clients with knowledge about their users’ goals and pain points, which in turn helps inform our design strategy and direction.

User Experience Workshops – workflow discovery and shadowing
Google Analytics – Review user data on existing sites
User Surveys – discover what your users really want and need
Empathy Mapping – capture user behaviors and attitudes
User Personas and Journeys – personify target user types and map out task-based scenarios they will encounter and intended paths throughout the application
Prototyping & UAT – user acceptance testing to provide an opportunity to request design changes/updates prior to application launch
Follow-up User Surveys – additional user feedback after launch to inform Phase 2 enhancements as more feedback can be collected after continued application use

Regularly Scheduled UX Check-ins

Business goals and user goals can be different but both are equal in terms of importance. You can find a happy medium to appease both parties. For example, a business’ goal may be to reduce overhead by avoiding hiring additional customer service representatives. Meanwhile, the user’s goal is to use the tools and information they are provided with so they can answer their own questions, or complete their important tasks online without having to call support in the first place. In this scenario, it’s important to dig into why the users are calling support in the first place.

Is it because the website won’t load the form that they need?
Or the site isn’t intuitive enough for the user to accomplish their end goal?
Is it both?

This is why it’s important to continue to be proactive and continue user experience (UX) research even after launch. Ongoing UX check-ins verify that the site is still supporting both the business and user goals. If they aren't, this research can inform necessary UX improvements. Contact us today if you need help creating a better user experience for your clients, we can help!

What Integrated Development Environment (IDE) Is Right for You?

Wed, 25 Nov 2020 00:00:00 GMT

What is an IDE?

Besides being a developer’s best friend, an integrated development environment (IDE) is an application that helps streamline software development. They normally come equip with a source code editor, automation tools for building software, and a debugger. Think of it as a one-stop-shop for developers. They come with the necessary tools programmers need for development, eliminating the need to constantly switch from tool-to-tool. Efficiency = happy developers!

Programmers aren’t the only job role that benefits from IDEs, they are also used by Data Scientists, Data Engineers, Data Analysts, Statisticians, and Business Analysts. Some IDE’s like RStudio help data professionals with statistical analysis.

Benefits of using an IDE

There are so many benefits of IDEs, they greatly reduce setup time for application development, which in turn, aids in developer productivity and efficiency. Some IDEs have built-in caching on startup so the rest of the developer’s tasks are streamlined and speedy.

One of our team’s favorite IDEs is Visual Studio Code. It works great for teams who are working remotely as it is integrated with Git. It comes with several useful extensions that improve developer workflow. Some extensions and features that we love include:

Programming language syntax highlighting
JSON
XML ToolsAuto-Close Tag
Trailing Whitespaces
TortoiseSVN
SVN – Subversion built into source control
SQL Server – connect built into VS Code
Keymap and Settings Importer – text editor like Sublime text
CommandBox
REST Client
View and edit CSVs
And much more!

Choosing the Right IDE for You

There are so many IDEs available today, it can be hard to choose what is best for you. If you are a data professional, RStudio Connect may be a good fit for you. It allows you to run data analysis scripts, reports, and includes graphing capabilities. RStudio is available for purchase, price varies depending on the number of users.

If you are a programmer, you are likely looking for an IDE that encapsulates all of the tools that you typically work with when developing web applications. Visual Studio Code may be a great fit for you, we encourage you to download it and check-it out for yourself – it’s free!

Popular Free IDEs to Try

Visual Studio Code - https://code.visualstudio.com/
Microsoft Visual Studio - https://visualstudio.microsoft.com/
Eclipse - https://www.eclipse.org/ide/
Sublime Text - https://www.sublimetext.com/

Inclusive Design

Mon, 26 Oct 2020 00:00:00 GMT

What is Inclusive Design?

Everyone is unique - this is the impetus of Inclusive Design. Inclusive Design is the practice of creating products that meet the unique physical, cognitive, and emotional needs of users. Inclusive design practices are all around us. They can be seen in architecture where a floor looks like an average floor to a seeing person, but in reality, that beautifully patterned floor was thoughtfully texturized to help a blind person navigate the halls using their cane. This is only one example, if you pay close enough attention you will notice careful considerations that are made for inclusivity.

User’s interactions with technology rely heavily on our senses, just like they do in the physical world. Many end users have varying degrees of sensory limitations where there is no one-size or one-approach fits all solution, so how do you design for this? This is where Inclusive Design concepts come into play. The best way to begin the design process is research. You must learn about your users in order to understand their needs, abilities, and perspective. Afterall, you are designing for your end users!

User Experiences Are Everything!

User experience (UX) is what keeps us engaged and coming back for more. With a ranging spectrum of abilities and unique considerations, a great place to start is determining what is important to the users on a universal level. Microsoft’s Inclusive Design Toolkit Manual has a great example where designing closed caption text for someone with a permanent disability like loss of hearing can also benefit others in a situational constraint (e.g. someone learning to read or speak another language). Similarly, ADA 508 compliance designs with high-contract screen settings benefit those with visual impairments, they also benefit a seeing person when they are viewing their device in bright sunlight.

There is no quicker way to lose a user than totally missing the mark designing an experience, or telling a story. To effectively tell the story or share the experience you are designing, it needs to be accessible to all users. We do this by creating User Personas during the UX Research and Strategy phase of our projects. We conduct thorough user research to understand who the end users are, their associated goals/needs, and potential barriers we need to consider to ensure the design meets their needs. We do all of this before we start designing to ensure that we are thinking of the users first.

Design for Everyone

Microsoft knows what they are doing. Our favorite quote they use is, “solve for one, extend to many”. Everyone deserves the right to a comparable user experience, here are some tricks you can consider to make your web designs and products inclusive:

Language translation options on websites
Alt text and audio transcripts
508 compliant color and contrast
Screen-reader friendly
Show password options on login fields
Give users the control to stop animations, zoom in, and change text color and font size
Provide multiple ways to view data or complete an action (e.g. data tables to represent the data within a visual infographic – allowing screen readers to read the data aloud)
Use screen readable tool tips to provide more context or direction for the user
Keep consistent content hierarchy – prioritize content and associated tasks above all supplemental content
Use consistent design patterns (e.g. list views, forms, etc.)

Most importantly, consider the value that the design is bringing to the user. If it isn’t valuable, don’t add it. There are additional value-add design principles that can greatly improve the user’s experience, especially on mobile devices:

Geo location
Camera
Vibration
APIs

These are only a few of many different Inclusive Design practices you can start incorporating into your designs. We challenge you to take a closer look at your website and talk to your users about their experience to ensure that the design supports their abilities and goals.

Great Inclusive Design Examples

Some of the largest players in the tech world are designing inclusively. Here are some very thoughtful tools and features supporting inclusivity in tech:

Google Docs – Live Edits feature for visually impaired users
Comcast – Eye-tracking software supporting people with physical impairments
Lyft & Aptiv – Braille guides for low vision or blind riders

Resources

Docker - Streamlining Web Development

Mon, 31 Aug 2020 00:00:00 GMT

What is Docker?

Docker can help streamline development teams by packaging all code and dependencies like system libraries and settings. Docker is similar to a virtual machine, but much more efficient. Packing up code in a “container” improves application performance and allow the application to run in different environments. Containers provide a clear separation from the code and application’s environment so it will function as intended despite potential differences in the development and staging environments. Containers virtualize operating systems instead of hardware.

Docker’s screenshot below outlines how Docker acts as a layer of separation between the host and the various containerized apps. Docker is open source and supported by Linux, Windows, data centers, and cloud hosting providers like Amazon Web Services (AWS). Docker lets you use almost any database and servers that you want – it’s great!

Why Programmers Should Use Docker

There are many benefits when working with Docker that development teams loves:

Lightweight: Docker is able to use your computer’s resources, it doesn’t require you to allocate more memory – it just uses as it needs it. Additionally, it will share libraries between the containerized apps so you only need to download the libraries once.

Efficient: When you start Docker, it will automatically pull down all relevant bins, database libraries, etc.

Portable: If everything is working on your PC using Docker, you can easily ship off your app as needed. Developers can focus on coding and not worry about the system the application will ultimately be running on.

Open Source: It can be extended to meet developers’ own needs if there are additional features needed that don’t come out-of-the-box.

Docker Compose Tool

Docker Compose is an extremely valuable toolset available to development teams. Docker Compose File is a tool that allows programmers to create environments and interact with them. It allows you to configure all application dependencies (e.g. databases, APIs, etc.). The Compose command line tool lets you easily create and run one or more containers with a single command.

The Compose file created is a YAML. YAML is human friendly data serialization standard for all programming languages. This file defines services that make up your app so they can be run together in an isolated environment. You may also use JSON.

Docker Hub

Docker Hub is a service provided by Docker and is the world’s largest library and community for container images. Docker Hub provides the following features:

Repositories to push and pull container images.
Official images provided by Docker (e.g. Node.js, Postgres, MySQL, etc.).
Team and Organization access management for private repos.
Builds to automatically build container images from GitHub and push to Docker Hub.
Webhooks to integrate Docker Hub with other services.

Docker Hub currently offers three different pricing plans and offers discounts when billed annually versus monthly:

Free (For Individuals): This plan includes basic Docker tools for every developer, including unlimited public repos and one private repo.

$0/month

Pro (For Individuals): Includes pro tools for developers with advances requirements for parallel builds and unlimited private repos.

$5/month (annual billing) or $7/month (monthly billing)

Team (For Organizations): Includes advanced collaboration and management tools for teams (e.g. organization and team management with role-based access controls, parallel builds, and unlimited private repos).

$7 per user/month (annual billing) or $9 per user/month (monthly billing)

Resources

Docker offers many web-based tutorials, as well as a beginner’s guide to help get your toes wet before you dive right in. Here are some resources for you to check-out:

5 Tips to Maintain Productivity and Stay Connected While Working Remotely

Fri, 24 Jul 2020 00:00:00 GMT

We miss being in the office as a team. None of us expected to suddenly shift to a work-from-home model but thankfully, technology has been fantastic to us during this time. Technology has allowed us to stay in close communication with both our team and our clients. We are using video call technology more than ever and it has been working well. Many of us are attending more meetings than ever before, but this has been crucial to ensure alignment across our teams. Although working-from-home has worked well for our team, we know that it has been challenging for many.

Some people who have begun working-from-home have shared some of their pain points:

Distractions from children at home
Limited technology access that is slowing them down
Lessened engagement and loss of motivation
Loneliness

On the contrary, we have also heard some positive feedback about working remotely:

More quality time with family by avoiding long commutes
Healthier eating habits by cooking at home
Accomplishing more chores around the house after hours
Meeting their clients face-to-face for the first-time using video call software

We have identified 5 tips to help you and your team stay focused, productive, and connected while working-from-home.

1. Create an Office Space

Many of us have roommates or children which can make it difficult to carve out a quiet and comfortable space to work. We do not recommend working in your bedroom if you can avoid it; it’s important for your mental health to have a space that is only intended for relaxation. Similarly, it is equally as important to have a space that is for work/productivity only. It can be difficult to train your brain that this new area is intended for focused work only, but it gets easier over time.

2. Take Regular Breaks

Regardless if you are neck-deep into an Excel spreadsheet, force yourself to take regular breaks during your work day. Moving around gets blood flowing and can naturally energize you. Staying inside all day isn’t good for anyone; if the weather is nice take a stroll – you will come back to your office space feeling refreshed.

3. Create To-Do Lists Each Day

Maintaining a physical notebook or online task list that is re-prioritized each day helps maintain productivity. It feels great ticking off items on a to-do list; psychologically it affirms accomplishment. An actively prioritized to-do list will help keep you stay focused on your tasks, even when distractions arise.

4. Check-In with Your Team

We schedule morning check-in meetings every day, even before we began working remotely – these are crucial. Don’t rely on email, hop on a call; this can save so much time out of your day. If possible, schedule some time as a team to talk about things outside of work or schedule a virtual team lunch. If you’re like our team, we like each other and want to know how everyone is doing, what new video games they are playing, and what new shows they are into.

5. Make Sure to Log-Off Everyday

It’s easy to physically log-off the clock, but it can be more difficult to mentally log-off. Once your day is complete, leave your office space and step away from the job. This is a great time to go for a walk, play with your children, or sit down and relax with a book.

Working remotely can unintentionally make you feel like you can’t escape your work, mentally and physically. When you are able to employ these five tips you should notice an increase in productivity and team connection. What tips have you used to maintain team culture and productivity?

Tips to Plan Your Business' Digital Transformation (DT)

Mon, 15 Jun 2020 00:00:00 GMT

What is Digital Transformation and Digital Disruption?

Digital Transformation (DT) occurs when businesses and organizations integrate technology into all aspects of their business. DT helps businesses adhere to customer's changing needs and ever evolving business requirements. DT has allowed businesses to automate processes, provide a better customer experience (CX), and create memorable interactions with technology. Great web experiences empower users and encourage natural re-engagement on the platform(s).

Technology advancements have been occurring for years, but are happening at a much faster rate. The evolution of artificial intelligence (AI) and machine learning (ML) is driving competition in our current digital landscape. Businesses now need to react quickly to keep up with competition and continue to meet and exceed their users’ expectations.

Digital disruption is another term you may be familiar with. Digital disruption occurs when customer needs are shifting to digital innovations like internet of things (IoT) and on-demand apps. An example of digital disruption is how Uber and Lyft have affected the taxi industry with just a few clicks of a button. The meaning of “disruption” sounds negative, but it can be a positive change driver for organizations – don’t shy away from being the disruptor.

Planning Your Organization’s Digital Transformation

Planning your organization’s digital transformation doesn’t begin with analyzing cutting-edge technology. In order to effectively innovate your technology, you need to consider the four different types of digital transformation in the planning stages:

Business Process Transformation: This is typically a large focal point for many businesses. Utilizing technology to automate workflows and incorporate business intelligence tools is a great way for a business to sets ROI goals that are measurable before selecting any new technology.
Business Model Transformation: This type of transformation occurs when your organization’s goals are to utilize technology to transform traditional business models; this is not a quick turnaround. Roll-out of business model changes need to be strategic; it’s important that businesses release new technology to their users but offer customers an option to continue to operate using tried-and-true business models until they feel comfortable.
Domain Transformation: We often see this type of business transformation within the fortune 500 space. These corporations have the capital and global marketing influence to expand into a different market domain with a big head start. Google Home is a great example of how Google utilized a digital disruption (IoT, AI, and ML) to expand their domain even further.
Culture Transformation: This is arguably one of the most important things to consider when planning your digital innovation. People typically don’t like change, so your business’ digital evolution need to create value. Agile workflows are a great way to drive growth, innovation, and excitement for the future of your organization. Whenever possible, bring many departments into the planning processes to ensure the direction that is chosen is flexible for all team members.

AVIBE offers a Discovery Workshop to assist with planning digital transformations. Ever business and organization has unique processes and goals, we can help you determine the path forward that will make the biggest impact on your business.

Digital Transformation Trends – Customer Experience (CX)

Chief Digital Officer at Coca Cola memorably puts it, “It’s about disrupting ourselves before someone else disrupts us.” A 2020 Digital Transformation Trend report by Adobe states that customer experience (CX) investments are set to rise in 2020; C-suite ranks CX optimization as the “greatest opportunity” in 2020. Stating that about half (51%) of C-suite executives are planning to increase their CX-related technology spending.

Adobe’s report also shows that only 13% of C-suite respondents say that their marketing and CX technology is highly integrated. A key aspect of successful digital transformation is scalable infrastructure to ensure your new technology with adapt to your evolving business goals.

Rethinking business processes helps inform ROI measures and potential cost saving when investing in new technology or setting your technology budget. Customer journey management is crucial to an organization’s CX success. Your investments will not go unnoticed by your clients when their experience is a focus of your tech initiatives.

Your customer experience (CX) goals can be supported by many different digital technologies that have been around for a while or are emerging technologies:

Content personalization
Artificial intelligence (AI)
Machine learning (ML)
Serverless, cloud hosting
And many more

Digital Transformation Takeaways

Change can be a good thing! Technology is always evolving to continue to support users’ needs. There is no one-size-fits-all digital transformation solution, so it is very important that your business doesn’t cut any corners when you are in the planning and strategy phases. Remember, the four different facets of digital transformation as you are planning your initiatives!

Thank you, Adobe for the great information on data trends for 2020.

Business Intelligence (BI) – Making Informed Decisions Using Data and Technology

Fri, 24 Apr 2020 00:00:00 GMT

What is Business Intelligence?

Business Intelligence (BI) leverages software to turn data into actionable insights that inform educated business decisions. There are many BI tools available to businesses that allow them to analyze their various datasets and then output findings/trends in a report, dashboard, or graphs for ease of interpretation.

BI offers a way for businesses to combine multiple datasets in order to make cognizant business decisions; it can require numerous datasets from various departments to get a full view of current and historical trends. BI software and tools make data accessible, intuitive, and user-friendly; negating the need for a data analyst to interpret your data.

Business Intelligence Strategy

Before your business decides on BI tools and software, it’s important to outline your business’ visons and goals. This will help identify teams and appropriate datasets to support your business’ BI strategy and key performance indicators (KPIs). A great place to start is assessing your current datasets to ensure that necessary data can be compiled as intended; data silos and resources can potentially halt progress early on.

Communication is key when defining your BI strategy. Stakeholders, IT, and subject matter experts (SMEs) are crucial when defining you current business goals. These teams should know what current and historical data is available, understand what is working now, and what isn’t working well across departments in terms of data analysis records and toolsets.

Understanding your business’ current BI toolsets is crucial before selecting BI software. Are they working well for you now? Will they meet your business needs in the future? These questions help ensure that your BI tools will allow your business to advance from a data perspective. Keep in mind, there is no one-size-fits-all business intelligence strategy; it should be personalized to fit your business needs.

BI Software and Toolsets

When searching for business intelligence software there are many factors to consider:

How adaptable is the software? Can it accommodate varying datasets and goals? Is it customizable?
How easy will it be to compile and combine varying datasets into the software? Is that process maintainable?
Is it possible for anyone on the team to get useful information in an intuitive way?
Is data available on mobile and still understandable at a glance?
Can the solution be branded to your business?
Are the visual representations of KPIs obvious and easy for users of all technical abilities?

There are many highly sought after features in BI software that businesses see as key requirements for BI tools:

Dashboards and intuitive visualizations (e.g. charts, and graphs)
Reporting on various datasets with ability to export
Data mining capabilities that find patterns in large datasets
Ease of data importing from various platforms

These features are extremely valuable and should be vetted when determining what BI software is best for your business; this can help determine if an off-the-shelf or custom solution is needed to accomplish your business goals.

Custom versus Off-The-Shelf BI Software

There are pros and cons for custom solutions versus off-the-shelf business intelligence management and visibility. Custom BI solutions are built based on your unique business needs, which typically takes longer to deploy than purchasing an off-the-shelf solution. However, the custom solution will likely be better suited for long-term as it can be adapted to scale with your evolving business needs.

Off-the-shelf solutions are more affordable right out of the gate, but are often associated with a yearly subscription cost that can add up over time. These platforms are built to address the needs of as many users as possible. This means there are a number of features available but they likely won’t meet all of your expectations due to limited customization options.

There is no right answer when deciding what platform is best for your business. It depends on budget, time to launch, and flexibility to scale over time.

AVIBE can work with you to determine what business intelligence option is best for your organization’s unique needs. Schedule a consultation with us.

The Future of BI

Data visibility has become increasingly necessary for businesses to operate and forecast plan. It will be interesting to see how BI tools evolve with technology. We can expect to see machine learning and artificial intelligence (AI) play a bigger role in identifying new data and forecasting trends. We can also expect to see more integrations with outside platforms, and we can anticipate that we will become a more data-driven culture by empowering teams with access to valuable and actionable data. We’re excited to be a part of this evolving space!

Web Accessibility 101

Tue, 24 Mar 2020 00:00:00 GMT

What is Web Accessibility?

Accessibility in web development is an important topic that often falls to the side during a busy development cycle. Ensuring the sites you develop and support are accessible to a wide range of ability levels and user types is as important as getting that pixel-perfect finish on your landing page. Unfortunately, because many of the people that build websites do not depend on assistive technologies, this requirement is often forgotten or left out of requirements altogether.

The goal of web accessibility is to ensure that all possible users can use your site comfortably, no matter how they access the content. While many users may use a mouse to navigate your UI, some users may only be able to use a keyboard. Similarly, many users may be able to read small fonts comfortably on a large screen and other users may require an enlarged font size in order to read the content. Additionally, other users may rely on screen readers in order to read the page content at all. A full review of accessibility standards is outside the scope of this article as we barely scratch the surface of accessibility; we encourage you to head over to the excellent https://webaim.org for some detailed information on web accessibility. See our Resources section below for more information.

Why Go Accessible?

Not only is accessible web design the right choice ethically (who wants to create content that excludes a portion of your user base?), it is also the most business-savvy choice. Currently, the federal Americans with Disabilities Act requires websites to be compliant with Section 508 requirements. In June 2018, the language of the Web Content Accessibility Guidelines 2.1 (WCAG) was updated to improve accessibility for users with cognitive or learning disabilities, users with low vision, and users with disabilities on mobile devices. This means that WCAG is now the law of the land. In addition, accessibility is common sense – how are you supposed to support and retain users if they simply cannot use your site?

Qualities of an Accessible Site

The gold standard for web accessibility is WCAG 2.1. There are three levels to be aware of:

Level A – considered the most basic level of accessibility. Level A improves usability, but it does not mean that a site is accessible to all users.
Level AA – the best goal for sites trying to be accessible to all users. Level AA also aligns with Section 508, so if you are trying to be legally compliant this is the most important level.
Level AAA – this is the “reach” goal. It is not required by Section 508 because not all Level AAA guidelines can be met for all sites or types of content.

Note: If the Level is omitted from accessibility literature, it is typically referring to Level AA.

WCAG defines a number of Guidelines that are organized into four top-level Principles. These form the core of the WCAG standard.

Perceivable

Perceivable means that the content of your page can be perceived by all users. Because people perceive things in different ways, this principle deals a lot with providing alternative means to perceive content. For example, content on the site that is visual such as images or video are required to have text alternatives so screen reader software can determine what is happening in the visual. Sound clips must have accompanying text to explain the content of the media, and animations should also have accompanying audio if they provide meaning to the user interaction.

This principle also includes the site design; there are defined minimum color contrast ratios and requirements about the ability to resize text. Additionally, you will want to consider the structure of the content to make sure that it follows a logical flow and doesn’t require jumping to different parts of the page to access required information.

Operable

To have an Operable site you must have a site that does not rely on any one input method (e.g. a mouse or touchpad). For example, if you use a navigation scheme that relies on mouse hover in order to show or hide certain elements, the navigation items in sub-menus will likely not be accessible by keyboard. They also may not be accessible by tablet or touch devices. This is a serious impediment to accessibility!

Another element of operability is in regards to timeouts or media that plays over time. In general, you always want to give your users control over when, if, or how long something happens on your site. If sessions timeout without warning, videos play automatically, or background sound cannot be stopped - you will want to reconsider your design.

Lastly, in order to be Operable your site must do more than just meet the minimum requirements – it must also reach a degree of user-friendliness. WCAG defines this with several guidelines related to repeated content, navigation blocks, focus visibility and more. For more detailed information, please see the quick reference.

Understandable

An Understandable site is one that is explicit and consistent about how it is used. This includes things that are relatively simple (e.g. declaring a page’s language in the html element), to somewhat complex (e.g. robust error handling for form entry). When we onboard new Developers, we often point them towards eBay’s excellent MIND Patterns site for examples of how to achieve some of these guidelines.

Another element of Understandable sites is their consistency when dealing with user input. Understandable sites never trigger changes to a user’s context without warning, and never start or stop behaviors without the user’s explicit control or consent.

Robust

Robust websites are sites that are machine-friendly. Unlike most of the other Principles which are focused on user interaction, the Robust Principle is only focused on two things:

Valid code
Semantic code

Valid code is that thing we all learned about in Web Development 101, where you pass your HTML and JavaScript into a validator and wait for the green checkmark. As simple as it is, this is an important element of accessibility because it provides a reliable API for future assistive technologies to rely on.

Semantic code is a term that can sometimes refer to different things, but in this context it simply means that all UI elements have machine-readable attributes and names. Specifically, the Name, Role, and Value of any interactive page elements (e.g. forms) must be readable, as well as other landmarks such as headers and navigation blocks.

Accessibility Best Practices

As you may have already figured out, web accessibility is a wide and complex topic. However, there are some best practices that you can follow to make it more digestible. Our Resources section has lots of material for you, but here are some general principles to keep in mind when developing for accessibility:

Start with an accessible design.
Use valid, semantic markup whenever possible.
Think in advance about how users will access content by keyboard.
Be explicit about everything in the markup. For example, if an element is meaningful, label it well. If it is just eye candy, explicitly remove it from accessibility tools it with aria-hidden.
Give the user control over everything. Everything in your site should be able to be initiated, paused, adjusted, or stopped by the user.

These are some practices that we live by, but this is definitely not the end of the road. We rely on a variety of accessibility checklists as well to make sure we’ve dotted our “i”s and crossed our “t”s, and we’ve included a few of our favorites in the Resources section below.

Testing for Accessibility

While there are lots of automated solutions for testing accessibility, there is no “silver bullet” to ensure your site is Accessible. Testing accessibility is a process that requires user interaction with the site, critical thinking about how users will interact with your site, and iterating on the design/develop/test cycle to ensure the site meets established standards.

To get you started, Karl Groves has written an excellent starter list of the 6 simplest accessibility tests anyone can do. You can also refer to the WCAG checklist produced by WebAIM, which provides an excellent starting point to ensure your site is compliant with modern standards. Be prepared to dive deep into the official specification or quick reference to ensure you are checking all the boxes. In addition, do yourself a favor and download a screenreader to understand what it is like for visually impaired users to access your site. NVDA is the leading free option on the market, and JAWS (a leading paid option) allows free access for 40 minutes per day.

Wrapping it Up

Web accessibility is a large topic and it is often daunting due to the reliance on technical jargon and “legalese” surrounding discussions of compliance. Despite all this, accessibility is really just an extension of everyday principles of web design: intuitive UI, delightful UX, and cross-platform usability. While you probably already consider these everyday practices for your development, expanding your definitions to include accessible design can fundamentally shift the way users interact with your site, and ultimately make your product better for everyone.

Resources

Designing and Building Powerful Dashboards

Fri, 28 Feb 2020 00:00:00 GMT

How do you know if you need a dashboard? Does your business collect and track key performance indicator (KPI) metrics? Do you have a large sales team and track individual performance? Do you reference historical data to inform future business decisions or spot trends?

If you answered yes to any of these questions, your business will benefit from a dashboard.

Dashboards are a powerful way to share key data points at a glance. Utilizing a central location where data is accessible to everyone saves time – gone are the days where you have to reach out to numerous people to generate the report you need. Data at your fingertips and having it available on mobile devices is so much easier than reading through a dense report. Lastly, dashboards bring data to life! They are engaging and can be a great for motivating teams.

What Data Should be on a Dashboard?

Content is key when designing a dashboard. Businesses often collect and report on various different datasets to help make decisions; but numerous datasets can make it difficult to determine what data should be represented on a dashboard. Larger companies may have a need for different dashboards for various departments. For example, a supply company would have a need for an operational dashboard to monitor real-time data and spot any issues or discrepancies. Whereas the CFO of that same company would likely want a dashboard to see a high level of the company’s Q1 performance, as well as have the ability to compare current data with historical data to surface trends.

It’s important to only surface the most important metrics; a cluttered dashboard goes against the purpose of having a dashboard - all metrics need to be easily recognized and understood at a glance. To aid in understanding, it is helpful to include identifiable and recognizable icons and/or labels by each dataset.

Elements of a Great Dashboard

We’ve seen and designed numerous dashboards for our clients and have learned that no two dashboards are completely alike. However, there are best practices that our design team includes on all dashboards that support a great user experience:

Data and content hierarchy – The most important data should always be at the top of the dashboard, but still allow users to drill down into the datasets that are the most important to them.
Animated graphs and charts – Data is fun, it should be fun on the dashboard. Charts are a great way to represent data in an easily digestible format; animation helps bring the data to life, helps indicate interactivity, and engages users.
Clear labels of each dataset with historical trend indicators – Labels are a great way to indicate if changes in data are positive or negative; it’s important that the changes in data are clearly represented and allow users to change date ranges to identify trends.
Iconography and color strategy – Iconography and use of color are great techniques for drawing attention to specific areas on the screen.
Gamification – Performance or eLearning Dashboards are more powerful when there are gamification techniques utilized to motivate teams.
Mobile friendly – Everyone has their phone on them at all times and your dashboard should be accessible on the go.
Exportable reports – All data should be exportable via Excel or PDF to share with other departments who may not have access to your dashboard.

Different Kinds of Dashboards

Dashboards can be built for various departments, as well as roles. Some common dashboards are:

Executive – These typically include goals and KPIs that executive teams monitor on a regular basis to identify trends. They can also include data on their employee’s or department's performance.
Analytical – Think Google Analytics. These dashboards include tools for users to drilldown further into datasets and typically have more advanced filtering and tools to glean additional insights into data trends.
Operational – These are great for supply chains or product sales tracking. The datasets included can help identify real-time issues and help observe progress over time to determine if set goals will be met.

Dashboard Designs We Love

Here are some of our favorite dashboard inspirations. If you are interested in a dashboard to glean more insight into your business, call us to schedule a consultation.

Image Credit Andrey Rybin (Dribble)

Image Credit Smart Insights

Image Credit UX Planet

Version Control - Git a Handle on Your Code

Thu, 23 Jan 2020 00:00:00 GMT

What is Version Control?

Image Credit: Git

Version control, also known as revision control or source control greatly streamlines development lifecycles. Developers working in teams are constantly writing and making changes to the same source code which can cause issues if push processes are not followed consistently - this is where source control comes into play. Version control helps programmers work collaboratively and seamlessly on the same source code without overriding each other’s code updates - saving time and money.

Purpose and Benefits of Version Control

Developing software without version control is risky. Version control preserves the source code’s integrity. The use of version control can save countless hours by avoiding the need for programmers to manually file check and merge files together prior to deployment. Manually merging and pushing file changes are prone to human error and often times file conflicts arise which takes time to sort out – sometimes a lot of time, as it can introduce new bugs.

Development teams should be able to work concurrently on the same source code without a problem when using source control. Version control is a safety measure that still allows individual programmers to work within their preferred method, within their own development branch, and doesn’t require the entire development team to follow one standard process. Workflow flexiblity is great, but it is VERY important that all developers are in alignment on the processes for merging branches together.

What is the Best Version Control for my Team?

There are numerous different kinds of version control software available to development teams but Git is our favorite for a number of reasons. Git is trusted and is used by Google, Facebook, Microsoft, and Netflix’s development teams. Git is quick. Almost all operations occur locally and don’t require communication with a server. Git is free, open source, and it supports multiple workflows.

Git’s most common workflow options are:

Basic – This workflow is popular if you are getting familiar with Git. This workflow includes one central code repository that each developer clones; they then work locally making code updates, commit changes, and the push their updates to the single repo for other developers to pull and use their work.

Feature Branch – This workflow is reliant on branches. Branches are independent development paths; it is best to create a new branch for each update or introduction to new functionality. This allows developers to work within their new feature branch, test it, and then merge that branch to the master branch to go live.

Gitflow – This workflow focuses on two long-running branches, one for development and one for the master. The development branch is where all feature branches are merged and all testing occurs before pushing updates to the master branch. This workflow method is well-suited for large projects.

These are only a couple examples of Git workflows. The beauty is that you can use established workflow methods, customize established methods to fit your team’s needs, or use your own workflow.

Git’s main pain point is it comes with a bit of a learning curve; Git’s robust features and multiple workflows can take some getting used to. Once development teams become familiar with Git, its tools can greatly increase development time and allows for faster release cycles. We recommend downloading Git visualizer like, Sublime Merge to help learn all nuances within Git.

Version Control Tips and Best Practices

There are several best practices for version control that should be applied by development teams:

Use branches!
Agree as a team on source control workflow to establish a process for merging branches.
Review code updates in the staging area prior to making a commit.
Log commit notes with enough detail to explain what the update you made does and why you made that update.
Commit often to capture each update being made; this helps for bug tracking and is helpful if there is a need to revert code updates.
Git IDs are helpful for rolling back updates from production if needed, make note of the ID before you push to production.
Push branches are helpful when making several feature updates at once; this keeps the production branch clean.
Learn all of Git’s commands – here is a cheat sheet.

Happy Holidays!

Fri, 20 Dec 2019 00:00:00 GMT

Wishing you a safe and happy holiday season, cheers to the New Year! 2020 here we come!

AVIBE's Favorite Nerdy Thanksgiving Recipes

Fri, 22 Nov 2019 00:00:00 GMT

Butterbeer - Harry Potter

A beverage that everyone can enjoy! This recipe serves 8 and takes around 10 minutes to whip up a batch.

Image Credit: Tastemade

Ingredients:

2 liters cream soda, chilled
¼ tsp caramel extract
¼ tsp butter extract

Frothy Cream Topping:

1 cup heavy whipping cream
½ cup butterscotch topping
¼ cup powdered sugar

Instructions:

Use a large mixing bowl to whip heavy cream until it forms stiff peaks.
Add butterscotch topping and powdered sugar.
Mix the caramel and butter extracts with the cream soda.
Pour into mugs (clear mugs are best)
Top with butterscotch cream topping.

Recipe by: Fav Family Recipes

Almond, Citrus and Lavender Lembas Bread – LOTR

Take your Lembas to the next level - wrap them in green, leaf-shaped paper. This recipe makes about 36 pieces.

Image Credit: The Jolly Fox

Ingredients:

3 Cups Unsalted Butter, softened (this is not a typo, you need a ton of butter)
1 Cup Brown Sugar
1/2 Cup Honey
4 Large Eggs
4 Cups Flour
1 Cup Almond Meal (I made my own by blending almonds in a food processor)
1/2 Cup Slivered Almonds
1 tsp. Orange Extract
1 tsp. Lemon Extract
2 tsp. Vanilla Extract
3 Drops Lavender Essential Oil

Instructions:

Cream butter and brown sugar. Add honey, then eggs. Mix until smooth.
In a separate bowl, mix flour, almond meal, and slivered almonds.
Fold flour mixture into batter, adding the extracts & oil slowly. Mix until well-combined. Carefully fold in dried fruit (optional).
Refrigerate dough until it has stiffened a bit (at least an hour), then preheat the oven to 350F and roll dough out on a floured surface. Dough should be about 1cm thick.
Cut into rectangles, about 2.5 x 2 inches. Gently score the tops with an 'x'.
Bake on a greased tray for about 15 minutes, or until the bottoms of the Lembas wafers have slightly browned.

They can be stored for a few days or frozen.

Recipe by: Tea With Tolkien

Pumm’s Pumpkin Soup – Legend of Zelda: Skyward Sword

Because a pumpkin recipe feels right! This recipe serves 6.

Image Credit: Food and Wine

Ingredients:

3 tablespoons unsalted butter
1 small white onion, chopped
1 clove garlic, minced
1 tablespoon firmly packed light brown sugar
1/2 teaspoon freshly ground cinnamon
1/4 teaspoon white pepper
1/4 teaspoon freshly ground nutmeg
1/8 teaspoon cayenne pepper
One 15-ounce can pure pumpkin puree
3 cups low-sodium vegetable broth
1/2 cup heavy whipping cream
Kosher salt
Crème fraiche, for garnish (optional)

Instructions:

In a large pot, melt the butter over medium heat. Once the butter is just beginning to brown, add the onion and sauté for 5 minutes. Add the garlic, sugar, cinnamon, pepper, nutmeg and cayenne pepper and cook for 3 minutes. Add the pumpkin puree and broth, stir to incorporate, season with salt and bring to a boil. Reduce the heat to low and simmer for 20 minutes. Stir in the cream and let cool for 10 minutes.
Transfer the soup to a blender (or use an immersion blender in the pot) and puree until smooth. If needed, add additional water or broth to reach desired consistency. Return the mixture to the pot or large a sauce pan. Serve warm and drizzle with crème fraiche.

Recipe by: Food and Wine

Peeta’s Cheese Buns – The Hunger Games: Catching Fire

We couldn’t forget rolls – might as well add some cheese to them! This recipe serves 12.

Image Credit: Feast of Starlight

Ingredients:

30g / 1oz - bread flour
¼ cup / 57g / 2oz - whole milk
¼ cup / 57g / 2oz - water
325g / 11.5oz - bread flour
50g / 1/5oz - granulated sugar
8g - yeast
6g - salt
1 - egg, large, room temperature
½ cup / 4oz / 112g - whole milk, warm/room temp
50g / 1.5oz - unsalted butter, room temp
110g / 3.5oz - gruyere cheese, small dice + more for garnish
1 tsp - cracker black pepper
1 - egg, large [for egg wash]

Instructions:

In a small saucepan, mix together the first amount of bread flour, milk, and water. Place over medium heat and stir the mixture while it cooks and thickens. Once it reaches a paste-like consistency, remove it from the heat and set it aside to cool.
Combine the second amount of bread flour, sugar, yeast, and salt in a stand mixer bowl. Mix together to combine the ingredients.
Whisk together the egg and second amount of milk. On medium speed, stream in the milk and egg mixture. Add the cooked flour starter and mixture to combine. Finally, add the softened butter and mix until it forms a smooth dough.
Knead on medium high speed for 10-12 minutes. The dough should be smooth and elastic. Check the gluten development with the window pane test.
Place the dough in a lightly grease bowl and cover with plastic wrap. Place the dough in a warm area for 1 hour until it doubles in size. Gently degas the dough and transfer to a lightly floured surface.
Divide the dough into 12 equal size pieces. Take one piece of the dough and gently flatten. Add a small amount of cheese and cracked black pepper. Fold the sides in towards the center and turn it over so the seam is now on the bottom. Roll the dough into a bun/ball shape. Repeat these steps with the rest of the pieces.
Place the balls on a lightly floured surface and cover. Let it proof in a warm place for 1 hour.
Preheat the oven to 350F.
Whisk the egg and brush each bun with the egg wash. Garnish each one with more grated cheese.
Bake for 20 minutes until golden brown.

Recipe by: Feast of Starlight

Elder Scrolls Sweet Rolls – Skyrim

Let’s skip straight to dessert! This recipe makes 4 rolls.

Image Credit: Feast of Starlight

Ingredients:

3/4 cup warm milk
2 Tbs. honey
Pinch of salt
2 tsp. dry active yeast
3 Tbs. butter
1 egg
1 ½ cups flour

For the Frosting:

2 Tbs. cream cheese, softened
1 Tbs. unsalted butter, softened
2 Tbs. heavy cream
1/2 cup powdered sugar

Instructions:

Preheat oven to 350F. Combine the warm milk and honey, stirring until the honey has dissolved. Add the salt and yeast, followed by the remaining ingredients. Mixing completely until you have a smooth batter. Spoon evenly into a 5” miniature Bundt pan. Allow to rise for 30 minutes, then bake for 15 minutes.

While the rolls bake, make up the frosting by creaming together the cream cheese, butter, and powdered sugar. Gradually add just enough heavy cream to get a smooth, thick icing that barely runs off a spoon.

When the rolls are finished baking, allow to cool for 5 minutes in the pan, then tip out onto a cooling rack. When they are completely cooled, spoon the icing over the tops of the buns, letting it run down the sides a little.

Recipe by: Inn at the Crossroads

Turkish Delight – The Lion, the Witch, and the Wardrobe

Have any many as you’d like, we won’t judge! This recipe makes around 100 candies.

Image Credit: Rachel Been

Special Equipment:

Small (9" x 13") rimmed baking sheet
Heatproof spatula or wooden spoon
Candy thermometer
Large cutting board
Cooking spray or vegetable oil

Ingredients:

For the sugar syrup:

3 cups (575 g) granulated sugar
1/2 cup (175 g) honey
1/2 cup (120 g) water
Pinch of cream of tartar

For the cornstarch mixture:

1 cup (150 g) cornstarch
1 cup (130 g) confectioners' sugar
2 1/2 cups (600 g) water
1 teaspoon (3 g) cream of tartar

For the flavoring:

2 1/2 teaspoons (12 g) rosewater
2 cups (300 g) shelled roasted unsalted pistachios (if you can only find them raw, check out how to toast them yourself on page 284)
2 or 3 drops red food coloring (optional)

For cutting and dredging:

About 1/4 cup confectioners' sugar, for dusting the cutting board
1/2 cup cornstarch sifted together with 1 cup confectioners' sugar

Instructions:

Generously coat the baking sheet with cooking spray, and set it aside.
Make the sugar syrup: Combine the sugar, honey, water, and cream of tartar in a medium-size (4-quart) saucepan, and mix with the heatproof spatula to combine. Bring the mixture to a boil over high heat, and insert the candy thermometer. Reduce the heat to medium-high and cook, without stirring, until the temperature reaches 260°F/127°C (hard ball stage), about 15 minutes.
Meanwhile (keeping an eye on the sugar syrup), make the cornstarch mixture: In a large (6-quart) saucepan, whisk together the cornstarch, confectioners' sugar, water, and cream of tartar to combine. Once the sugar syrup reaches 250°F/121°C (firm ball stage), place the cornstarch mixture over medium heat and cook, stirring constantly with the whisk; it will thicken and boil quickly, 2 to 3 minutes. Turn off the heat, but leave the mixture on the hot burner; stir well a few times with a whisk, and set aside.
At this point, the sugar syrup should be close to 260°F/127°C (hard ball stage); when it reaches that temperature, remove it from the heat and carefully pour it into the cornstarch mixture. Stir well with the whisk to combine. Bring everything to a low boil over medium heat. Then reduce the heat to low and cook at a low simmer, stirring frequently with the spatula, until the mixture is thick and gluey and a light golden color, 30 to 45 minutes. Don't turn your back on it! You need to make sure to scrape the bottom of the pan with the spatula every few minutes to prevent scorching and lumps.
Remove the pan from the heat and add the flavorings: stir in the rosewater, pistachios, and food coloring (if using).
Wearing oven mitts, immediately pour the candy into the prepared baking sheet. Place a piece of plastic wrap directly on the surface of the candy to prevent it from forming a skin as it cools. Allow it to cool until it has set and is firm and cool to the touch, 6 to 8 hours.
Gently peel off the plastic wrap. Dust the cutting board with the confectioners' sugar. Run the tip of a paring knife between the candy and the sheet, and gently turn the candy out onto the prepared board.
Place the cornstarch mixture in a medium-size bowl. Generously coat a sharp chef's knife with cooking spray, and use a gentle slicing motion to cut the candy into 1-inch squares. Dredge the pieces in the cornstarch mixture until well coated.

Store the Turkish delights, layered with wax paper, in an airtight container at cool room temperature for up to 1 month.

Recipe by: The Liddabit Sweets Candy Cookbook

California Consumer Privacy Act of 2018 – October 2019 Update

Fri, 25 Oct 2019 00:00:00 GMT

Recap of California Consumer Privacy Act of 2018 Requirements

In February 2019, we wrote a blog post that outlines the new California Consumer Privacy Act of 2018 (CCPA). Since February, there have been several amendments to the CCPA that passed on October 11, 2019. This blog post provides updates on the CCPA and the recent changes that have been published in the last few months.

To give you a recap, the California Consumer Privacy Act of 2018, also known as the CCPA is a new act that will be effective January 1, 2020. This act includes new regulations on privacy policies, the handling of data breach occurrences, the handling of Personally Identifiable Information (PII), and third-party data sharing/selling of California residents’ PII to third-parties.

The goal of the act is to offer more transparency and control for California residents in regards to how their PII is handled. Although the act goes into effect in January of 2020, July 1, 2020 is the date when the California Attorney General can begin to file suits on behalf of California State.

Companies around the world will have to comply with the California Consumer Privacy Act of 2018 if they receive, process, or sell personal data from California residents. If the company (or their parent company or subsidiary) meets one or more of the these criteria they must be in compliance:

Annual gross revenue of $25 million;
Obtain personal information of 50,000 or more California residents, households or devices annually; or
Receive 50% or more of their annual revenue from selling California residents’ PII.

Businesses that fail to comply with the CCPA requirements could face civil action law suits and state levied fines. There are varying levels of actions that can be taken on behalf of the California Attorney General for violations:

Civil action suits can include actual damages and statutory damages between $100-$750 for data theft or data breaches; and
State levied fines are separated into two categories with different fines: $2,500 fine per unintentional violation and a $7,500 fine per intentional violation.

Want more details? Read the California Consumer Privacy Act of 2018

Recently Approved Amendments

The original version of the CCPA contained several gray areas; leaving many compliance requirements loosely described. Several amendments have passed since, here are a few:

Employee Exemption (AB 25) – This bill would exempt employment information from the definition of “consumer”. This amendment passed in September 2019.
(AB 874) excludes “publically available information” from the definition of “personal information”, and clarifies that de-identified or aggregate information is “not personal information”. This amendment passed in September 2019.
(AB 1146) exempts vehicle and ownership data for purpose of vehicle repair relating to a warranty or recall. This amendment passed in September 2019.
(AB 1202) requires “data brokers” to register with the Attorney General of California and pay a fee; the amount is undetermined at the moment. The fees go towards the cost of creating and maintaining a page on the Attorney General website where data brokers provide their contact information as well as an explanation of their data collection practices. “Data brokers” will be fined $100 for each day they fail to register with the Attorney General.

A survey went out earlier this year and revealed that 71% of companies expect to spend more than six figures to comply with the CCPA; 1 in 5 expect to spend more than $1 million to achieve CCPA compliance. 71% plan to invest in technology to prepare for the CCPA, while 61% plan to spend on consulting expertise.

What Do You Do Now?

Since the CCPA has passed, it is time to act now. The first thing that you should do is get in contact with your Legal Counsel to determine if the CCPA applies to you. If your business does need to comply with the CCPA there are some actions you may need to take:

Work with you lawyer to create or update your Privacy Policy, as well as review existing contracts between vendors.
Contact your web firm to implement “DO NOT SELL MY PERSONAL INFORMATION” consent modals on your website.
Adjust Google Analytics settings to ensure it is compliant with the CCPA’s requirements.

California is not the only state who is proposing stricter privacy around personal information, many others are working on their own privacy act; time will tell.

Disclaimer: This notice is meant to provide you with initial information regarding recent regulations and developments; this should not be construed as legal advice or a solicitation. Speak with your Legal Counsel to verify that your business does, or does not need to comply with the California Consumer Privacy Act of 2018 (CCPA).

Daily Disruption with Data Silos

Thu, 26 Sep 2019 00:00:00 GMT

What is a data silo?

Do you or any of your colleagues use your own spreadsheets or systems to track important company data? Do you share your spreadsheets with others within your organization? If you aren't sharing data, you are working with siloed data. Siloed data is data that is only available in one area or system; it is not universally available to everyone within an organization. Data silos are data that is not being shared with others and isn't stored within a universally searchable database.

Data is a huge factor in business planning, tracking, and forecasting; it should be easily accessible to employees and/or departments who rely on this data to perform their daily processes. If you experience issues accessing important data due to data silos, then you already know how much time of your day is spent searching for the information that you need.

How did we end up with these data silos?

Data silos are common unfortunately, especially in large organizations. Data silos can occur for several different reasons:

An organization is smaller in size and not quite ready to commit to a document management system or architect a robust and scalable database. Many times employees are using their own spreadsheets to manage various data throughout the organization.

An organization has purchased various third-party solutions for different departments. This can have a cascading effect on an organization because most of the time SaaS, or third-party tools are not customized to each organization’s unique needs; this typically leads to organizations purchasing additional third-party tools that fill the gaps of other systems – this is what we call the Frankenstein effect and it isn't pretty.
An organization has competing departments. This type of company culture naturally encourages data silos and team separation; this is typically done to keep valuable data and different systems separate from other departments.

These are just a few examples of how an organization can find themselves in the predicament where data silos create challenges that can traverse the entire organization. If you already have data silos at your organization or in your department, it is inevitable that it will get worse. We urge organizations to not purchase additional solutions until the organization has evaluated “the why” for all of the different systems and tools employees are currently using.

What challenges will we face by continuing to have data silos?

A big issue with data silos is they will not help an organization grow. No organization can scale without a comprehensive view of organizational data; organizations NEED the ability to run reports on their data. Without visibility into the full picture of the organization, how can important decisions be made? They can’t with certainty in this case, it requires communication with multiple departments to stitch together data that can be useful for decision making.

Other pain points with data silos are the wasteful steps in everyone’s daily workflow processes. If a Marketing department maintains a different database or third-party system than the Sales department, this requires extra communication between teams to search and send information to different departments. Time is of the essence, especially in sales; the extra communication required causes unnecessary delays that can potentially result in loss of sales.

The scenario that we see most commonly is inconsistent data across the organization. Without a centralized database that everyone in an organization utilizes, data varies. Inconsistency occurs when multiple departments are creating and maintaining separate spreadsheets, often times for the same purpose or purposes that overlap others’. This leads to confusion between team members and again, ends up wasting valuable time during the day.

How do I centralize my data?

For organizations that have multiple departments, data silos, and multiple applications powering their business it is paramount that critical organizational data is centralized. Consolidating data sources is a greater task than adopting SharePoint or another centralized database; data migration from different platforms is not a trivial task. Outside of necessary data migrations, there can also be processes in place that people are accustomed to from using their own methods and tools for years. Change management and alignment are key when an organization is selecting a new technology platform that will be universal to the business. If your users aren't adopting the solution, what good is it to the team or the organization?

We offer an interactive, full day, Digital Transformation Workshop where our team and yours discuss current tools, processes, and pain points with your technology or lack of technology. We focus on aligning key stakeholders to agree on goals with technology that will provide the largest impact across the organization. During our Digital Transformation Workshop we identify wasteful processes that can be eliminated through improved technology. We also identify key metrics that can be tracked throughout the project which will measure the ROI the updates have on your organization; this can be in terms of saving time and/or money. If you are experiencing pain points with your organization’s data silos, schedule a consultation with us to determine what technology improvements will centralize your data and have the greatest impact on your organization and users.

Choosing the Right Prototyping Tool for UX Design

Tue, 20 Aug 2019 00:00:00 GMT

Updated 05-06-2020

Why Do We Need a Prototyping Tool?

Prototyping is an essential step in the UI/UX process. Prototyping in web design is a way to test out ideas before utilizing too many resources. This can be done with paper sketches, HTML5/CSS3, or a growing number of prototyping tools that make the process much faster and easier. Prototyping tools allow a designer to show how design elements will interact without pulling a developer into the design phase of a project. These tools allow UI/UX designers to explore ideas and ensure that the correct decisions are made for users. Prototypes also allow clients and stakeholders to view and interact with a design as it would appear on the web, before investing in the development phase. This process gives designers data to make correct user experience decisions for both users and stakeholders to feel confident about the design strategy. There are a lot of different prototyping tools; some are perfect for low-fidelity wireframes and mockups, some for high-fidelity needs, and everything in-between. The list of prototyping tools is ever-expanding. We’re only going to focus in on a couple of tools in this post:

Balsamiq
InVision
Axure RP
Adobe XD

If you are interested in exploring other prototyping tools, there is a large list available that breaks down features and pricing for each prototyping tool.

What Prototyping Tools Exist?

There are a lot of factors that go into choosing your prototyping tool. Are you looking for a tool that does it all? Are you hoping to create low-fidelity wireframes but are not channeling Leonardo da Vinci’s artistic abilities? What kind of time do you have to devote to a learning curve with new software? Do you need to communicate with other designers or stakeholders remotely? Are hover effects paramount to your design? Are you looking for a free tool? These are only a couple of questions to ask yourself when considering which prototyping tool to use. To assist you with your research, here are some details about popular prototyping tools.

Balsamiq is a low fidelity wireframing and prototyping tool. They focus on making quick wireframes to ensure that the focus is on functionality rather than design. The components and reusable symbols make creating wireframes quick and easy. Their UI is designed to be clear and simple to use with a number of keyboard shortcuts to streamline processes even more. Each element, once drawn, can be modified to be another type. For example, a box, drawn by holding down R, can be modified to an image by right clicking and selecting modify. Balsamiq includes collaboration by adding people to each project that you can chat with or can comment on specific screens.

Balsamiq is one of the prototyping tools that comes with a monthly or yearly cost depending on the number of active projects you are designing. For 2 active projects, the cost is $9/month or $90 per year. For 20 active projects, the cost is $49/month or $490/year. For 200 active projects, the cost is $199/month and $1,990/year.

InVision is almost opposite to Balsamiq. It allows the designers to create interactive mockups by using transitions and triggers to create interactions and animations. It has a focus on functionality, as all prototyping tools do, but it has more detailed interactions and animations available. It includes Inspiration Boards to help collect stakeholder inspiration at the beginning of requirements gathering to help inform the design direction for the project. InVision has built in collaboration and feedback tools available that allow designers and stakeholders to freehand sketch and add notes to each screen to communicate ideas. What’s great about InVision, is once the designs are approved there is a quick hand-off to development for implementation. InVision includes details about HEX colors, dimensions, appearance, and ensures that the original design elements translate to development without losing any thoughtful design details.

InVision includes several different monthly pricing options depending on the number of active projects. For 1 active prototype InVision is free to use. For 3 prototypes, the cost is $15/month. For unlimited prototypes, the cost is $25/month. For unlimited prototypes and access for up to five designers, the cost is $99/month. InVision also offers an enterprise option that includes unlimited prototypes and extra advanced features like: no user limits, customer support, SAML-based Single Sign-On (SSO) options, and admin controls to assign roles and access levels to team members.

Axure RP is very similar to InVision, it is a tool to create interactive wireframes and mockups; not low-fidelity wireframes. Axure RP allows designers to connect screens to show how a user would interact with the design elements on one screen and how that takes them to another screen. It also has built in tools to slice and crop images without the need for another tool like Photoshop or Illustrator. One great feature Axure RP has is the ability to write conditional logic. For example, a designer can designate what “if” and “else” logic occurs upon page load to emulate the end user’s experience. Axure RP comes with animation effects and gives designers the ability to import SVGs into their designs. Axure RP lends itself well for the transition to development like InVision does; it displays redlines, styles, colors, documentation, and even outputs CSS snippets to roll right into implementation.

Axure RP offers two purchasing models: one for a single designer (Axure RP Pro) and one for a team of designers (Axure RP Team). Axure RP Pro is $29/month and Axure RP Team is $49/month which includes co-authoring on team projects, revision history, and allows for cloud hosting.

Adobe XD brings design and prototyping together in one platform. Designers can create low-fidelity prototypes that move seamlessly into high-fidelity designs and then onto development hand-off. It includes great features like an organized assets panel, auto-animate features, the ability to quickly repeat grids, and with the click of a button you can resize artboards for all responsive screen sizes. Stakeholders have the ability to review and comment on each of the screens and it can integrate with Slack and Jira. Since XD was created by Adobe, Photoshop and Illustrator play nicely together with XD. Designers can open PSD files with XD, which makes updating any older files very easy. Although XD does have the ability to create vector shapes (with more updates coming every day) for anything that is imported from illustrator, you have control to edit the vector without leaving XD.

Adobe XD offers three different pricing plans depending on your need. XD’s Starter Plan is free but limits designers to 1 active prototype, 1 active design spec, a limited selection of Adobe fonts, and 2GB of cloud storage. The standard plan is $9.99/month per user and allows for unlimited prototypes, unlimited design specs, a full Adobe font library, and 100GB of cloud storage. XD for Teams is $22.99/month per user and has the same features as the standard plan; the additional cost with this plan includes onboarding webinars, web-based admin console, and advanced technical support.

What Prototyping Tool is Right for Your Project?

This depends on the project and how for you want to take the mockups. A tool like Balsamiq is great for creating wireframes that focus on functionality more than design. Adobe XD is great for starting with wireframes and evolving them into high-fidelity mockups that reflect how the user will interact with the website or application once it is developed.

We enjoy the inclusivity of Adobe XD. It does everything our designers need in one intuitive platform. Our focus on designing a great experience for users further supports the need to take our initial wireframes and evolve them into high-fidelity mockups that include animation and micro-interactions. If you’re interested in fully experiencing your new website design before it is implemented schedule a consultation with our team.

Better Business in the Cloud - Migrating to Amazon Web Services (AWS)

Tue, 16 Jul 2019 00:00:00 GMT

Amazon Web Services (AWS) is an on-demand cloud computing platform for businesses to power their web applications in the cloud. AWS offers many cloud management tools and services to their customers. The first AWS platform was publically available in 2002, and Amazon is continuing to evolve their solutions and expand their service offerings for their customers. AWS offers many services for cloud storage, database management, and they are supporting newer technologies like Machine Learning, Internet of Things (IOT), and Augmented Reality (AR)/Virtual Reality (VR).

Our team has leveraged AWS to support many of our clients’ applications, particularly migrating their robust business applications into the cloud for increased performance, security, and reliability. An added benefit of AWS is it is cost effective; all of their pricing is based on the AWS setup and services selected to fit each unique application’s requirements. Amazon offers pay-as-you-go options, discounts by reserving instances, and also offers volume based discounts. AWS is currently used by over 1 million customers and has an expanding global presence; AWS is currently available in 21 regions around the world and they are continuing to grow their digital reach.

Features Offered by AWS

AWS offers many on-demand tools and services to their customers and enables them to modify and change their subscribed services as needed. Here are a few:

EC2 instances for server configuration and hosting
RDS options to quickly setup dedicated instances for databases that are fully managed by AWS’s support team
Auto-scaling and elastic load balancing, which means IT departments no longer have to estimate their computing needs
Reliable backups and disaster recovery
CloudWatch to monitor real-time analytics
CloudFront Content Delivery Network (CDN)
Secure environments with multi-factor authentication and encrypted data storage options
Versioning
And much more…

Benefits of Being in the Cloud

We have seen significant performance increases in the applications that we have migrated to AWS; on top of that, our clients have seen increased cost savings from the migration! We encourage anyone that is experiencing issues with latency, and/or want to save on hosting costs to explore migrating to the cloud. Here are some other benefits we have seen when using AWS:

Scalability - AWS scales with your application and database by offering tools to quickly spin up or shut off additional servers as needed, within minutes. They even offer auto-scaling options that upon setup can be left to AWS to manage autonomously. There are no long-term commitments or upfront expenses for AWS.
On-Demand Management - AWS comes with the AWS Management Console which gives you visibility and control of all your AWS services; you can sign-up for new services, manage existing services, as well as access robust analytics for ongoing server monitoring.
Agnostic – AWS doesn’t favor operating systems or programming languages over another in the cloud; they support a range of databases, operating systems, and programming languages.
Reliability - AWS has impressive reliability in regards to uptime and scalability – for this reason many enterprise businesses like Comcast and large web apps like Netflix are hosted on AWS.
Sustainability – AWS is committed to sustainability and our environment. They aim to use 100% renewable energy to power their data centers and continue to move the needle by continuing to announce new wind and solar farm projects.

To Cloud or Not to Cloud – Is That Even a Question?

More and more businesses and organizations are turning to the cloud as a great solution for secure hosting, increased cybersecurity, and on-demand management tools to better support and scale their applications. AWS allows organizations to work faster, reduce downtime, ensure a great user experience, and generate a higher revenue. Additionally, many organizations and businesses are choosing AWS over other cloud solutions because Amazon is constantly evolving their services to better support their customers. Check out the latest updates AWS has released.

AWS is dependable, cost-effective, and trusted by many organizations and continues to have a positive impact on a business’ bottom line. Are you interested in moving your applications to the cloud to save on server management costs and headaches from recurring downtime? Reach out to us to schedule a consultation to discuss cloud options that can better support you and your users.

Choosing the Right JavaScript Framework For Your Project

Mon, 17 Jun 2019 00:00:00 GMT

Updated 05-06-2020

What are JavaScript Frameworks?

JavaScript (JS) frameworks have evolved over the years and have provided more features and tools for developers to create beautiful, data-driven web applications. JavaScript frameworks define the entire application’s front-end design. One great thing is JavaScript frameworks will call and use the code as programmed, rather than the developer having to call the framework – this improves code quality.

Some popular JavaScript frameworks are Angular, React and Vue which aid in developing highly interactive web applications. These three frameworks are very similar but have unique nuances that distinguish themselves from each other.

Angular JS - Angular was released by Google in 2010. It represents a full, MVC application framework and toolkit for developers that runs within the browser. Angular is geared towards complex Single Page Applications (SPAs) which load asynchronously. Angular encourages the use of TypeScript which is advanced JavaScript that is compiled down to be run in the browser. Angular requires packaging and command line tooling for proper utilization.

React JS - React was released by Facebook in 2013. It is not a full application framework, it is more of a library that focuses on building interactive UIs. It uses a custom JSX templating language which is similar to HTML. React is heavily geared around JavaScript modules and functionality; it also requires packaging and command line tooling as Angular does. Facebook and Instagram are currently built using React.

Vue JS - Vue was released by a man named Evan You in 2014, with the goal to make modern UI development approachable. Vue is similar to React in that they both are more focused on the “view” aspect in MVC, as opposed to Angular that focuses on the full MVC aspect. Vue has two modes and uses an incrementally adaptable architecture that includes official add-ons for building applications. Vue can require packaging and command line tooling.

All three frameworks are great options for developing interactive applications and can achieve the same end goals. Both Angular and React need to be built out from the ground up using JavaScript, while Vue has an option to include a Vue JS file to an existing HTML page which saves time. For example, you can select an element on the page and include the Vue JS file which allows you to utilize their view components; because of this, Vue is arguably the most versatile framework.

Why Use a JavaScript Framework?

There are many different reasons we use JavaScript frameworks when developing web applications:

JS Frameworks introduce Components and Modularity in JavaScript which outputs clean code
Frameworks eliminate unnecessary DOM management code, similar to jQuery, so you can focus on creating a view and eliminate extra work
JS Frameworks decouple the client (browser) from the server which gives you a separate application on the front-end running in JavaScript and HTML, and separate back-end application on the server running .NET or another server-side programming language
Frameworks allow you to power multiple platforms with one server using a REST API
Frameworks are great for developing Single Page Web Applications (SPAs) which requires no page reloads and a displays one page view – like you see with Gmail, Google Maps, or Facebook
JS Frameworks have improved browser compatibility and provide more flexibility with what you can do with JavaScript

Above all, JavaScript frameworks let us develop quickly and efficiently which saves numerous hours on our JavaScript heavy projects.

Is Vue Right For Your Project?

Yes, most likely! Ask yourself the following questions:

Do you need a highly interactive web application?
Do you want your users to access content without requiring multiple clicks?
Do you need to load data asynchronously with formatting capabilities as data changes?
Does your project require the need to break up your data and associated formatting into specific components to be reused on other parts of your UI?

If you answered yes to any of these questions, Vue may be the best choice for developing your new web application as it is highly interactive and efficient.

Resources For Developing a New Web Application Using Vue

Vue provides official add-ons developed by the Vue team to help expedite development processes. Vue has great documentation that can be referenced throughout the development cycle as needed.

Our team uses some or all of the following resources on our clients’ Vue projects:

Vue CLI (Command Line Interface) - This provides our team with tools and starter templates for packaging, building, unit testing and deploying Vue applications; Webpack is a popular option to start with.
Vue Components - We use .vue components which is recommended for building applications with Vue. Utlizing .vue components reduces the need to bind individual index/HTML pages.
Vue Router - This is the official router for Vue.js which provides tools for mapping Vue components to browser URLs. The Vue Router also includes built-in support for browser history and many other helpful features our team utilizes.
Vuex State Management - This is the official state management library for Vue which is based on React’s Redux and Flux patterns. This library creates a central data storage system throughout the application instead of individual components loading data directly. This allows multiple components to share the same data and to be aware of changes in the state of that data.

Bring Content To Life Using CSS3 Animations

Wed, 15 May 2019 00:00:00 GMT

Why Use CSS3 Animations?

Animations are becoming more and more popular on the web and for good reason. Some sources suggest that humans process visual information 60,000 times faster than reading text. When visuals are moving it draws attention to the eye and keeps users engaged for longer - the ultimate goal of a great user experience.

Animations are a great way to get a point across to a user quickly, like providing directions on how to navigate through a new user interface. They can draw attention to specific elements or guide users through a process in an intuitive way. Animations are amazing at what they can accomplish but there are nuances that need to be considered to make the end result successful.

Considerations When Implementing Animations on Your Website

Most importantly, don’t get carried away with animations. If animations are used too much throughout the site they lose their value and can become obnoxious to users; this could cause them to abandon your site all together. If there are animations that are constantly running it is important to include an option for the user to turn the animations off; especially if there is sound associated with it.

Timing is crucial for successful animation implementation. Anything that runs in 0.1 of a second will seem automatic to users and won’t be perceived as an animation. Different users will notice animations at different times. For example, an older user may need 0.7 of a second to see something, where a younger person may notice it in a 0.25 of a second. A good rule of thumb is keeping the animations within 0.1 of a second and 10 seconds; you will lose people after 10 seconds.

Different Types of CSS3 Animations

There are three ways to use animation using CSS3: Transitions, Transform, and Animation Keyframes.

CSS Transitions
- Transitions allow you to change CSS property values smoothly from one value to another over a specified period of time. Transitions allow developers to specify a delay in seconds for the transition effect and allow you to specify how many seconds or milliseconds a transition effect takes to complete. Transitions allow full control over the timing by applying different timing functions like: ease in, ease out, ease-in-out, etc. which are very similar to animations within presentation software like PowerPoint, but with more control. There will be times when you will not want to use Transitions, like changing a font size or image size drastically; it can become shaky as it transitions.
CSS Transform
- Transform can work very well when you want to change a font size or image and not become shaky or jumpy. Transform has both 2D and 3D properties available. 2D Transform properties allow you to rotate, scale, move, skew, etc. your animated element. 3D Transform properties are much more fun and visually interesting, they really allow you to make elements come alive! 3D properties allow you to change position, specify how nested elements are rendered in a 3D space, change perspective, define whether an element should be visible when not facing the screen, and much more! 3D Transform also allows you to specify the methods in which you would like the element to move around; like translating, scaling, rotating, perspective, etc.
Animation Keyframes
- Animation Keyframes are great to use when you want to change as many CSS properties you want, as many times that you want to; this allows more control when you want an element to do more than transition from 0% to 100%. To begin using Animation Keyframes you need to declare the animation name and duration at minimum and then can use Keyframe properties to designate what points in time you want the styles to change – you can use as many style changes as you like.

Animation Examples

There are a lot of great resources and ideas for animation inspiration on the web. Here are some examples that you can look at to see different animation use cases:

Here you have a fun example that makes filling out a form fun
This site has great examples of directional hover effects
Here you can see an example of animated script
This site’s homepage uses many different applications of animation
We can’t forget the wonderful w3schools that has many CSS Animation examples

If you look at our website www.avibeweb.com you will see many different uses of CSS3 Animations and cool hover effects!

Animations are wonderful for drawing attention to key content or elements on a webpage. They are fun, engaging and promote a great user experience when interacting with a website. If your website could benefit from animation to drive engagement and re-engagement of your users, schedule a consultation with our team to strategize how animation can bring your content to life.

Personalizing the User Experience

Mon, 15 Apr 2019 00:00:00 GMT

Personalized Content Catered to You, But Who Are “You”?

Personalization on the web has lent itself well to providing users with a customized and targeted user experience. Personalization can help your site perform better for your users and increase user traffic to your content. There are numerous different approaches for how you can choose to personalize content but the first step is identifying who you are personalizing experiences for.

You need to identify who your audience is first and foremost and then you can dig a little deeper to determine what makes each user within a user group unique. We can do this by asking specific questions like:

Who is currently using the site?
What are their demographics?
Are they tech-savvy?
What do they want/need?
How will we help them achieve their wants/needs?
What will we do to add value to their visit?
What competitors are vying for your audience’s attention?
What are competitors doing right and wrong, are they creating opportunities for you?

Once you learn more about the differences within your various user groups like their age, location, etc., you can hone-in on specific goals that users would like to accomplish and assess how those goals align with your business’ objectives.

Identifying unique goals, actions, or behaviors you want your user types to take will vary depending on your business and industry. For example, if you have an online store to sell your products you would want to focus on conversions; as opposed to a membership-based organization that wants to focus on onboarding new members. These actions fulfill both the user’s intent as well as your business’ objectives. To strategize balancing user goals and business goals, you will want to ask yourself questions like these:

What message do I need to get across to support the user and my business goals?
- Features and benefits
- Counteract negative interpretations
- Inspire and educate
- Visual or text focused
- And many others
What is the best way to relay my message to my audience?
- Notifications and Calls-To-Action
- Cross-promotion of content – lead users on their requested journey
- Personalized User Profile and Dashboard
- Simple, single page design or a multiple layered taxonomy
- It could be all of the above
What metrics do I want to track to determine if I have the right personalization strategy?
- Click-throughs
- Form submissions
- User behaviors
- Time on site
- And many others

After the user and business goals have been defined, it is time to determine what personalization approach will be the most successful at engaging your audiences.

UX Personalization Approaches

User Experience Research is the first step in content personalization; you can’t beat a strategy that is based on real data and feedback. There are many different ways to gather user data and obtain the information needed to learn more about your users and their needs. These are some of our favorite processes to help inform our content personalization strategies:

Collecting Data – There are different approaches to collecting data from users. You can rely on Google Analytics data, use geolocation information, or survey users from a subscription or mailing list.
User Journey Mapping – Once the user personas are created with their core needs and goals in mind you can begin mapping out workflows or journeys. These user paths should naturally lead the user from point A to point B; which in turn, fulfills user needs as well as your business objectives.
Information Architecture – User journeys and Information Architecture go hand-in-hand. Once the conversion funnels are mapped out, you need to make sure that your site more than supports that journey – it needs to feel easy. If it is not easy for a user to navigate from point A to point B the user will abandon your site. Information Architecture analysis will address any re-architecting of navigation strategies and user interface (UI) layout designs to support each unique user journey.
Personalized Content Strategy – Once the Information Architecture supports the user journeys you can begin thinking about what types of content, imagery, and Calls-To-Action (CTA’s) will best speak to each user type. Targeted imagery and strategic use of CTA’s is a great way to silently lead users on their specific path through the site to fulfill all needs.

All of these processes will help you determine a good strategy for personalized content on the web. One thing we didn’t fully address is the best approach to collect data. There is nothing that a user dislikes more than feeling like their privacy is being violated and it is important that you are thinking morally about how you are accessing user data to inform personalization strategies. Companies that are fully transparent about data collection with the goal to improve the online experience are often times welcomed by users.

What About User Privacy?

Privacy is very important to consider when creating a personalized user experience on the web. Have you ever been talking about a product that you are interested in with a friend, only to login to your Facebook account and see an advertisement for that product at the very top of your newsfeed? This can be very convenient for some consumers but there are plenty of consumers that will instantly be spooked and log out of the app. Privacy is very important in the digital world we live in and users need to feel like their privacy is supported in order to build trust with your site and company.

There are many ways to collect and use data to gain user insights, but what data can you collect ethically these days? New laws have been put in place, or will be effective soon, that require businesses to get opt-in approval prior to collecting or distributing Personally Identifiable Information (PII) from your customers or users. Europe led the way by implementing the General Data Protection Regulation (GDPR) and as of January 2020, California will be implementing the California Consumer Privacy Act (CCPA).

Here are some different ways to gather insightful user data to support the user experience that we would like users to have on the sites we build:

User Surveys and Interviews – We love this! We get to choose the questions we ask and the users are happy to share pain points and ideas in order to achieve a better user experience. Plus, there’s nothing better than getting qualitative information directly from the source.
Google Analytics – This is great quantitative usage data that can show trends to see what pages are most popular, show demographic data, show usage on different devices, and much more!
Campaigns and Landing Pages – By setting up specific marketing campaigns that target unique user types you can learn how users interact with those landing pages to help determine their core goals. Knowing the user’s specific goals is helpful for personalizing the experience for them.
Geolocation – Mobile devices are smart, really smart. They can tell where users are at when they make crucial online conversions. For example, many retail stores are using beacon technology to strategically display relevant discount messaging to users when they are close to the store to encourage conversions.
Machine Learning – This is newer AI technology that can analyze data and identify patterns that inform actions based on those learned patterns. This can be used to strategically recommend a relevant product to a user based on their purchasing patterns.

These are all great data gathering strategies, be sure that all data collection is gathered ethically by allowing users to easily opt-in or opt-out of sharing their personal information. You can read more about collecting personal data in our February Talk Nerdy To Me blog about the CCPA.

Design and Develop for Your Users When You Can, But Don’t Force It

Above all else, make sure you are designing and developing for a great user experience for all audiences. With that being said, content personalization will require some work from you in order to be successful. Personalization strategies need resources to support new content generation. You need to ensure that there is enough viable content and you are regularly creating fresh content to target audiences; you want to keep them coming back for more. A personalized user experience is key in engaging and re-engaging users to interact with your site. Personalized content is a great investment and ROI booster by building a sense of trust and understanding with users. If users feel cared about, they will keep coming back. Do your users or website need some love? Schedule a free consultation with us!

Gamification - Recognition and Reward in eLearning

Thu, 28 Mar 2019 00:00:00 GMT

Updated 05-06-2020

eLearning in the Workplace

As businesses and organizations grow, employee training at a large scale becomes crucial to support company engagement, expansion and encourage internal employee progression into leadership roles. eLearning platforms are becoming more prevalent in sales and operational industries to help train new employees. Many companies are reporting increases in sales numbers, employee engagement, as well as more team members being promoted to leadership positions. Culture plays a big factor in determining what type of curriculum and content will have the greatest impact on the team and company. Many businesses are exploring Gamification techniques within their Learning Management System (LMS) to make learning more compelling to the users.

What is Gamification?

Gamification is not the “gaming” you are thinking of — it is very different than playing video games or computer games — but does utilize some similar concepts like leaderboards, badges and awards. Gamification is the application of game design elements and game principles in non-game contexts. Do you remember the computer games, Math Munchers and The Oregon Trail? These are great examples of Gamification and eLearning from the good old ‘90s.

The goal of Gamification is to elevate the content by making it fun to absorb. Gamification techniques with high levels of engagement provide users with a better learning experience; they do this by being able to grow their knowledge in a private setting that allows superiors to monitor progress and provide instant feedback. When Gamification is done right it can lead to an increase in content retention and can prompt behavioral modification in the workplace. From a Manager’s perspective, Gamification can support customer service initiatives, increase onboarding efforts, and boost company sales. Business owners can see the impact have a positive effect on leadership development, as well as their bottom line.

Some successful Gamification techniques include:

Point systems and leaderboards
Interactive quizzes and instant feedback
Badge assignment when users reach key milestones
Leveling up
Audio and visual content strategy
Challenges
Progress bar

These concepts combined or stand-alone support personalized learning experiences that recognize and reward users for their advancement; this creates a sense of progression and accomplishment in the user’s mind. When people feel recognized they intrinsically want to continue to grow and accomplish more. These feel-good reactions help support knowledge retention and increase engagement leaving users hungry for more.

Gamification is Bigger Than Badges and Points

Gamification within eLearning platforms is not all about earning a badge for reading the company handbook, it’s much bigger than that and can depend on their business’ motivation. For example, if you want to increase your sales team’s performance a point system with badge recognition is a solid concept. Badges and leaderboards promote employee’s competitive drive and could work well in that workspace. We recommend that you keep your company culture in mind when implementing a point system, you don’t want to alienate employees from each other or create internal hostility.

If a business’ goals are onboarding and training new employees quickly, a combination of interactive videos and quizzes in a levelling up scenario can help learners retain and recall knowledge quickly. This scenario is great because it also allows Management to test the user’s progress. Because industries and their goals vary, choosing the right Gamification technique(s) will vary; the last thing you want is for your concept to be rolled out before gathering insight internally – you don’t want it to be a flop. If you are unsure what techniques would be most effective and beneficial to your business, we are happy to schedule a consultation to help determine what gamified curriculum will work best for your team and business.

Gamification Examples

You have probably been exposed to more Gamification examples than you realize. From fitness apps like Fitbit to Starbucks loyalty program, Gamification is everywhere. One of our favorite learning apps is DuoLingo which is a mobile app that teaches native English speakers a new language of their choice. DuoLingo uses the following Gamification techniques effectively and we can attest that they will get you hooked!

Interactive quizzes that test your written translations, spoken translations as well as multiple choice questions for variety
Instant feedback for correct answers and it shows you what you missed
Points for correct answers
Badges for regular app logins, progress and improvement
Leveling up to new categories

DuoLingo has been so successful that schools are adopting the platform. They even did a case study to test its effectiveness against a normal classroom curriculum and gauge student satisfaction with the application.

Check out one of our successful eLearning projects for TEAM OREGON that has replaced the need for an in-classroom course. It has been so successful that other states are adopting and customizing the curriculum to fit their unique needs.

Measuring Success

Data is great! Tracking logins and progression through modules can allow Management to gauge which Gamification techniques are successful and which could be abandoned. Look at the data but also speak with your users, they are going to give you direct feedback of their experience and can surface pain points and insights that wouldn’t otherwise be shown by only looking at numbers. Another approach to measuring your eLearning success is by A/B testing your Gamification approaches by allowing users to “unlock” new features based on their progression or levelling up; you can introduce new recognition or reward techniques to see how it lands with users who are already engaged and actively using the LMS.

A key success point for effective eLearning Gamification strategy is ensuring that the users are engaged using the application and more importantly, enjoying learning and retaining content. If users don’t enjoy the user experience or the content and Gamification strategy employed, they will be less likely to adopt the platform. Make learning fun, engaging, and make it memorable. As technology continues to advance, we will likely be seeing more eLearning applications utilizing artifical intelligence and augmented reality (AI/AR) to take their curriculums and Gamification techniques to the next level – we can’t wait!

California Consumer Privacy Act of 2018 - What Is It, And What Does It Mean For Your Business?

Wed, 27 Feb 2019 00:00:00 GMT

The California Consumer Privacy Act of 2018 is a new law that will have wide-ranging impacts on how businesses everywhere (regardless of whether they’re based in California or not) interact with their online customers.

The act, known as CCPA, is set to take effect January 1, 2020. The CCPA regulates how companies handle data breaches, Personally Identifiable Information (PII), the sale of data to third parties, and consumer requests to review and delete the data. Companies who do business in California should invest now in technology to help them tackle new logistical challenges brought on by the law. Those who fail to comply—either intentionally or unintentionally—will face steep fines and consumer lawsuits that could add up to millions in losses.

Which companies must comply with CCPA?

A company that interacts with Californian consumers must meet one or more of the following criteria to be subject to CCPA regulations:

Gross at least $25 million in revenue annually;
Obtain personal information of 50,000 or more California residents, households or devices annually; or
Receive 50% or more of their annual revenue from selling California residents’ PII.

Parent companies, subsidiaries and affiliates under the same branding are considered one “business” in the CCPA even if they do not meet the criteria above independently.

What does CCPA compliance look like?

To comply with CCPA, qualifying companies must:

Notify existing and potential customers about what data will be collected and allow them to opt out. This opt-out notice is required each time data from a new information “category” is collected. Picture this as a popup or form on your website that explains what information will be collected and options to opt in or out. A business that collects consumer’s personal information needs to include the reason for why each category of PII will be used. A business cannot collect additional categories of PII or use PII for additional purposes without notifying consumers.
Process and honor requests to provide and delete copies of a consumer’s PII, which can include but is not limited to: Real name, alias, postal address, unique personal identifier, online identifier, cookies, IP address, email address, account name, social security number, driver’s license number, passport number, or other similar identifiers. PII also includes browsing history, search history, geolocation and information regarding a consumer’s interaction with a website or advertisement. Consumers must be able to make these requests via a toll-free number or website process. They can request information about PII collected in the last 12 months. When a consumer requests this data, the business must tell them from which categories and source their PII was collected, the business’ reason for collecting and selling the PII, and the categories of third-parties to which the business shares/sells PII.
If consumers’ PII requests are deemed excessive and repetitive, the business can charge a reasonable fee to help offset the administrative costs of complying with the request. Businesses are also able to refuse requests on the grounds of them being excessive. But the business will bear the burden of demonstrating that any verified consumer request is “excessive.”

What will happen if a business doesn’t comply?

Businesses that do not comply may face civil action lawsuits and state-levied fines. There are varying levels of actions that can be taken by California and consumers.

State-levied fines come in two varieties: $2,500 per unintentional violation and a $7,500 per intentional violation. If a business regularly handles thousands of pieces of PII or more, there’s significant financial risk here.

There could be a bigger threat, though: According to Security Now, an online publication about information security, the CCPA clearly grants people the right to bring lawsuits for the breach of their “non-encrypted or non-redacted personal information” even without proof of actual damage. They can recover between $100 and $750 per incident or more if they can prove actual damages exceeding $750.

While the per-incident amounts are not high, they could quickly add up if consumers are regularly filing them or if a class-action suit is filed.

What can companies do to prepare?

To process the large volume of requests related to PII, companies should consider refining how they organize, access, and track data and notify website visitors about what data they’ll be collecting and why.

If you’re at a company that qualifies for CCPA regulation, consider implementing the following technology solutions to reduce future operational headaches:

Streamlining opt-in and opt-out processes on your website. Make the processes as clear as possible for users. It’s important to note that there is a mandatory opt-in requirement if your company sells PII of California minors who are under 16 years old. Practically, this means deploying a notification/alert/popup system on your website that’s smart enough to determine if a visitor should have the opt-in/opt-out options, which PII they need to be notified about, and to collect their response and adjust other functions of your website or web application accordingly.
Consider how you’ll respond to and process consumer requests to access their PII in a timely fashion. How will you locate and delete select PII records after a consumer requests it? You have to tell the consumer what PII of theirs you have and remove it within 45 days unless the scale of the consumer request requires a longer window. That’s not a lot of time, especially if you’ve got a backlog of requests piling up. Your approach should be organized and methodical. Consider implementing a tool in your site’s back-end that allows a designated staffer to review a queue of consumer requests, accept or reject them according to CCPA stipulations, easily locate the requested PII, and automatically send it to the requester before deleting it from your database. This system will also allow you to easily maintain a log of all requests and subsequent actions for auditing purposes.
Are you able to easily determine exactly who you’ve sold a piece of PII to? Can you filter purchasers of the PII you’ve collected by category? Consumers will have the right to request this type of information from you, and by law you’ll need to respond to them with detailed information within a short timeframe. Unless you already have a robust tool for filtering, searching, and organizing the PII you collect through your website, sales process, or web application, now is the time to invest in one.

Writing on the wall

California is taking the lead on personal information and privacy sharing. The implementation of the CCPA could potentially be a catalyst to a larger initiative on the federal level that all states must comply with. Future-looking business will prepare as if that’s the case.

Please also note that The CCPA is a new act and could evolve substantially prior to implementation in early January 2020. Please subscribe to our Talk Nerdy To Me Blog to follow updates regarding the CCPA and how it will affect your business.

10 Modern Logo Design Trends in 2019

Mon, 07 Jan 2019 00:00:00 GMT

Branding is the first impression you make and first opportunity you have to “speak” to your target audience. First impressions are key in building trust with your customers and one of the first things people see is an organization’s logo; this is why it is so important to make sure your brand and logo remain modern and continue to “speak” to your customers.

We recommend that businesses revisit their branding strategy and guidelines every 2-3 years to remain modern. By no means do you need to fully rebrand that often, but you need to be aware of what message you are conveying to potential and existing clients. Simple updates can be made each year to make sure your business’ branding does not look dated – check out this logo modernization our design team created for our client upon redesigning their website. It is very clean, simple and still completely recognizable by making only small font and color changes.

Rebranding efforts can range in scope – minimal updates to a full overhaul if needed. If you are considering rebranding or refreshing your logo design in 2019, here are some trends you can expect to see.

10. Monochromatic

Monochromatic logo design uses one color. By no means does this result in a boring design. The different shades, tints and tones of one selected color can vary greatly; they can emulate depth and texture, and they can be complicated or simple. Often times a logo will have a one-color version, even if that isn't the preferred version of the logo. This approach lends itself to greater flexibility when designing branding elements.

www.portlandmonthly.com

www.mastercard.com

9. Perspective

Using perspective in interesting ways is becoming more popular and will continue in 2019. The visual interest behind this approach is very engaging when executed effectively; playing with distortion adds originality to the design. Outside of adding interest, perspective can give a logo greater impact. For example, a construction company that specializes in road construction has an "A" as their logo; this wouldn't typically stand out but utilizing perspective can merge the shape of a road going over a hill with the letter "A" and their logo would then provide insight into what the company does.

Logo by Landon Cooper

www.dropbox.com

8. Bright Colors

Bright and vibrant use of color in logos will continue to be seen in 2019 as businesses and organizations are using color to communicate in different ways. Color can communicate the brand story to the users through color. Bright colors are fun and eye catching, but can also be used to influence customers.

www.mozilla.org

www.spotify.com

7. Negative Space

The use of white and negative space is not a new design concept and we will continue to see it trending in 2019. Using negative space in a creative way can greatly enhance the logo’s uniqueness and add a new level of visual interest to the design. Negative space may not be discernable at first glance but can add another layer of meaning that would not be possible to communicate otherwise.

www.basecampbrewing.com

www.adobe.com

6. Simple Typography

Minimalistic type design will continue to trend in 2019. One driver of this could be the continued growth in use of mobile devices; screen real estate is crucial and the content should not be shadowed due to the placement of a large and complex logo design. We have seen many companies move from a complex typeface to a simple sans-serif font to support the growing number of consumers shopping and living online. Sans-serif font is easy to read and lends itself well on mobile devices. Simple text-only logos display well on all devices and they also translate well for implementation on print media materials.

www.uber.com

5. Illustration

In 2019, we will see more logo designs that include illustration in creative ways. Illustration is fun, unique and depictive – it can be used to communicate your organization’s services, expertise or mission visually. When done well it can make your logo instantly recognizable. Illustrative logos can be complicated or minimalistic and provide a more natural feel of a brand. Illustrative logos can work well when paired with hand-drawn typography to create a unified illustration.

www.laughingplanet.com

www.portlandbeerweek.org

4. Gradients

Gradients have been trending throughout 2018 and will continue to do so in 2019. The smooth transition between colors both cool and warm adds interest to a simple design and the use of color attracts the eye.

www.itunes.com

www.instagram.com

3. Geometry and Iconography

Text or simple designs can be elevated using geometric shapes to help communicate who the organization is. These shapes can be playful and intricate or bold and simple and still be effective in their own way. Iconography is typically seen next to or above the logo but are often used as a standalone representation of the company which is convenient for scaling a logo down for smaller screen sizes.

www.microsoft.com

www.conagra.com

2. Hand Drawn

Hand drawn logo trends are on the rise and expect to see more in 2019. Hand drawn design typically includes detailed design work that supports hand drawn typography; this can still appear to be minimalistic when done right. Unique, hand drawn designs allow the company's originality to come out and make your business stand out from your competition.

www.wildflowerbakingpdx.com

www.10barrel.com

1. Cut Typography

Cut typography takes fonts to the next level by cutting away portions or sections of text to create added visual interest to a rather simple font. This approach to typography is readable even at a quick glance; the human brain is amazing at filling in the gaps. Is can create secondary iconography that can be utilized as a standalone component for the brand or mimic the icon to create a unified design.

www.logitech.com

www.deviantart.com

Each of these logo design trends translate well on their own, but if you look closely you will notice an overlap or hodge-podge of trends in some of the examples we shared; like the use of bright color and gradients, or the use of monochromatic black text paired with negative space. These are only a few logo design trends that we expect to see but we also expect to see new concepts that evolve in 2019 that we haven’t seen yet - these could be completely new approaches or a compilation of the trends we mentioned. Either way, we are excited to explore some of these logo trends in 2019. Which 2019 logo design trend is your favorite?

Intrinsic Design - Melding Digital Art and the User Experience

Wed, 24 Oct 2018 00:00:00 GMT

What is Intrinsic Web Design?

In 2011, Responsive Web Design changed the way we interact with the web. The emerging use of mobile devices forced Designers and Developers to step away from their desktops and think about web development on a smaller scale. Responsive Design has allowed us to stay connected while on the go and helps us quickly digest large content sets in a condensed and user-friendly way.

Responsive Design was only the beginning of the shift in designing for mobile-first/mobile-friendly experiences. In 2018, Jen Simmons, a designer supporter at Mozilla, spoke at the A List Apart Event in Seattle and the topic of her speech was, “Everything You Know About Web Design Just Changed”. This title was intriguing and a bit jarring, but once she explained that websites are more than a layout and began talking about a new approach to web design (Intrinsic Design) - we were all ears!

Responsive Design Versus Intrinsic Design

Responsive Design was coined by Ethan Marcotte eight years ago; this was a big shift in the web world at the time. Marcotte defined Responsive Design as utilizing a fluid grid and media queries to change the design at different break points in order for the design to fit and display well on both mobile and desktop screens. Responsive Design squashed the “fixed width” and “tables” concept that many of us learned in HTML 101.

Technology is ever evolving, even the newest techniques like Responsive Design were bound to grow and progress over the years – meet “Intrinsic Design”. The word, “Intrinsic” means belonging to the essential nature or constitution of a thing. In the web world, Intrinsic Design allows our Designers more creative freedom when they design new user interfaces by letting the content determine the layout. There are many similarities, as well as differences between Responsive and Intrinsic Design capabilities:

Responsive Design uses flexible images which shrink and grow depending on the size of their container, while Intrinsic Design allows you to use flexible images as well as fixed images so the content decides which approach is best.
Responsive Design uses fluid columns to effectively utilize all screen real estate regardless of screen size; Intrinsic Design uses fluid columns as well as rows to provide Designers and Developers with more flexibility.
Responsive Design uses media queries to adjust screen sizes for different breakpoints, while Intrinsic Design does not need to rely on media queries.

Responsive Design paved the way for Intrinsic Design to come to fruition, Intrinsic Design is basically Responsive Design but running on four cups of coffee. By using emerging CSS modules like Flexbox and CSS Grid Layout; Designers can now properly layout their designs the exact way they want them to be laid out while avoiding hacky code or third-party frameworks to make it work.

Digital Art and the User Experience

Intrinsic Design allows both Designers and Developers to think outside of the normal breakpoints they are used to and take the user experience to the next level. More flexibility to design means user interfaces are more than just a layout; they are digital art that users can interact with. Now Designers and Developers can REALLY use white space intentionally and squish, stretch or shrink elements as they see fit to produce an end product that truly speaks to users regardless of their device of choice.

Here are some examples of sites that are using Flexbox to effectively reorganize site content in unique ways when you alter the size of the browser window:

We are excited about Intrinsic Design and all of the artistic freedom that it allows our Design team to explore. We appreciate the respect that Intrinsic Design supports the medium of the web, it is not a newspaper or Word document – it is interactive and dynamic. If your site needs a redesign, it is best that you consider Intrinsic Design approaches to make your content shine regardless of the device and resolution you are using; after all, the content is what is bringing users to your site in the first place.

Resources

There are a lot of Intrinsic Design and layout resources available for you to explore:

CHEF'STORE – Order Online with Click&Carry

Fri, 01 Jun 2018 00:00:00 GMT

CHEF'STORE

CHEF'STORE has been a pleasure to work with over the years! We recently launched their response, redesigned website which includes new features to better support their customers' online experience like:

Easier navigation on all devices
Larger product images
Online shopping lists
CHEF'STORE Customer Card
Emailed product specials
Select your store
In-Store Tours
Text and email notifications
and much more!

Click&Carry

One of the newest features growing at CHEF'STORE is their Click&Carry program. Click&Carry first made its debut in Salt Lake City, Utah in 2017. The initial launch was so successful that more CHEF'STOREs are now participating in the Click&Carry program; to date, CHEF'STORE has fulfilled thousands of orders through the Click&Carry program at its participating locations.

The way it works is customers can register for a customer account, begin shopping at their participating CHEF'STOREs online, and place an order to be picked up at a later date. Schedule a pick-up time that works best for you, chose next day or up to 14 days out. Once you place your order you will receive an email or text message confirmation with your order details. Email and text notifications keep you updated while your order is being processed, as well as when it is ready for pick-up.

CHEF'STORE prides themselves on providing a great customer experience and understands that needs shift; because of this, they allow their customers to add items to their order all the way up to the time of check-out in the store. If that isn't convenient enough, you can even choose to select your own fresh produce or meat upon arrival! The new Click&Carry program has been very effective in making shopping convenient and easy - they even load your car for you!

Be sure to create your customer account and select your preferred CHEF'STORE to see if Click&Carry is available. The success of the program is spreading and soon you will see more CHEF'STORE locations participating in the Click&Carry program. Here are some locations that currently offer Click&Carry:

Washington
- Bellingham (Store #552)
- Bothell (Store #506)
- Bremerton (Store #518)
- Burlington (Store #570)
- Clarkston (Store #206)
- Federal Way (Store #556)
- Kelso (Store #542)
- Kent (Store #555)
- Lynnwood (Store #557)
- Olympia (Store #548)
- Richland (Store #575)
- Seattle - Stone Ave N (Store #549)
- Seattle - 4th Ave S (Store #551)
- Seattle - 21st Ave S (Store #583)
- Spokane - N Division St (Store #573)
- Spokane Valley (Store #578)
- Tacoma - S 112th St (Store #579)
- Tacoma - Tacoma Mall Blvd (Store #550)
- Tukwila (Store #561)
- Tumwater (Store #524)
- Union Gap (Store #574)
- Vancouver (Store #566)
- Wenatchee (Store #513)
Idaho
- Boise (Store #564)
- Coeur d’Alene (Store #504)
- Idaho Falls (Store #509)
- Nampa (Store #584)
- Twin Falls (Store #590)
Montana
- Kalispell (Store #202)
- Missoula (Store #505)
Utah

Salt Lake City (Store # 501)

Oregon
- Aloha (Store #540)
- Bend (Store #515)
- Clackamas (Store #558)
- Eugene (Store #533)
- Gresham (Store #536)
- Klamath Falls (Store #545)
- Medford (Store #534)
- Newport (Store #541)
- Pendleton (Store #539)
- Portland - SE Stephens (Store #531)
- Portland - SE Start (Store #503)
- Portland - N Hayden Meadows Dr (Store #537)
- Portland - NW 19th Ave (Store #587)
- Salem - SE Barnes (Store #516)
- Salem - NE Salem Ind Dr (Store #532)
- Springfield (Store #527)
- The Dalles (Store #544)
- Tigard (Store #577)
- Warrenton (Store #535)
California

Chico (Store #565)
Concord (Store #510)
Eureka (Store #546)
Modesto (Store #569)
Oakland (Store #567)
Redding (Store #547)
Sacramento - Richards Blvd (Store #560)
Sacramento - 65th St (Store #595)
San Francisco (Store #586)
San Jose (Store #571)
San Lorenzo (Store #507)
Stockton (Store #517)
Yuba City (Store #572)

Nevada

Carson City (Store #502)

Save time and order online when you are making purchases with a minimum order amount of $250.00. Check back for more CHEF'STOREs offering Click&Carry in the future and let CHEF'STORE work for you!

IoT - Secure Your Things

Thu, 15 Feb 2018 00:00:00 GMT

The world of technology is evolving rapidly and embedding technology into more every day devices to make them more efficient and user friendly; think Alexa and how helpful she is when compiling a shopping list or playing your favorite song on demand – this is just the beginning of the Internet of Things (IoT).

Wikipedia’s definition of IoT is, “The Internet of things (IoT) is the network of physical devices, vehicles, home appliances and other items embedded with electronics, software, sensors, actuators, and network connectivity which enables these objects to connect and exchange data. Each thing is uniquely identifiable through its embedded computing system but is able to inter-operate within the existing Internet infrastructure.”

Building a Secure Future

IoT is the future of home automation and is extending its limbs into the business world and beyond. “Things” like self-driving cars, internet connected refrigerators, app controlled lights, and smart mirrors that can track and recommend skincare regiments are a few new connected devices that we will be seeing more of.

Because IoT devices like app controlled lights and air conditioning are typically connected to the same network as our phones and computers, these devices have access to our personal information and data which is an appealing target for cyberattacks which could affect not only the device it first took hold of, it can spread to other devices that are connected to the same network. The concern many people are sharing is how is my data kept secure? How will we feel secure when Gartner is predicting that there will be 20.4 billion connected devices introduced to our networks by 2020.

Learning Lessons the Hard Way

One of the biggest distributed denial of service (DDoS) attacks in 2016 was caused by a “botnet” which is a network of computers infected with special malware. This particular botnet was called, “Mirai botnet” and it was made up of IoT devices such as digital cameras, internet routers, and DVR players that had weak or default passwords. What made this attack so massive is the fact that the botnets had numerous internet-connected devices to choose from to leverage an attack of its size.

TIP: Make sure that your passwords are strong and unique. You can utilize this tool to generate strong passwords: LastPass.

The Mirai botnet was just the beginning of botnet evolution in the world of IoTs. The newest botnet threat is called IoT Reaper. The difference between Mirai and Reaper is that Reaper is using software hacking techniques that look for security flaws in the code of insecure IoT devices rather than looking for devices with weak or default passwords – the bots are getting smarter. To date, there have been no signs of DDoS threats with Reaper but they have the ability to do damage if and when they choose to.

How Can You Protect Yourself and Your Devices?

IoT device providers are aware of the security issues that leave their devices vulnerable. When feasible, these companies will put out a firmware patch to help secure your device – the problem is that there is no easy way to notify their customers when they release a patch and patches can be hard to install properly. As the IoT world continues to grow, manufacturers should improve their security on their devices prior to being available for purchase to the public. For now, there are a few things you can do today to protect your devices from IoT attacks:

Username and Passwords – Do not use default username/password combinations for your devices. Make sure your passwords are strong enough that they cannot be cracked by using a strong password generator like we mentioned above.
Online or Offline – Controlling network access for any unused features of the device can cut down the chances of attack. If the device doesn’t have other devices relying on it constantly then the device can be shut off when not in use for additional security.
Patch it Up – Check if your device has released a firmware patch, if so, update your device accordingly and continue to check back for any new security updates.

There are other, nerdier ways to help protect yourself and your devices from attack which can be found here. This article also lists different tests that system administrators can employ like penetration testing to ensure your setup is secure.

The World is Getting Smarter and So Are Our Devices

Although security issues with IoTs are a real concern, this will likely not prevent manufacturers from continuing to create smart devices that make our lives easier and become more and more prevalent in our everyday lives. For this reason, we can only hope that IoT manufacturers will step up their security game if Mirai didn’t already prioritize this effort.

The IoT industry is booming and there are lots of new products coming soon that will make our lives easier and more efficient so it’s not all bad in the world of IoT. You can see a list of the latest and greatest IoTs trending in 2018 from CES. For now, make sure to employ best IoT security practices and in the words of Blue Oyster Cult, “don’t fear the reaper”, just be aware of it.

PDX Palettes 2017

Fri, 22 Dec 2017 00:00:00 GMT

Winter’s finally rolled in all dark and gray. The entirety of Portland is bracing itself for a few months of short days, low clouds and a Snowpocalypse or two (please, not again!).

What better time to reflect on the Portland area’s vibrant sights and colors? In 2017, we captured some of the best natural and manmade color schemes in PDX and surrounding areas. Let’s take a look:

One of our favorite murals on Burnside in SE Portland.

A sunset shot from the Oregon side of the Columbia River Gorge.

The International Rose Test Garden celebrated its 100th Anniversary in August. This public space, which serves as a test lab for new rose varieties, is one of the reasons Portland clinched the title City of Roses.

A perfect spring day at the Lan Su Chinese Garden. This landmark is the result of a collaboration between Portland and Suzhou, its sister city in China’s Jiangsu province.

Castle or train station? We’re still not sure.

Cerulean sky and wildflowers on one of Portlanders’ favorite sunny day getaways, Sauvie Island.

The view from AVIBE’s office in Tiffany Center on a beautiful, rainbow-laced day.

Have a great photo you’d like to see in a PDX Palette? Add a comment below and we'll contact you to feature your photo in future PDX Palettes!

Quality Assurance Testing - The Part Where You Make Sure It Works

Fri, 17 Nov 2017 00:00:00 GMT

Updated 05-06-2020

Testing is one of the most important steps in web development and should never be skipped or rushed. It’s a foundational part of quality assurance and helps ensure new development updates work as expected and do not cause unexpected issues.

Before any web application update is pushed live by our team at AVIBE, it’s put through a three-stage testing process—sometimes several times, depending on the complexity of the update.

Our Quality Assurance Testing Processes

At AVIBE, we have standardized testing processes that are thoroughly documented and executed daily. Here’s a breakdown of the testing phases we put all development updates through:

Once web development is complete in the beta environment, updates and software functionality are:

Tested by the web developer
Tested by quality assurance specialist
Tested by project manager

If the update doesn’t introduce bugs in the beta environment, it is then pushed to the staging environment where it’s tested again by:
- The quality assurance specialist
- The project manager
- The client
If the update doesn’t introduce any bug in the staging environment, it is then pushed to the production environment and is live to the public. We use the new feature from start to finish on production just to make sure everything is perfect.

Essential Software Testing Checklists

Checklists are a tester’s best friend. Here’s a quick list of some of the feature-specific testing checklists our team uses:

Relying on checklists like these can greatly streamline your testing process. They’re extremely helpful for project managers and developers who may not have formal QA training. But they are also useful to any quality assurance specialist looking to document or formalize their own testing process. They help confirm that crucial steps were taken before an update goes live.

Automated Testing Tools We Love

Manual, human testing is critical to any QA process. But some processes are completed more efficiently and just as well by software.

Automated testing tools allow our team to write testing processes once and then run it again whenever a new update is made to a web application. The process confirms that the core functionality of the application is still working after new updates take effect.

We’ve tried a multitude of automated testing tools over the years at AVIBE. The following tools are exceptionally useful in our automated testing processes:

TestCafe: Device and environment testing

TestCafe lets you test an application or website on multiples browsers, machines and mobile devices at the same time. This tool is great for checking how an application will display to users on different mobile devices running different operating systems. TestCafe includes recording and organization features that allow testers to re-order and re-record testing steps during their testing process. TestCafe’s features and UI are very intuitive—testers and Project Managers with limited web development or coding experience can easily use and understand this tool.

Postman: API performance and functionality testing

Postman saves quality assurance testers’ time by automating API tests and mocking HTTP requests. It allows testers to monitor the performance and functionality of APIs. With Postman, testers can send requests, save responses, add tests, and create workflows all via one easy-to-learn interface. It also logs each request for detailed debugging. Postman is a lifesaver for any team frequently setting up new API processes or adjusting legacy APIs.

Tenon.io: Accessibility compliance testing

Tenon.io is a tool that can automatically identify 508 and WCAG 2.0 issues within websites or web applications. A tester simply enters the URL of the site she wants to test for accessibility compliance and voila. 508 and WCAG 2.0 requirements help ensure that website or app content is effectively communicated to people who are visually impaired. An example would be when a website allows users to scale up font sizes and use alt tags to hear written descriptions of images. Anyone working on government, educational and institutional websites and web applications must understand 508 and WCAG 2.0 requirements and test for it. Ideally, any website or application, regardless of industry or purpose, should comply with accessibility guidelines.

WebPageTest: Load speed testing

WePageTest is another easy-to-use tool to test the speed and load time of a website. Similar to Tenon.io, the only thing a tester has to do is enter the URL of the site. Performance and speed are essential to ensure that visitors to your site don’t experience frustrating lag or timeout issues when accessing content. Read more about website performance in our Talk Nerdy to Me Blog, “Speed Up Your Website with Optimization”.

Tip for developers: Take notes on how to test an update and setup test cases as you are writing code to streamline the testing process. Your QA tester and Project Manager will thank you later.

Why Test, Test, And Test Again?

Our team thoroughly tests and documents issues or bugs that arise throughout the development lifecycle using automated tools, various testing checklists, and the expertise of our quality assurance specialists. If you have a bug or an issue with your legacy ColdFusion or ASP.NET web application that needs resolution you’ve come to the right place!

Choosing the Best Content Management System for Your Business

Fri, 15 Sep 2017 00:00:00 GMT

Selecting the right Content Management System (CMS) for your organization is crucial for taking control of your website content. A CMS allows users with no background in HTML or CSS to easily add, edit, and remove content. Modern CMSs allow users to add text, graphics, video, and audio – and some even support embedded interactive elements like maps or other simple applications.

Leverage Your CMS to Work for You

A CMS enables non-technical users to add and maintain content without the need to ‘contact IT’. Since HTML, CSS, or any programming language is not required, staff can quickly add images, text, and change settings on their own terms. The tool which gives administrators the flexibility and freedom of owning their content is a "What You See Is What You Get" (WYSIWYG) Editor. Most WYSIWYG Editors have features that are very similar to Microsoft Word like text styling, hyperlinks, and adding in-line images.

Another great feature is that most CMS' are built for teams; they can be set up to restrict 'publishing rights' to managers, while giving non-managers the ability to add and edit content. By allowing multiple permission levels, multiple team members can contribute to the website content and help support the collective time spent updating and managing content. With numerous content contributors involved, we recommend that all content is reviewed prior to posting to ensure accuracy and consistency in tone.

Custom CMS versus Off-the-Shelf CMS

There are numerous types of Content Management Systems: proprietary, custom CMS, and many off-the-shelf solutions. Choosing the right solution for your company is integral to keeping your website fresh and costs manageable. The most popular off-the-shelf CMS by far is WordPress. According to W3techs.com, around 28% of websites use WordPress to some extent.

One of the major selling points for WordPress is pricing; WordPress allows you to run a personal site with their built-in ads for free. WordPress is also Open Source and has hundreds of easy-to-use, community-created plug-ins that are painless additions to your site. If all you need is a simple site to display content, WordPress and other off-the-shelf CMSs (e.g. Squarespace and Wix) are great options.

For more complex offerings, especially for businesses, an off-the-shelf solution might not be enough. If your website needs to do any of the following, we suggest looking into custom CMS options:

Capture and/or store information about site visitors
Allow users to save custom settings or interact with tools and applications
Upload your own content (text, images, downloadable files, and links) on all pages
Advanced workflows (Marketing, E-mail List Management, Event Management/Registration, etc.)
High performance and fast page-load times
Customized User Interface (UI)
Multi-website support and management
Multilingual support
Manage/update interactive content
Custom integrations

Choosing a custom built CMS can make managing complex tasks and business processes a breeze. Also, off-the-shelf CMSs like WordPress offer lots of different templates that dictate the look and feel of your website but often aren’t very flexible, if you want a specific style that templates do not offer, a custom built CMS is the best approach as it eliminates design restrictions. Additionally, many off-the-shelf CMSs will charge you extra if you want to add tools like Google Analytics – which helps you monitor your site traffic and what pages are the most popular. If you want more control of the design of your website, a custom CMS might be right for you.

Making the Big Decision

If you need help determining whether a custom or off-the-shelf CMS is best for you, ask yourself the following questions:

What functionality will my website need?
- Are all pages public, or do some require a login?
- Will the website need to pull in or store information within a database?
Is speed important to you?
- Is your site already lagging? Off-the-shelf CMSs like WordPress are a one-size-fits-all package with often unused parts; this can have a meaningful impact on the site’s performance. With a custom-built CMS, you are only getting the features you need.
Is security important to you?

Do you have some content that you only want specific users to access, content behind a log-in screen or Pay Wall? If so, most off-the-shelf CMS’s are quite limited in this respect. However, a custom CMS can give you full control over who can access what sections of your site and what they can do there.

For additional information to help inform your CMS decision, check out this article by A List Apart.

Cool features that we look for in Content Management Systems

Responsive

Today there are many ways to access the Internet. Many users are accessing content from their phone or tablet rather than their desktop. A good CMS will scale content to fit best on any device without any help from the content creator. Team members should also be able to enter their text, add images, and other assets and not worry about how it will display on an iPhone versus a Desktop.

Intuitive

One of the most important parts of a CMS is that it is easy to use! It is, after all a tool to make editing content easy for non-tech-savvy users. Features like dragging and dropping images from your Desktop to your Media Section and easily searching and re-organizing your media and assets should be included in the CMS that you choose. Users should easily be able to create, rename, and re-order pages, as well as add links to those created pages. It should be simple to add external assets like YouTube videos or Facebook links. If an off-the-shelf CMS you are considering doesn’t offer these features, we advise that you continue shopping.

Custom

Capabilities are endless with a custom CMS. An experienced development team can design and develop a system that does everything required to fulfill the business' needs. Unique work processes can be managed within a custom CMS by having unique Admins to manage the following:

Accounting and e-Commerce transactions
Reporting tools to run custom reports
Email marketing template creation with ability to send through the CMS
Event management and registration
Project/Product management

It is important to remember that CMSs are supposed to make your job easier – not harder. If your business needs aren’t supported by your current CMS or you need help choosing which CMS option to go with, contact us to schedule a free consultation to strategize the best solution for your business. By working with stakeholders and the users of the website or application, we can discover, develop, and implement solutions to streamline workflow in the CMS and ensure that it is scalable for future enhancements.

Publicly Private

Mon, 10 Jul 2017 00:00:00 GMT

Your phone is your personal assistant, entertainer, and friend. We share the best and worst moments of our lives with our closest friends via text, and we search for our every interest and curiosity on Google. Our phones are always near us but there is no justification to have every little thing we do or say recorded.

Online privacy concerns are nothing new to the tech world. But with frequent app updates and their coinciding updates to terms and conditions, it is a good thing to check-in on your phone apps periodically to make sure they are only accessing the phone features and information that they truly need to operate.

If you want to use apps but are concerned about privacy, it is important to take measures to safeguard your data.

When you install an app, you don’t often get the backstory on why the app wants to access seemingly unrelated features or data. Most phone apps keep quiet about what data they are collecting and what they are doing with it. App companies rely on the fact that our desire to use the app is larger than our desire for privacy. They exploit the fact that we don't take the time to set the appropriate permission settings - the vast majority of us just press, “accept”.

The real money-maker for some free apps is collecting user data and then selling the information to advertisers through "Programmatic Ad Buying Platforms". For example, after you send a private email or talk about something you are interested in and then out of nowhere you see an advertisement for it on social media, "Surprise! Is this what you are looking for?" That is a direct result of someone profiting off your information.

Even Mark Zuckerberg has his camera and mic jack covered with tape.

We downloaded a "Flashlight" app to show just how prevalent data collecting actually is. When looking at the Permission Details (Android), you will see that the Flashlight app has access to our Camera, Location, Phone, Storage, and Full Network Access - which basically means it can go online. Why would a Flashlight app need access to any of this? You got it, to sell your information. The free app isn't free, it can be costing you your confidentiality.

Some people think that if you don't give the app the permissions it asks for, it won't work; this isn't entirely true. The best rule to follow is, "if you aren’t going to use that app to connect to that permission feature, then turn it off".

If you like to upload pictures to Facebook, but not “take” pictures with Facebook, then turn the “Camera Permission off” and leave the “Storage Permission on.”

When you change permissions/privacy settings on your phone you might get an alert: Keep in mind, turning off permissions may cause apps on your device to lose functionality; this typically isn’t the case. In the event that the app does change how you want it to work, go into your settings and turn that permission back on. Once in a while, the app may remind you that you have turned functions off that it wants to access but typically no harm is done and the app functions properly.

It is really quite easy to manage app permissions. Here is how you change permissions/privacy on devices:

Android Permissions (Changes all permissions one app at a time)

Settings > Applications > Application Manager > Select Application > Select Permissions > On/Off

iPhone Privacy (Changes all apps one permission at a time)

Settings > Privacy > Select Permissions Section > On/Off

All of our data being collected is called “Big Data”. “Big Data” may seem simple and fairly innocent right now, but what are they doing with all this information? How could it be used for or against us in the future? Time will tell, but until then we recommend you continue to pay attention to what permissions your favorite apps have.

12 Year Anniversary

Wed, 14 Jun 2017 00:00:00 GMT

Thank you to our wonderful clients that we have worked with over the last 12 years! We wouldn't be where we are without all of you!

Requirements Gathering: Doing Our Homework to Achieve Your Business Goals

Mon, 10 Apr 2017 00:00:00 GMT

Updated 05-06-2020

Requirements gathering is exactly what it sounds like — although it is not as easy as it sounds. The first step in every successful web development project is thorough requirements gathering, where goals and objectives are fleshed out to determine the needs of a website or web application.

"If you can’t describe what you are doing as a process, you don’t know what you’re doing.” – W. Edwards Deming

Creating the Foundation for Effective Requirements Gathering

Clients come to us with business needs that aren’t being satisfied by their current technology, and by asking the right questions we uncover the underlying factors driving their request. As every business and project is different, we start the requirements gathering process by working to understand the client’s business and business environment. Next, we dig into the background and impetus for the project itself. By taking the time to holistically understand the issue, we are able to refine the business needs, suggest improvements, and provide alternative solutions.

We begin to flesh out the project details by asking these broad questions:

What is the overall goal of the project?
Why do you need it built?
Who will be using the system and when?
How will it be built?

The answers and discussions that stem from these simple questions bring to light the project goals, key restraints, and unique circumstances of the project that we consider throughout the requirements gathering process. By starting with a solid understanding of the project’s foundation and then drilling down to a granular level we ensure that the proposed solutions deftly address all of a client’s business needs.

Requirements Gathering Tools and Processes

Using our wealth of industry knowledge and variety of tools we work with stakeholders, users, and customers to gather all of a project’s necessary requirements. Depending on the type of project, we will determine what tools or processes (e.g. questionnaires, surveys, and workflow shadowing) are best suited to identify the project requirements.

For example, workflow shadowing is essential when stakeholders come to us with a system that isn’t fully supporting their operations. Our team observes employees in unique roles perform their daily tasks to understand how the existing system is being utilized and to identify pain points and user frustration. These insights allow us to formulate better solutions for a new or updated system. All of our requirements gathering techniques allow our team to identify your goals and in turn inform a successful project strategy.

Considering All the Factors

There are a lot of factors that help inform the final product and its functionality. Considering as many relevant factors as possible is important to a successful requirements gathering process. Here are some factors that we take into consideration when defining project requirements:

Are all business needs met?
What assumptions are we making?
Have we properly defined the project scope? (‘In Scope’, ‘Optional’, and most importantly ‘Out of Scope’)
How will this affect: customers, staff, and stakeholders?
What items require further research?
What potential issues could affect the product/timeline/budget?
What third party tools are involved? Are they up-to-date? What happens when they update?
Do we need to migrate data? How will we? How much data?
How are we ensuring security (e.g. protecting data)?
What are our dependencies?
Are we leveraging existing functionality?
What options have we not considered?
Is what we are proposing better than the current system/workaround (i.e. is the project justified)?
What will be the on-going maintenance associated with our updates?

Flexible with Agile

We understand that having all of the answers upfront is impossible; even with robust requirements gathering there still can be unknowns, or conflicting ideas. We manage these inevitable changes with Agile project management which gives us the flexibility to handle shifting priorities. Requirements gathering is a group effort and the Agile approach encourages stakeholder collaboration and allows us to keep our clients engaged by actively adjusting and tuning requirements throughout the life of the project.

We recognize the value of requirements gathering, so all of our work plans and proposals set aside ample time to do our homework. Our commitment to not cutting corners on requirements gathering is proven to deliver smart solutions, successful launches, and happy clients.

If you are interested in building a new web application or need help determining your project’s requirements, contact us to schedule a free consultation with our team.

Top Ten Logo Changes from 2016

Wed, 08 Feb 2017 00:00:00 GMT

Ten highly recognized companies updated or compeletely redesigned their logos in 2016. We continue to see a trend with logo modernization becoming more minimalistic and favoring a flat design. Below are before and after images of logos from some of the most recognizable companies; what do you think about the updated logos? Do you think the minimilistic and flat design trend will continue into 2017?

#10. Uber

Uber has become a very well known brand across the country for quick and easy travel. They spent 2016 internally updating their logo to have a heavier font weight with less space (kerning) between each letter. Although the change is subtle, their design team went through a thorough process updating not only the logo but their app icon as well. You can read more about the design evolution and process here.

#9. Peace Corps

Peace Corps has been around since 1961 and desperately needed to modernize their logo. They successfully updated their logo to incorporate a fresh design and font. They amplified their color palette by using more saturated blues and reds that lean closer to purple which gives the logo a brighter look. Peace Corps kept their flat design and minimized the amount of texture, ultimately leaving the "seal" look behind. What you do you think about the new logo? The bird actually looks like a dove now!

#8. US Soccer

U.S. Soccer enlisted Nike to redesign their logo which hadn't been updated in 20 years! The new look remains flat and its simplistic look will continue to be relevant as long as the flat design trend sticks around. Announcing a new logo to your customers can be tricky to get them onboard, many people just don't like change. U.S. Soccer took a unique approach by posting a video announcing their logo change.

#7. Instagram

Instagram has become wildly popular with younger and older generations alike. Last year they went through a major logo rebranding by flattening their camera logo and filling it with colorful gradients, similar to a tie-dye effect. We're not sure that either logo is remarkably impressive but the new logo definitely stands out, especially on a phone screen.

#6. Netflix

Netflix updated their logo by removing the thick black stroke around the font and nixed the dropshadow. If you look closely, you can see that they chose a similar font with heavier weight and width. They also decided to change the font color to red. What do you think about their new flattened logo?

#5. Pandora

Pandora also joined the logo redesign bandwagon last year by refreshing their logo. They changed the font from all caps to all lowercase letters and they also chose a lighter shade of blue. Just like Instagram, they filled the trademark with a fun blue gradient, is this the beginning of the new "unflat" design? One addition that stood out is they made their registered trademark symbol much larger; a little too large...

#4. Bud Light

Bud Light went through a complete branding overhaul for the first time in eight years. They stuck with their familiar blue theme, chose a heavier straight-forward font, and added a seal that includes five of the seven continents - it looks like South America and Antarctica didn't make the cut. Bud Light's branding updates follow the flat design trend but strayed away from their old logo's minimalistic design approach by adding much more texture all over the can; exactly the opposite of what U.S. Soccer did with their new logo. Interesting.

#3. Vevo

Vevo has become a very popular site for music videos, you've likely came across their videos when browsing YouTube. Last year they updated their already minimal and flat logo by removing the italics, changing the font to use very geometric shapes, changed the color from pink to white, and stuck it on a black background. The white on black contrast really makes the logo stand out don't you think?

#2. Kodak

Kodak's 2016 logo revamp is actually a blast from the past! They went back into their branding archives and updated their logo from 1971; you can see the history of their logo here. Kodak has never strayed from their yellow and red palette, nor have they ever gotten away from a flat design. The new logo is almost an exact replica of their 1971 logo, the only change is the "Kodak" text is now stacked vertically.

#1. AT&T

AT&T was established in 1983 and has held on tight to their highly recognizable blue globe logo through multiple logo modernizations. The most recent redesign in 2016 is the most dramatic off all, they dropped "AT&T" all together and are letting the blue globe stand alone. Do you think that you would recognize that logo as being associated with AT&T without the company name listed? Probably.

Is your company in need of a brand refresh? Contact AVIBE to schedule a consultation with our designers and web strategists.

What is a Progressive Web Application?

Thu, 26 Jan 2017 00:00:00 GMT

Updated 05-06-2020

A Progressive Web Application (PWA) uses new technologies to provide a mix of the best features of web sites and native mobile apps. For a long time, mobile apps have had several features that made them more convenient than web sites in certain ways. However, tasks like launching from the homescreen, push notifications, and offline functionality are now possible for web applications with the latest technology enhancements. PWAs are often described as reliable (because they load instantly while offline), fast (because they have smooth animations and respond quickly to user interaction), and engaging (because they feel like a native app but have a better user experience).

A web application must meet a few criteria to be considered a PWA:

For security purposes, a PWA must be served and encrypted over HTTPS
A PWA must be able to load some content while offline (For example this could be as simple as showing a custom page that indicates that you are currently offline)
PWA must reference a Web App Manifest

Examples of Progressive Web Applications

Here are a few Google case studies of successful PWAs:

Want to see more? Here are some examples of popular PWAs.

Features of a Progressive Web Application

Web App Manifest

A Web App Manifest is a JSON file that contains details about the web application. There are many things that a manifest file can contain, but at the very least it should have the following properties:

Name
Short name
Start URL
Display
At least one icon, specified as a URL

Application Shell

Another concept useful in implementing a PWA is the Application Shell. An Application Shell is the minimum HTML, CSS, and JavaScript required to power a basic user interface. The Application Shell can be loaded quickly and then later can be dynamically filled in with content. This helps with perceived performance, since it allows users to quickly see some progress when loading a web application. While it's not necessary to utilize an Application Shell to build a PWA, it does enable PWAs to provide a fast “app-like” experience.

Service Worker

The most essential (and most complex) part of implementing a PWA is the Service Worker API. You can think of a Service Worker as a program that runs in the background, independent of any particular web page. Service Workers are event driven, so they can respond to different scenarios. For example, a Service Worker can communicate with a registered page through HTTPS to:

Indirectly manipulate the DOM of a page—triggering JavaScript on the page to update the content, structure, and styling.
Cache assets and and intercept requests—allowing the page to display cached or offline content.
Access the Notifications API—enabling the web app to trigger and display push notifications.
Access the IndexedDB API—allowing the web app to store complex data locally, even while offline.

Tip: One major caveat is that not all of these features are fully supported in major browsers, Android, and iOS yet - it may be some time before they are.

If a browser does recognize a web application as a PWA, it may prompt users on mobile devices to add the PWA to their homescreen. This prompt comes in the form of an app install banner, and it isn't something a PWA deliberately requests. The browser decides if and when to send these prompts. However, a PWA can defer or even cancel them, if it is preferable that a user not receive this kind of prompt. Adding a web application to a homescreen is not a new concept, but this app install banner makes it a lot more convenient for users.

Another interesting feature enabled by Service Workers is the Push API. This allows a PWA to send a push notification to a user, whether or not they have the web application open. These notifications are opt-in, and should behave like push notifications from native apps.

The most interesting thing that a PWA is capable of is offline functionality. A Service Worker can cache assets on the initial load of a page that it controls. Once that initial load has taken place, it can intercept subsequent calls to that page and decide from there how to handle it; this allows for a few different possibilities.

If it detects no connection, it can load a custom Offline page. Or, it could load the cached content and then update the page once the request comes through.
It could also load an Offline indicator alongside the cached content. If the page in question had a form, it could even save user input into local storage. The input data could then later be synchronized with data on the PWA server once the mobile device obtains a stable internet connection.

Benefits of Utilizing Progressive Web Applications

The top benefits of using PWA’s are:

Increased accessibility and convenience for users.
Offline functionality that enables users to interact with a web application even if there is poor, or no internet connection.
Push notifications which increase user engagement.
Automatic updates so users are always on the lastest version of the app.
Responsive and fast load times equate to an SEO boost with Google.

If you are interested in enhancing user experience and utilizing offline accessibility for your web application we are happy to schedule a consultation with you to see how PWA features can benefit your business.

References:

AVIBE’s 10 Principles for Successful and Effective Web Development

Fri, 09 Dec 2016 00:00:00 GMT

The world of technology evolves at a rapid pace. Here at AVIBE, we adhere to 10 principals to consistently ensure the success of our projects.

1. Know Your Audience

Create User Journeys to cater to your audience

The first, and most important aspect of web development is knowing who will be using your site or application. Utilizing user surveys to determine what content your users want and how they want to access it is priceless when crafting a digital experience. A survey can inform design and usability decisions that make for a exceptional user experience. The data collected from surveys allows designers and developers to lead users on a journey through the site, making it easy to access desired information from intuitive areas of the site. That saying, “The customer is always right” still holds true in ecommerce and is crucial to successful web development. Before redesigning your website, consider your audience and what kind of interaction and experience you want them to have with your website.

2. Mobile Friendly Display and Interaction

Can you touch it?

It’s no secret that mobile devices are typically no more than 5 feet away from us at any given time. Children and seniors alike spend lots of time on their mobile devices to read an article or play the latest game. It is important that your website or application is designed and developed to be accessed on a variety of different devices and screen sizes. Having a responsive, or mobile friendly site, not only allows for greater web exposure, but responsive sites inherently give your site a boost on Google’s search rankings. AVIBE designs and develops all projects to be responsive; if your site isn’t mobile friendly contact us to schedule a consultation to discuss a redesign or a responsive retro-fit.

3. Optimize for Performance

Minifying scripts and optimizing images for faster load time

A study from Google says that 40% of consumers will leave a site if it takes more than three seconds to load. If your site isn’t optimized to load quickly it deters your users from going to your site and can greatly reduce your conversion rate. Our Website Optimization blog talks about how you can test your website’s performance and recommends enhancements to ensure that your site is optimized for the best user experience. Small optimizations like minifying scripts and image optimization can go a long way in increasing your website’s load time.

4. Trusted Design

Would you buy from your company?

What factors do you consider when choosing to purchase something? For many, "trust" is a huge factor when determining who and where they will spend their money. Having a solid website builds trust with users, it acts as a virtual storefront of your business; people judge businesses by the way their site looks, so it is important that your site looks modern to promote this trust. The customer experience comes into play here, knowing your audience and being able to “speak” to them on the web as you would in real life – capturing the same tone and experience. Wherever possible it is best practice to use custom photography over stock photography to relay your company culture to prospective or current customers. Warm, custom imagery allows users to connect with your company when it isn’t possible to connect in person.

5. Organic Search Engine Optimization

Are they finding you?

Content writing is often looked at as cumbersome, when in fact it is the driving force behind a greater presence on the web. Google looks at URLs, headers, meta tags, and keywords to determine what your site is about. If your site isn’t communicating who, what, and where clearly then Google won’t find you and neither will prospective customers. When writing content, it is important to think about keywords that will be commonly searched for by your audience. Organic search engine optimization requires great content and meta tags which naturally integrate keywords. Wherever possible it is great to identify any niche terms that you can disperse throughout the content to help you stand out against the competition.

6. Images vs. Text vs. Animation

How do you engage your audience?

Some people are visual and some prefer content and data; the tough part is finding the right balance to make the content enticing to different types of users, with different types of preferences for content delivery. Younger generations tend to be drawn by animation and imagery and often prefer to scan text; while older generations may prefer to read content in a longer format without scanning. Regardless, every person enjoys and appreciates little delights that validate the user experience; this could be subtle hover states that transition as you hover over a submit button or parallax scrolling where users rely less on clicking and navigation to move through the site. By engaging your audience with custom photography and subtle animation they remember your business and you entice them to learn more about your products and services.

7. Helpful Iconography

Make it easy for users to find desired content

Using iconography, which are descriptive images to support a website’s taxonomy is a quick and efficient way for users to access information by topic or content type. When iconography is done right it is intuitive, saves time, and can prevent user frustration. Iconography is best used with text-based content and should represent the content by representing functionality or information to users. The use of iconography is a helpful aid for people who often scan text, it offers a visual cue describing the content topic, or content type with an added interest by utilizing design. ScienceFriday does a great job using iconography to distinguish different content types.

8. Tell the Story

Utilize video, text and imagery to spread your message

Everyone likes a good story, people remember stories. A great way to spread your company message is by telling a story on your site. Storytelling is most effective when it integrates different forms of content to lead users on a journey through your site. A video is the warmest and quickest channel of content delivery, it can tell a story within seconds. Video paired with supporting verbiage and graphics will further support your story and engage your users. Using video, imagery, and text to create an interactive journey helps people get a greater understanding of your mission and brand and connects you with your customers.

9. Reality is Good and Bad

Catering user experiences for all human emotions

Have you noticed that Facebook now allows users to “love”, “laugh”, or “cry” on your friend’s posts when before the only option was to “like” a photo? They learned that not every experience is lined in silver. It is important that your website or application caters to a variety of human emotions wherever possible. The big idea is that all user interface design should support the emotion that the user should have when exploring that content. This can be as simple as the background image changing to fit that particular user’s mood or preferences, it can also be a completely different user interface depending on the user’s chosen account settings. Know your audience and evoke the right emotion for your users.

10. Off-The-Shelf vs. Custom Development

What are your needs?

Often, clients will come to us saying that they were told by other firms that their vision wasn’t possible when that isn’t the case. Many firms try to make off-the-shelf solutions work for their clients when in reality a custom website or application is the right choice. In many cases, off-the-shelf solutions are cost saving initially but can quickly accumulate large maintenance expenses because the solution is not flexible enough to adapt and scale with the business. If you are wondering whether a custom or off-the-shelf solution is best for your project Contact Us, we can help you determine what the best option is for your unique business needs.

If you are considering a website redesign or need a new website, make sure that the web firm you select adheres to best practices to ensure a successful and enjoyable process.

Maximizing WUSATA's Impact Through Tailor-Made Technology

Sat, 12 Nov 2016 00:00:00 GMT

The Need

The Western United States Agricultural Trade Association, or WUSATA for short, helps small businesses in the Western United States export food and agriculture products. WUSATA has over 30 years of export expertise and is one of four State Regional Trade Groups that promote U.S. food and agricultural exports.

WUSATA recognized that modern technology was key to expanding their reach and knew that they had outgrown their many off-the-shelf applications.

Through a collaborative effort, we helped the non-profit design and integrate a tailor-made business application to manage their business operations, engage their Members, and empower western companies to participate in their programs.

The Back Story

The WUSATA team was up front about the limitations and frustrations of their existing technology. The majority of the problems stemmed from their accounting, event, program, and customer data being stored across multiple platforms and spreadsheets. Anytime one of these database tools required an ‘upgrade’ it would break the custom links and reports WUSATA had paid to develop. The unnecessary changes required constant maintenance on top of ongoing licensing fees. Not to mention, the scattered data made reporting difficult and time-consuming.

WUSATA’s leadership was determined to find a better technology solution – a custom one. A solution that would eliminate the fatigue caused by their legacy applications allowing the organization to focus on their mission to deliver programs and services that equip western U.S. agribusinesses to learn, connect, and compete.

Doing Our Homework

In order to align with WUSATA’s goals while eliminating their current technology woes we had to understand the business comprehensively. Working closely with their team we:

Learned about their services, brand identity, and organizational history
Performed an extensive UX, code, and architecture review
Performed a business system review – evaluating the existing websites, tools, spreadsheets, and applications
Shadowed employees as they performed their daily activities
Interviewed stakeholders and compiled their feedback

Through our comprehensive research, we established how to store all of WUSATA data in one system, architected in a way to facilitate collaboration and reporting. We defined a new information architecture and determined how the site would adapt to appeal to three distinct users groups. And we mapped and cataloged all existing data to facilitate data migration – an essential step for reporting and onboarding existing customers to the new application.

Adapting Form to Maximize Function

One of the central challenges was designing an application with functional and meaningful channels for three distinct users groups. Only focusing on WUSATA’s day-to-day operations, Member’s access to resources, or the education and conversion of Western Companies was not an option. We brought the unique needs of each user group into focus by crafting illustrative user personas and user journeys. With the personas, we were able to identify and eliminate steps to conversion for Western companies, reduce manual activities for the WUSATA team, and added sought after reports and committee management to the Member portal.

We accomplished this by adapting the site’s content and framework dependent on user type. The dynamic application presents each user with exactly what they need, limiting unnecessary clicks and information. With clear paths to conversion we limited confusion and the amount of time staff had to spend on customer support.

The adaptive site also allows WUSATA to control what users and admins could and could not see, protecting sensitive information.

Building Trust through Design

Trust is a core tenant of any business partnership. WUSATA recognized that their design needed to showcase their offerings organically to attract customers. Using beautiful food images and bold color treatments we created a design language that focused on western agriculture. Through an incremental approach and a variety of homepage iterations, we established a site that was both inviting and easy-to-use.

By creating a logical information architecture and providing intuitive tools; the site naturally guides U.S. Suppliers to discover the resources and programs that matter the most to them. And empowers suppliers to register for Global Connect events, apply for FundMatch, and find Export Education resources.

Access on Any Device for Anyone

Understanding that WUSATA’s diverse audience rarely was in the ‘office’, we knew the application needed to be accessible on the move. Through the calculated use of a responsive grid, we crafted the application to be fully functional across a wide range of devices – whether you’re on a smartphone or a 27” monitor. We carefully controlled degradation and focused on a less-is-more mentally to ensure a consistent user experience.

Section 508 compliance was important to WUSATA and we were happy to bring our experience with ADA standards to the design and coding of the new application. With careful review of the law, strict coding standards, and the aid of compliance tools we made sure that our final product is accessible and convenient to people of all abilities.

More Data, More Less Problems

The project, like many, ultimately hinged on data – and building a sustainable data solution into the backbone of the application was at the forefront of our minds throughout the multi-year engagement.

We worked with WUSATA to identify and unravel the data in their many systems: three Access databases, one iMIS database, Sage, and a handful of Excel spreadsheets. We took our understanding of WUSATA’s business goals and went about architecting an ideal structure to house all of their historical data. Early in the effort, we identified that migrating all the historical data would neither be cost effective or beneficial to the business. Working in concert with the WUSATA team we were able to identify essential and superfluous data, allowing us to design a flexible and useful database.

After meticulous research, a healthy pivot, and extensive data mapping we successfully migrated WUSATA’s heavily archived databases into an optimized database structure. By centralizing data and eliminating redundancy we transformed the inaccessible historical data into valuable and secure information for daily use. By maintaining relevant customer data, we significantly aided in the successful adoption of the new system by existing Members and U.S. Suppliers.

Back (Office) to the Future

When it came to getting the most out of WUSATA’s data, proper configuration was just the first step. The team was spending too much time gathering and reconciling data to perform day-to-day activities. Finding data and keeping data in-sync across multiple databases with different logins, fields, and rules was labor intensive and error-prone. With efficiency and accuracy in mind, we created business process specific admins out of each team’s day-to-day tasks. Admins which handled:

User management with flexible permissions
Content creation and management
Customer relationships
Accounting – invoicing, allocations, and claims
Program participation and reimbursement
Survey management
Event management
Reporting

With the diversity of admins we knew we had to create a uniform feel. We designed the admins to take advantage of affordances and standardized styles to create sense of familiarity across the Back Office. By shifting the focus from database management to task completion while maintaining a consistent look-and-feel we were able to significantly reduce the amount of time staff spent keeping spreadsheets and each other up-to-date.

From the get-go we knew automated reporting was integral to the success of the new Back Office. Together with WUSATA, we focused on building a reporting tool which would quickly generate meaningful reports for internal and external use. We championed the idea of building a flexible report builder instead of automating a handful of cookie-cutter reports. WUSATA instantly recognized the power of a report builder and we challenged ourselves to make it flexible and easy-to-use. The result was a tool that could build a report in less the five minutes and report on any aspect of WUSATA’s operations.

Not only did the report builder satisfy internal needs it also helped WUSATA fulfill USDA reporting requirements.

Proactively Secure

We take security very seriously, and our commitment to security standards helped us stand apart during the proposal process. WUSATA understood the risk of handling sensitive company data, necessary for U.S. Suppliers to participating in their programs, and encouraged us to go beyond industry standards. We accomplished this by:

Using secure socket layer (SSL)
Protecting against cross site scripting (XSS)
Using encryption/decryption algorithms
Preventing session hijacking
Limiting access to personal/sensitive information
Protecting against SQL injection
Restricting file uploads (ensuring safe file extensions)
Limiting unsecured forms
Preventing cross-site request forgery

With WUSATA’s support we built security into every step of the development process. By proactively performing security audits and constantly reviewing our coding standards, we’re confident in supporting online payments and storing sensitive company and personal data.

A Video Tutorial is Worth 1000 Emails

Even with our wholehearted focus on user experience, we were very aware that the new business application would require ample training time. But no amount of trainings, emails, or walkthrough documentation can provide the clarity (and reusability) of a built-in help section with easy-to-find help videos. Well before the site launched, we produced more than 60 help videos and made them available to WUSATA staff on-demand through the Back Office. By investing in the creation of a robust help section we empowered WUSATA and cut down on ongoing expenses.

Example help video "How to Navigate the My WUSATA Dashboard."

Additional Thoughts

Kurt Jull Sr. Designer & Strategist

The exciting challenge with WUSATA was modernizing their workflow and processes that would allow systems and people to communicate effortlessly. Through observation, interviews, and user personas, we were able to empathize and brainstorm new features and methods saving them precious time and permitting the WUSATA Staff to work with confidence. As always, the best reward of a job well done is the knowledge that AVIBE is fully part of WUSATA's team and we continue to build new online systems that support their industry leadership.

Five Simple Steps for Successful Branding

Sat, 01 Oct 2016 00:00:00 GMT

Branding your business, whether it be a new or existing business, is much more complex then hiring a designer to make a logo and marketing materials. Great branding shapes how customers perceive and value your company. Building a strong identity and customer confidence takes time and attention; it requires your brand to be seen and heard. A successful brand needs to be consistent across all marketing channels:

Physical locations
Print materials
Website
Advertising
Social media
Sales and Customer Service

Step 1 - Brand You

The first step in developing your brand is asking yourself, what do you want your brand to reflect? Who are you and what are you known for? Who is my target audience? These questions help to discover what makes your business unique and helps build your business’ identity and mission.

It is also important to think about your customers as well as yourself. Your customers make your business what it is, it is important to value their opinion and tailor your mission and messaging to meet their needs. Who are your customers? What would they like to see and hear about your business? Your brand should be appealing and recognizable while visually relaying your company culture. Whenever it is possible to leverage your customer’s opinions on your branding – we recommend it.

Step 2 - Scope Out the Competition

Knowing who your competitors are and what they are doing in your industry is very important in determining where your business is successful, and help identify improvements can be made to your business practices or services. Your goal is to understand what your competitors are doing that is successful and unsuccessful so you can differentiate yourself. When researching your competitors it is important to assess the following:

Is their branding consistent across all marketing channels? If not, that doesn't build brand recognition and this is something that your business will have a leg up on.
Look at their reviews on sites like Yelp to see what their customers (and your prospective customers) are saying about them.
How do their services and/or products compare to what you are offering?
What does their branding say about their quality?

Remember that your competitors will always be innovating their services, technology, branding, and marketing. We recommend that you perform competitor research routinely to ensure you don’t fall behind on new industry trends.

Step 3 - What Makes You Unique

How does your brand stand out amongst the rest? In order to differentiate your company you need to determine and highlight what makes you a better than your competitors. Focus on the quality or variety of your services or products, differences in pricing, and quality customer service. Think about the following questions to define what aspects of your business make you unique:

Does your company have a positive community impact or support a particular cause?
What business processes make you successful?
What aspect of your customer service gets continual praise?
What qualities do people associate with your business? Your employees?
Are you more competitive than your competitors?
What do your customers like about you?

It is important to capitalize on all aspects of your business that put you a leg up on your competition. Prospective customers weigh all options before committing to a provider of any sort; anything you can do to stand out important in building your brand and reputation.

Step 4 - Visually Bringing It All Together

Now that your brand identity has been established, it is time to visually represent your brand with a great logo and meaningful tagline. Choosing a great design firm is key to getting quality visual assets that both accurately reflects your business and resonates with your customers. AVIBE’s talented designers work with you to learn your business so that we can successfully combine your mission, company culture, and ideas into stand-out logo design.

We can develop brand guidelines for your company that ensure consistent branding on all platforms. Here are some example logos we have designed for our clients.

Step 5 - Bringing Your Brand to the World

Your new brand should be rolled out quickly and efficiently across all marketing channels. AVIBE can help design your digital identity by creating branding guidelines, logos, and creating an exceptional website that reflects your business’ goals and improves workflow processes. We have our clients hone-in on their exact vision and we aspire to reflect their company voice and content throughout the entire branding process. If you are interested in creating or updating your business’ branding we would love to schedule a consultation with you to learn more about your company and coinciding goals.

Remember, the key to a successful brand is the employees behind the logo that embody your brand and mission on a daily basis. Customers will choose your business over your competitors when your business delivers solutions, reflects transparency, and promotes trust. Always remember to put your customers first; customer loyalty is the root of building your brand and your business.

Tips for Great Content Writing

Thu, 01 Sep 2016 00:00:00 GMT

Trying to write a blog or content for a website can be challenging. There are many factors to consider: writing for your audience, adding keywords to help with SEO, and keeping your content engaging for the reader. Some writers find it easier to take small steps by taking hours or days apart, while others like to do it all in one sitting. Below are some tips, based on our experience, on how to write great website content.

Create Topic Lists & Working Titles

Instead of trying to think about writing content as a whole, it is usually easier to break it up into smaller, more manageable tasks. If you are writing content for a page, you will already have your main topic. If you are creating topics for a blog, brainstorm some ideas on your own or in a group. It is always best to write about things you are familiar with. Keep a list handy and write down topics when you think of them throughout the day.

Once you have your list, select one and begin to think of some working titles. Do not feel pressured that this has to be your final title, but your title should be the overall idea of what you are writing about. Create titles that will make the reader want to continue reading. It has been proven that creating titles with numbers creates more interest, such as “10 Tips for Improving Reading Comprehension”. A little creativity can go a long ways when it comes to titles.

Research Your Topic

It does not matter if you are writing a content page for your own website, or creating an article that you think your readers will enjoy; you should always do your homework first. If you are writing a content page, check out what your competitor’s are doing. Are they displaying their content in an engaging way? Do they have Call-To-Actions within their content to direct their customers to a goal? Does their style of writing build trust for their customers? Do they sound like an expert in their field? These are all good questions to answer before you start writing.

If you are writing a blog article, make sure to research all of the facts and stats you will be talking about. If you have prepared a list of topics prior, always be on the lookout for resources to bookmark and easily return to later.

Create an Outline

Now that you have created one or more working titles and are ready to write for a content page, generate ideas or keywords you want to discuss. The main points you have chosen should flow nicely with each other, while still fitting well under your working title. Keep in mind, you may need to adjust your working title as you go through this process to keep it relevant. Use your ideas or keywords to create a content outline. This can either be done through bullet points, or using key ideas that you will write about. Revise as needed until you feel you have a strong structured outline to work with.

Opening Paragraph

Just like the title, you want your opening sentence to capture your reader’s attention so they will want to read on. Depending on the type of content you are writing, this can be done through interesting facts, telling a story, or using visuals to keep a reader engaged. Write an opening statement that will cover all the main points of your article. The opening paragraph should be engaging and should also transition nicely to your next paragraph.

Writing Your Content

Now that you are well prepared for the article and have your first paragraph completed, it is time to finish writing the content. Keep your target audience in mind and use language that will be easily understood. When relevant, link to other areas of your website or external links that will support your content. Using subheadings and pictures will also help to visually break up your content and make it easier to read and digest. Make sure to do any additional research needed to keep the content accurate and up-to-date. If you are feeling overwhelmed or frustrated, take a break and work on another task. Return to writing when you can set aside time to focus on what you are writing.

Adding Call-To-Actions (CTAs)

A mistake a lot of people make when creating content is not giving the user something to do by the end of the article. What is the purpose of the content you are writing? Is it to contact your company, signup for a newsletter, or learn more on another page? If so, then these actions should be clearly linked within the content. There are times that your articles may just be informative, and there is not a need for an action and that is just fine.

Check for Consistency and Proof Read

Once you have completed your content, do a preview of the visual appearance of the article. Is the imagery fitting with your topic? Did you use links subtly as to not overwhelm your readers? Is there a good use of subheadings to break up your content into easily digestible sections? Did you create an actionable item? If you answer yes to all, the next step is to have someone else read the content.

Having a proof reader review your content or article is extremely important. Many times, another person can help develop your topic to the fullest, find problem areas in your flow, and be on the lookout for any errors in your grammar that a word processing program could have missed (like: there, their, they’re).

Tip: Use Microsoft Word's ”Track Changes” (found under the Review tab) so you will be able to see the original and the proof reader's suggested changes, which you can either accept or reject upon your review.

Everything that we write, including blog articles, proposals, and even sensitive emails, go through numerous proof readers and revisions to ensure accuracy.

Search Engine Optimization

Not only are search engines looking for great content, but they also use other clues within your content that it will use to display to users. These can be headers, images, and keywords it finds on the page. Make sure to optimize your pages for one to three keywords that are unique across your site. Make sure your images have alt, or alternative text added to them to explain what the image is about. Write and add meta titles and descriptions that use your keywords and give users information and a great marketing message that will make them want to click through to your page.

Final Review

After making any updates from your proof reader, do a final review of your post or page using a preview, if available. Ask yourself the following questions:

Does your title still fit with your ideas presented in the content?
Does the first paragraph grab your reader’s attention?
Does the article make you sound like an authority on the topic?

Creating small, manageable tasks can make writing content blog articles an enjoyable task with great, measurable results. Find what works best for you and write on!

CRMs - One Size Doesn't Fit All!

Mon, 01 Aug 2016 00:00:00 GMT

Would you like to increase engagement and sales for your business? One option for your company to consider would be utilizing a Customer Relationship Manager (CRM) that is tailored to your company’s specific needs.

Customer Relationship Management (CRM) is a marketing strategy adopted by businesses to engage current and prospective customers by analyzing data trends across different communication channels. Having a centralized hub makes it easy to manage and analyze customer interactions and information from your company website, phone calls, email marketing, surveys, social media sites, etc. Data collected can provide detailed information about your customer’s purchasing history, buying preferences, as well as concerns. Information collected and stored in a CRM systems allows businesses to cater their marketing efforts towards the preferences of their clients and allows for automation of workflow processes.

There are many different CRM options for businesses to choose from. In many cases, off-the-shelf CRMs are difficult to implement, come with inflated costs, and often don’t include features that accurately reflect certain business’ marketing campaigns. Businesses may also end up choosing a CRM that includes many features that they will never use, or is a minimalistic CRM system that doesn’t reach all channels of their marketing efforts. Because of the lack of customization for many off-the-shelf CRMs, our clients have come to us to develop CRMs specifically tailored to their business needs that fully integrate with their website, web applications, and align with their marketing strategy.

Integration Into Your Daily Workflow

Companies should have a CRM that fits their current business needs and be scalable for future needs. Custom reporting and engagement features should reflect the company’s business identity and reiterate the business’ nomenclature to ensure these features make sense to staff, as well as prospective or current customers; many off-the-shelf solutions do not allow for this type of flexibility.

AVIBE conducts discovery meetings that can help tailor a CRM to best fit your business. Some factors we consider are:

Appropriate nomenclature that makes sense to you and your staff
Addressing the different sources of engagement from outreach calls to inquiries from your website
Strategizing on best response practices and leveraging cross marketing tactics
Managing campaigns
Utilizing data reporting, graphs and charts to learn more about your customers
Statuses and notices for customer follow-ups
Contact information for specific individuals related to a conversion opportunity
Scheduling repeated events
Searching and reporting

We created a CRM for one of our clients that handles lead management, data visualization, marketing efforts, and much more. All of the CRM’s features have been integrated into the Website Administration System that we had previously built. They are able to manage all business processes from accounting, correspondence, sales management, and registration processes from start to finish; as well as update the content on their website at any time through this system. Last but not least, their CRM reflects the look of their current Administration and Content Management System so it is recognizable and intuitive for all team members, thus reducing time needed for training on new features.

Lastly, keeping track of your customers will allow you to correspond with them regularly and help to maintain positive relationships with them. Regular correspondence is paramount in providing quality customer service and customer retention. Although it is wonderful how technology has evolved our communication channels with customers, it is important to remember that word of mouth conversations will never go out of style; human interactions convey the highest amount of trust to customers.

If you are interested in learning more about AVIBE’s CRM capabilities to determine if a custom-built CRM is a good fit for your business, we would love to chat! Contact us for a free consultation.

Meaningful Insights with Geographic Information Systems (GIS)

Fri, 01 Jul 2016 00:00:00 GMT

Data is fundamental to all businesses and industries – from small mom-and-pop businesses to large corporations like Google. Having access to large amounts of data is only as useful as a businesses' ability to gain insights from it. As businesses collect more and more data the ability to analyze the data can become a costly task. Since not all of us are blessed with a love or flair for numbers; there are valuable, yet often underutilized, tools to easily dissect data by visualizing it geographically.

Geographical Information Systems (GIS) are the tools required to display data as it relates to positions on the Earth’s surface. Being able to map your data can unleash its potential. Showing where customers are located, your company’s events, or where purchases are being made can help you effectively market to your target audience. GIS allows businesses to connect with their customers in new and meaningful ways. It is easy to monitor data changes over time which allows for informed decision making and project management. There are many different GIS products available, but choosing the right GIS for your business is paramount to balancing insights and cost.

Considering Your Options

Companies should choose a GIS that fits their current business needs, is scalable for their future needs, and takes in account ease-of-use and overall costs. Take a look at our recommended GIS options to handle any of your mapping needs:

Leaflet

Leaflet is a JavaScript library that simplifies the coding of web based maps. Leaflet’s built-to-order nature allows for direct integration into existing systems. Since Leaflet is designed based on a business’ existing infrastructure and needs it tends to be easier to use. However unlike a comprehensive GIS option, new features require additional development work.

Pros

Ease-of-use
Integrates into existing systems and workflows
Budget option for maps with limited or consistent features
No licensing costs

Cons

Higher initial development costs
Mapping features and styling limited to initial scope
Updates and maintenance require additional development work

CartoDB

CartoDB is an online map visualization platform. It is not a full GIS suite, but has a streamlined interface and is quite efficient. CartoDB’s built-in visualization options allow for a wide variety of stylized maps. CartoDB is easier to use than high-end GIS suites but still requires some investment in training.

Pros

Good balance of price and flexibility
Includes a wide variety of built-in visualization options
Customizable map styling

Cons

Does not directly integrate into existing systems
Requires training on application
Moderate on-going licensing costs

ArcGIS

ArcGIS is an enterprise-level fully featured GIS suite. Maps created in ArcGIS can be synced with existing applications via API. Map creation is very flexible and it’s supporting tools and features are top-of-the-line. However, the extra features come with a steep learning curve and high licensing costs.

Pros

Includes cutting edge features, tools, and map creation options
Highly customizable map styling
Syncs with existing systems with robust APIs

Cons

Requires in-depth training
High on-going licensing costs

Example: Take a look at a heat map of the Brexit voting results. Turning large amounts of data into visual maps makes it much easier to understand.

Our Methodology

AVIBE conducts discovery meetings that can help you understand how to best leverage GIS and what GIS tools will best fit your business. Some factors to consider are:

What insights are available from mapping your data
The cost and time commitment to start visualizing data
How existing data can be geocoded and mapped
The frequency and type of data you collect
The complexity and flexibility of the maps you want to create
The value of automated geocoding and map creation
The value of density visualizations
The need to create maps showing change over time
How to publish maps externally—and if it is worthwhile

We worked with a long-standing client to develop a Leaflet GIS solution that handles up to four datasets, flexible boundary layers, interacting tool-tips, on-map filtering, density visualizations, publishing, and much more. We were then able to integrate all the GIS features into the client’s existing Website Admin. With the new mapping solution, the client is able to intricately filter and display their events and customers to gain actionable insights on market presence and create marketing goals. Last but not least, their GIS system matches their current Admin so creating maps was intuitive for the team.

Recognizing geographic patterns in your data leads to better-informed decisions. The ability to easily and quickly create a map allows you and your team to take a fresh look at your valuable data. If you are interested in learning more about AVIBE’s GIS capabilities to determine how GIS can help you reach your business goals, we would love to chat! Contact us for a free consultation.

15 Must Dos In and Around Portland

Wed, 15 Jun 2016 00:00:00 GMT

We love Portland! There are so many things to do in and around the city. Here is our list in no particular order. How many places have you been?

1. “Food Cart Friday”

The first on our list would have to be the SW Food Carts at 10^th and Alder. Every Friday the staff goes down to pick up delicious food from the wide variety of selections available.

2. Hiking in the Gorge

You cannot really say you live here until you have hiked the Multnomah Falls area at least once.

3. International Rose Garden & Japanese Gardens

Both places are just breathtaking, and offer a great view of Portland. Watching snow fall on the Portland Japanese Gardens should be on your bucket list.

4. Brunch

If there is one thing Portland loves, it is brunch. With so many delicious places to choose from, it is hard to pick just one. Olympia Provisions, Tin Shed, Screen Door, Veritable Quandary, and Verde Cocina are some of our favorites though. It’s important to take advantage of the only acceptable time to day drink in public.

5. Powell’s Books

You need a book that only had a print run of 100 copies with paper made from Palm Trees that only faced South? They have it.

6. Breweries

You can’t throw a rock in Portland without hitting a brewery. If you can’t decide what delicious brews you want to drink, see how many beers you can taste at Loyal Legion.

7. Saturday Market

An upscale flea market, and a great place to spend a Sunday morning with coffee in hand. Where else can you get handmade crocheted knee warmers? Nowhere.

8. First Thursdays / Second Saturday Art Walks

Explore galleries and artist exhibits during the summer, and it's a great way to flex the right side of your brain.

9. Happy Hour

A much needed cocktail and ‘appys is always a great way to end the week. Some of our favorite locations (in order of classiness): Departure, Matador, and Cheerful Bullpen.

10. OMSI

From Sea to Space, this place has it all. And you don’t need to be a kid to enjoy it!

11. Theater

Yes, Portland can be fancy! Newmark, Keller, Schnitzer, Winningstad, Brunish, and Portland Center Stage all offer a wide variety of entertainment.

12. Tom McCall Waterfront Park & Eastbank Esplanade Loop

One of the great pleasures of Portland’s downtown. Bonus points if you do it on a Segway!

13. Punch Bowl Social and Ground Kontrol

Video games, beer, bowling, darts, shuffleboard, corn hole and more! It’s like being at home, without having to worry that your tipsy friends will spill their drinks everywhere!

14. Shanghai Tunnels

Who doesn’t love the thrill of unexpected visitors getting drunk, kidnapped, and human trafficked in the late 1800’s? Beware, the Halloween tours are not for the faint of heart proclaiming itself as the most haunted place in Oregon.

15. Swift Watch

The ultimate team building exercise! A truly entertaining site to watch thousands of birds swirl down to roost for the night in the Chapman School’s chimney.

Learn the Basics of SEO

Wed, 01 Jun 2016 00:00:00 GMT

Search Engine Optimization (SEO) is key to most business websites, yet it can be a very confusing topic to understand. Taking some time to get a basic understanding of SEO will help you create short and long term goals for optimizing your site.

User Experience

A portion of SEO relates to User Experience (UX). If users do not have a positive experience on your website, it does not matter how well it ranks. Before starting any SEO campaign, it is important to take a hard look at your current site, or even get other’s opinions. Some questions to ask are:

Is your site modern in its design?
Is it responsive?
Is it easy to navigate?
Does it load quickly?
Does it use headers and images to break up content and make it easier to read?

If you answered yes to all of these, great! If you answered no to one or more, then it might be time to redesign and restructure your website.

On-Site Optimizations

On-site optimizations refer to updates that can, and should be made to an existing site. These are sometimes called "On Page" optimizations as well. These include:

Site Security
Page Load Times
Navigation and Site Structure
User Experience
Image Sizes and Descriptions
Sitemaps

There are numerous free tools that Google offers that can provide information about your website, as well as your website visitors, including: Analytics, Page Speed Insights, and Mobile-Friendly Test. Analytics provides information about bounce rates, site exits, and traffic flow within your site. Page Speed Insights gives your site a desktop and mobile score, and even provides optimized images for you. Mobile-Friendly Test shows you if Google views your site compatibile with smart phones, which is important for mobile searches.

Using the above tools can help with the on-site optimizations and provide more immediate options to improve your rankings for SEO. These updates can be considered one of the easiest to understand and accomplish because of all the available online resources.

Keyword Research and Usage

With over 1 billion websites online, the internet has become saturated with general content which has changed how users search. Many years ago, searching only required one or two keywords; now it usually takes three or more keywords to specifically find what users are searching for. Finding key phrases of three to five words with lower competition will increase your rankings, especially if your business is in a saturated market. Google’s “related searches” can also provide valuable keywords.

If you have high competition for general phrases that relate to your business, try finding a niche that you can optimize. For example, searching “web design” returns millions of results. AVIBE could optimize for localized results for by adding “Web Design Oregon” or even smaller with “Web Design Portland.” Even those keywords have really high competition. Using Google’s Related Search suggestions, we could get into more detail with “Portland Web Design Agency” or “Web Design Company in Portland.” Just make sure you don’t get too specific with your terms. Showing up in the first position in Google is great, but will not help your business if no one is searching for it. Google’s Key Planner can provide great insights to the amount of searches per month for specific keywords.

Mobile phones and auto assistants such as Amazon’s Alexa are also changing the way users search. With voice searching, users tend to use complete sentences, like normal conversations. Instead of typing in “Pizza”, users might say “Find a good pizza place that delivers.” This also leads to Keyword Interpretation, localized results, and reviews - our next topics.

Keyword Interpretation

If someone were to walk up to you on the street and ask you to recommend to them a “good place to eat”, you would probably give them one or two of your favorite restaurants in the area. Since a computer cannot recall personal experiences, it uses a combination of keyword interpretation, reviews, and localized results to provide you with recommendations. Google interprets “good” by checking on reviews and ratings posted by other users. Using GPS, Google provides results that are near to you - on your street or neighborhood.

Reviews, Business Pages, and Social Media

As mentioned above, Google takes into account many factors in order to display relevant information to you. The first of these are reviews and ratings left by other users. These can come from Google, or other sources like Yelp. If you are in a business that requires a lot of customer service, such as a restaurant or professional service, having customers give positive feedback can actually increase your rankings.

One easy way to accomplish this is to be sure to claim your Google Business Page. If you Google your business name, most likely you will see the business page to the right on desktop, or in the main view on mobile. Make sure to claim this page, update your information if needed, and add photos. This shows Google you are serious about your business, and increases your local search results by listing an address and contact information for your business.

The last factor is social media. If Google sees social media pages linked from your site, like Facebook and Twitter, it can see how often you are posting and the interactions you are having with your customers. While we would not recommend having social media if you will not be able to update and maintain it, setting aside some time once or twice a week (or more, depending on your business), can be a good marketing strategy in general, while also contributing to your SEO.

Blog Writing

While the term “Blog” may stir up some negative connotations, having a blog or something similar is great for SEO. By keeping it updated regularly, Google has fresh content to index all the time, which makes Google very happy. Blogs are also a great marketing tool, and when done correctly, it highlights your company as a leader in your industry. You should write for your audience and your field, including tips, tricks, and insights to educate your customers. Unless you are an animal adoption agency, don’t post cute cat videos if it has nothing to do with your field. Make sure to keep your blog updated often; having an out of date blog will give off a negative impression to prospective customers.

Create Your Own Plan

This is a basic guide to understanding some components of what is involved in SEO. Just like how every business is unique, creating a plan for SEO should also be tailored to a business’ website specific needs. Instead of asking, “How can I be number one in Google?” you should instead ask, “Am I providing a great experience for my customers on my website?” And remember to remain patient throughout the process of optimizing your site as it usually takes 8-12 weeks to see changes in your website’s rankings. While we recommend partnering with an SEO expert, creating short and long term goals for your website is a great first step in increasing your SEO.

Speed Up Your Website with Optimization

Sun, 01 May 2016 00:00:00 GMT

Looks are not the only important feature of a website, it is important to consider what’s running in the back-end as well. Many times the most visually pleasing and interactive websites cause the most user frustration; the more images and animations there are, the slower the website loads. Optimization is pertinent for top tier websites and applications that AVIBE develops. One of our clients has a web application that is specifically tailored to all of their unique business needs. This application is where they manage all of their daily workflow, and their customers use the website to login and manage their accounts. The application is so robust that it had to be optimized to ensure a quick load time for front-end users on all devices and network speeds; as well as have the ability to run large queries or reports from their interconnected Back Office. There are many tricks to improve the load time of a website and application, here are some of the options available and utilized by the AVIBE team that proved successful.

Render Blocking

Render blocking is what occurs when a browser loads a static asset (external resources like fonts or scripts from other websites) before loading the content. Loading static assets first causes a delay for users receiving content on the page, what they are actually looking for. Render blocking is most apparent with JavaScript files. Typically, JavaScript files are coded into the header tag of an HTML file; this is above the body tag where the visual content for a website is housed. Browsers read code like a person reads a book, from the top to the bottom. To avoid the delay in content generation, there are two options for developers:

Load Scripts at the End

Loading the JavaScript file right before the closing body tag, </body>, allows users to access content much faster. The drawback to this option is default fonts, or JavaScript files used to control page functions; full content will not display until the page loads, which can cause a visual flash, or change, after the script fully loads. For example, if a website’s default font is Arial and the content is in Futura, the Arial font will display first which can break the layout of the site until the correct font loads; this is the same scenario when loading scripts.

Load Scripts Asynchronously

Loading the JavaScript file asynchronously requests the file and then lets the browser continue to load the content in the body tag by appending async within the script. This option is good, but may cause problems with the interdependence of the JavaScript files. Some scripts are dependent on one another, and the site may break if one takes longer than the other to load. Developers should not deploy this optimization method if scripts are interdependent.

Depending on how websites and applications are built, and how complex a page needs to be, developers can choose one or both of the above options that work best for the site’s architecture.

Typography

Web fonts that are linked from other websites such as Google or TypeKit can cause unnecessary performance issues for load times. When a True Type Face (TTF) file is loaded, it usually includes different styling options, such as thin, medium, bold, italics, etc. and every character set within that font; some of which will never be seen by the public. There are a few methods to improving web font performance:

Reduce the number of fonts used; stick with one whenever possible and use default fonts to compliment it
Reduce the use of numerous font weights and styles throughout the site wherever possible
Deploy Dynamic Subsetting; only rendering characters needed on the page to decrease the font file size
Utilize GZIP; a server configuration that compresses text assets and speed up load time

The tips and tools for saving bandwidth and improving loading time were very helpful when we were optimizing our client’s web application. Their website is very content heavy and is comprised of ~200 pages of text rich content. We applied all of these techniques to our client’s web application and greatly improved the load time of each page. While these techniques were very helpful, there is always room for improvement, so we continued optimizing.

Minification

Minification is the process of removing unnecessary characters, white space, comments, etc. from JavaScript or CSS files without changing the file’s functionality – very cool! Minification can be done through a Gulp script; or through many other programs depending on your coding language. While this may not make a huge file size savings, making numerous small changes can add up to a big difference.

Image Optimization

Optimizing the file sizes of scripts can be very beneficial in reducing load times, but there are other, more obvious improvements that can be made. Images are what makes a website or application visually pleasing, but the larger the image and the higher the image quality, the longer it will take for the page to load. Our client’s web application is very visual and includes a slideshow on the home page as well as large photos throughout the website. We had to apply some tricks to optimize their images to reduce the loading time. Here are some resources that AVIBE utilized:

JPEGmini

JPEGmini is a great tool for reducing the size of images without losing quality and keeping the original formatting. It can be puchased and downloaded for desktop use, or you can upload images through their website for free. One of the homepage banners on our client’s website started at 636 KB. After we ran the image through the JPEGmini application, we were able to reduce the file size down to 128 KB and the image looks just as vibrant as the original. Plus, it shows you a total of all space saved, as well as for the current image that was just optimized.

TINY PNG

Tiny PNG is a free tool for shrinking PNG and JPG files, allowing for up to 500 free image compressions per month. This tool utilizes compression without losing the original image quality. When testing our client’s homepage banner image using this method, we were able to reduce a JPG image size from 636 KB to 143 KB. AVIBE was more successful at reducing the image size using JPEGmini than Tiny PNG, but it is very useful for PNGs that do not usually allow for compression through programs like Photoshop.

Sprites

Combining multiple, smaller images into a sprite also reduces the number of page requests that a server handles by only needing to load one image. Websiteoptimization.com states that, “The more HTTP requests that your pages require, the slower and less consistent their response time will be.” For our client’s website, we combined numerous smaller images into one larger image, or sprite. This may require a little more developer time, but the website will only load the image once, making for instant normal, hover, and active states for all the images.

Designer Savvy

Thankfully, we have some very talented designers here at AVIBE that have done a lot of homework when it comes to compression. One of the hardest places to optimize is large banner slideshows because of the amount of photos needed to be loaded. The slideshow image we were optimizing had part of the image covered by another graphic, so we were able to flatten out the colors used in the overlapping portion of the image. Having areas of the picture with solid, flat color, helped us achieve a much smaller file size because it required less colors to be saved to the file. We compressed the image in Photoshop, and then used the programs mentioned above to reduce file size even further.

Pro Tip: Having many tools under your ‘belt’ to reduce image file size is always the best approach. Sometimes it will take some experimenting to know what will work best, but the time spent will be well worth it in the end.

External Tools

There are many trusted websites that can analyze your website and report on where your website needs work. Two are listed below that we use before launching our websites:

Google PageSpeed Insights

Google PageSpeed is a great resource for developers to test the load time for scripts, images, and other items. We have recommended it numorous times in our articles. When you enter the website domain that you want to test, Google PageSpeed lists what images can be further optimized and it provides you with a zipped file of the newly optimized images – very convenient! Google even looks at the page loading speeds when considering ranking, so having an optimized site looks good to Google. Utilizing page speed compression and some other image adjustments by our designers, we were able to take our client’s homepage banner image from 636 KB to about 80 KB; the best results yet!

WebPageTest.org

Another resource for content breakdown and a list of various metrics is WebPageTest.org. Using this website you can see a nice pie chart that lists all components of the website. The pie chart shows where the files are the heaviest and clearly states what areas need improvement. They even have videos and slideshows to easily see how, and at what second intervals, your website is loading.

Results

AVIBE applied numerous tests and resources to our client’s web application optimization process to achieve some great results. By deploying a combination of the optimization tricks listed above, we were able to reduce the number of bytes for the first, initial homepage view on the website by half! These techniques and resources are proven effective when optimizing websites and can help decrease your website’s loading time. Run your website domain through Google’s PageSpeed test and see where your website can be optimized!

Touchscreen Takeover

Fri, 01 Apr 2016 00:00:00 GMT

Look around you, no matter where you are or where you look you will always see heads down looking at their mobile device. While browsing on your phone, tablet, hybrid (touchscreen laptop), or “phablet” (picture an iPhone 6 Plus- bigger than a typical phone but smaller than a tablet), many mobile users don’t think about the design process that goes behind responsive websites or web applications which allow content and functionality to display properly across all mobile devices. AVIBE always acknowledges best practices with every responsive interface we design to ensure a great user experience.

Hand Grips and Touch Target Placement

I bet you never thought about the way you grip your phone while browsing the web or playing a game is important – well it is! User grips can vary by what type of application you are using, and can differ based on what you are doing in the “real world” - walking versus sitting. You may be right handed by nature but when the busy world around you intervenes you may notice ambidextrous tendencies with the grip you have on your phone.

A study by Steven Hooper shows that, “the thumb drives 75% of all phone interactions”. Our designers and developers already have to take into account that the website or web application they are creating has to look and function properly on all mobile devices; they also need to create a design or layout that works well with the different hand grips commonly used for each mobile device.

Three Basic Phone Grips

One handed grip – Accounting for 49% of all users and the most popular grip
Cradled phone in one hand and use the opposite hand’s finger or thumb to navigate – In a close second, this grip accounts for 36% of all users
Two handing typing using both thumbs – Last but not least, this grip comes in third place with 15% of users

Image Source: Clark, Josh., 2015. http://alistapart.com/article/how-we-hold-our-gadgets

Fingers Are Not a Stylus

Styluses are sleek and slim, unlike any human’s finger. Styluses are able to click on the smallest touch targets that our fingers cannot possibly click with ease. Although styluses have been helpful in the past when navigating mobile friendly sites, they are not helpful in the fact that they are easy to misplace.

The layout and navigation of AVIBE’s designs are intuitive for all mobile users, this ensures a pleasant experience while navigating the websites and applications that we develop. Now that many websites are becoming responsive, standards have been established that cater to “the human stylus” – fingers!

The way different users hold their mobile devices is so important when we are designing for touchscreen devices. If our designers didn’t acknowledge the most common grips, each web experience would become a user’s nightmare; your hands would be blocking important content which leads to user frustration and possible hand strain. The image below emphasizes the importance of touch target placement; it is pertinent that there are no touch targets in the upper left portion of the screen seeing that can take up to 1,527 milliseconds to reach and tap that area of the screen.

This image displays the number of milliseconds it takes from tile highlight to user tap event.

Image Source: Schmidt, Mikkel Bo., 2014. https://medium.com/@mibosc/mobile-ui-ergonomics-how-hard-is-it-really-to-tap-different-areas-of-your-phone-interface-bb043d409af8#.4e19cslrf

Typing On Mobile Devices

Typing takes time, especially when typing on mobile devices and user error is very common and frustrating. How many times have you opted to sign in into a website or application using your social media account because it was easier than typing in your username and password? When designing and developing responsive applications, for usability purposes, it is best to make the user type as little as possible on mobile devices.

Utilizing shortcuts, and prefilling fields where applicable is the best option when designing for mobile devices. Large, detailed online forms are fine to fill out on a desktop but a longer form displayed on a mobile phone is daunting for any user.

There are many other shortcuts available to help input data without the user having to type it in. Phones are “smart” these days, they are capturing data without us even knowing. Geolocation data can be utilized to pin point the closest grocery store chain to a user based on their GPS coordinates. Cameras are used to scan QR codes or barcodes to eliminate the need to type the specifics of an item that users want to search for; more recently cameras are being used to enter credit card information. Using Voice Activation features, like Siri are often used to get information quickly without having to go through the trouble of opening up Google and manually searching for answers. AVIBE caters all projects to the user’s experience and performs extensive usability testing to ensure that every web experience is enjoyable for all users and that experience translates across all screen sizes.

Design Standards for Touchscreen Devices

AVIBE adheres to the recommendations listed below for designing for mobile devices:

To avoid touch errors, make clickable items bigger with lots of padding. The minimum touch target size should be 7mm. For designers and developers, pick your poison: 7mm=44px=75em, although it is recommended that you use EM’s or REM’s when coding responsive websites or applications.
The standard font size should be 16px with the default line height of 1.2em. Seeing that mobile devices are held closer to the user’s eyes, the font can be a bit smaller than 1em.
When applicable, it is best practice to prefill forms whenever possible to improve usability.
There is no need for a full menu on mobile websites, a simple dropdown icon for navigation is all the user needs.
Conduct proper usability testing prior to launching a website or web application to ensure that the chosen layout responds properly and is easy for users to navigate.

To optimize performance, it is necessary to develop for spotty networks to ensure a quick loading time to not waste user’s data. For other tips on optimizing performance, check out “Designing for Performance”.

7 Signs Your Site Needs a Redesign

Tue, 01 Mar 2016 00:00:00 GMT

Technology ages in dog years, every normal year that passes equates to seven years in the tech world. Spotting outdated websites is easy to see, but there are also some underlying reasons why you may want to consider a redesign. Here are some items to investigate within your current website to see if you are in need of a redesign.

1. It Does Not Display Well on Mobile Devices

Google’s algorithm changed in 2015 for searches on mobile devices. Every business now needs a website that can display well on phones, also known as mobile-friendly. Smartphones have bypassed desktop searches and account for as much as 60% of all online searches. Not having a mobile-friendly or responsive website will hurt your business, if not today, then in the very near future.

2. No Content Management System

Content Management Systems, or CMS’s, have jumped leaps and bounds in the past five years to keep up with responsive websites. Our team at AVIBE has completely revamped our custom CMS to reflect the necessity of devising a system that is intuitive and flexible for the portable devices so prevalent today. One of our largest pet-peeves is seeing a website that has a very outdated copyright date. The copyright date is so simple to update, but seeing that it is 2 or more years old makes your content seem out of date and unreliable. Having a CMS allows your team to update content at any time; with content being the most important factor for viewers and SEO, this becomes extremely valuable for your company. If you are still relying on web firms to update your content, it is time to upgrade to a scalable solution.

3. Visitor Bounce Rates

We love working with our clients on their website Search Engine Optimization to ensure it performs just as well in searches as it displays. Using Google Analytics, it is easy to check on bounce rates for your website. A bounce rate means a user left on the same page they entered on. If the homepage bounce looks like a great test score, you have some serious problems. Google also uses this information for rankings within searches, and a high bounce rate tells search engines that visitors do not like what they see on your website.

4. You Have a ‘Frankenstein’ Website

Ok, while your website may not literally have angry, torch-wielding villagers chasing it, if you have made many small updates to your website over numerous years without consider the overall design, it may be considered a Frankenstein site. Having multiple places where your website does not match the original design can create a negative attitude of your company by your customers. One place we see this often is with blogs being in a different website, like WordPress. A web strategist can help you create a plan for a strongly branded and integrated website.

5. Your Competitors Are Killing It

While your website may look fine, your competitor’s website may look amazing. Websites only have a few seconds to capture the audience’s attention or users will go somewhere else. Your website is your virtual storefront, and needs to looks its best. In the internet age where the visual display is king, your customers should not view your website as a joker.

6. Weak Speed or Performance

Users expect websites to load in two seconds or less; if it doesn’t, a large share of people will click to another site. If a competitor’s website loads 250 milliseconds faster than yours, research has shown that many people will choose the faster loading website. Keeping your page load time to a minimum will make your customers, and search engines, very happy.

7. The Design is Outdated

We understand how fast trends can come and go, but exceptional design can stand the test of time. Unless your brand sells to a trendy demographic, stay away from what’s hot right now and choose a design that will look good years into the future; choosing a redesign also applies if your brand or services have changed since the website began and your design no longer matches your company. An aesthetically pleasing website translates into trust from your customers.

While design is important, having a functional website that works for both your company and your customers is key. Website performance, capable displays, and fresh, updated content will make your business stand out among your competitors. AVIBE’s team of web strategists, talented designers, and knowledgeable developers can help you achieve this goal! Schedule a Consultation, or contact our Marketing Specialist at 503.296.8499 to learn more!

UX Simplicity leads to Conversion Success

Mon, 01 Feb 2016 00:00:00 GMT

A New York Times study was conducted at a grocery retailer where employees set up a table with 24 different flavors of jam, and then the next day with only six different flavors of jam.

Prior to this study, the common marketing theory was that more choices are better for customers. People like more options, so providing more flavors should lead to more sales. The results from this study proved otherwise.

Jammed with Jams

During the time periods when 24 flavors were offered, 20% more people stopped to sample the jams than when only six jams were offered. These numbers seem to favor more choices, but the important question is this: which group actually purchased more?

When all those people sampled many flavors, only 3% purchased because there was too much information to analyze. The customers who sampled only six flavors, had a whopping 30% purchased! That’s a huge increase.

Customers might be attracted to a large number of choices, but when it comes time to make a purchase, too many options make decisions too complicated and lead to fewer sales.

There is a name for this, it’s called Analysis Paralysis where too many options become stress for our short term memory to process, hence rendering us incapable of making a decision or taking action.

People have created shortcuts around this problem. You go to the store and see that there are 1,505 different toothpastes all stacked up: Cavity Prevention, Enamel Protection, Sensitivity, Healthy Gums, Fluoride, Teeth-whitening, Multiple Flavors, so what do you do? You quickly buy the brand you recognize, can depend upon, and then get away from there as fast as you can to avoid the stress of having to analyze.

However, your company wants people to take a risk, stepping out of their comfort zone and trying your brand. You have tons of information to offer about why your brand is better, but you have to make it feel smart and easy.

How does this apply to your website?

Too many decisions will tire the users and creates less interest in accomplishing any task, including a simple click. Overcomplicated main navigations, paragraphs and paragraphs of text, too many images, multiple ads and buttons, etc. all contribute to Analysis Paralysis and fatigue the user.

Every attempt should be made to reduce the user’s responsibilities. Find the balance of content, attention choices, and lead the user’s eye through the composition of what you want to communicate and what the user wants to accomplish.

A study was conducted that used an online contact form comparing eleven form fields to four form fields. When the form fields were narrowed to only four, the weekly submissions increased by 160%, and complete conversion rates increased by 120%. Less is more.

Getting “many” leads is not really the main goal, the priority should be getting many high quality leads. A high quality lead can be someone who has already learned about your products or services and is now impressed at how easy you have made it for them to contact you.

If your website looks like the Las Vegas strip with blinking lights and signs everywhere, this will excite them, but will also create numbness and apathy. If everything is simultaneously shouting equally at them, inaction will certainly be the outcome.

It’s simpler to create complex interfaces because it’s so complex to simplify them. Everyone should invest the time because interface simplicity is proven more successful.

Thank you Neil Patel for your inspirations and observations.

Top 15 Logo Changes From 2015

Fri, 15 Jan 2016 00:00:00 GMT

Finding that perfect balance of refresh and homage is a real challenge for designers. Solving design problems such as awkward shapes that don't work well, colors that go out of fashion, or showing a company's change and modernization are all real reasons for a branding refresh, but sometimes it does appear as though a change was never really needed in the first place.

While some logos look "undesigned", appearing like the "just rolled out of bed hairstyle but it actually took 30 minutes to accomplish." Other logos are a departure from their tried and true self. What defines why logo redesigns need balance? What do you think of these logo changes from 2015?

#15 LA Clippers

One of the few on our list that changed their logo away from flat design, the Clippers abandon their retro look. The curved lines could resemble the seams in a basketball, or the mad/squinty emoticon to show you how tough they are. With a stylized acronym, inside a ball, sitting on top of lines, on a title, on other lines - it's really a logo in a logo on a logo, but, when you hold a design contest for a new logo, we never expect a good result. Dear Designers, please never particpate in a design contest! When you do, you devalue your worth and every designer on the planets' worth. The poor Clippers trying to get by on their shoe-string budget. Don't do it people!

#14 Best Western

Also not using flat design, Best Western goes a completely different direction. They removed all interest and color contrast, and since designers are taught how to make a shiny glass ball in their first semester at school, this design looks like they landed circa 2003 with someone using the generic trinity of Photoshop blending modes: drop shadow, bevel, and gradient. What, no stroke or lens flare?! #blahfailuninteresting

#13 Microsoft Edge

With Microsoft now ditching most support for their earlier versions of its mainstay browser Internet Explorer, the attempt to rebrand their new browser, Edge, could have used a few more revisions. Some people will argue that Microsoft is hanging on to the familiarity of the "e" shape to help their classic users find the shortcut icon and click, but we think that in order to prove to the rest of the world that something dramactic has changed they should have embrace an entirely different design direction. Although very professional, this logo is safe and too convienent to ignore.

#12 Verizon

So yeah, it's pretty easy to improve on the old logo, but while the new shape is probably much easier for their designers to work with, and the heavier font will read easier on mobile devices, it really fails to have any interest, imagination, or make any statement about the company. Unless what they are saying is: "we are a thick lowercase company that's absent of color, red check." Our thoughts are that they think their brand is so recognizable and solid enough that it only needs to have minimal design applied; we'll have to wait 10 years to find out. Stay tuned!

#11 Spotify

Welcome to flat design! Oh, Spotify. We're not sure there needed to be any change at all. We love your program, but not your new (fashionable?) color. Don't be surprised when this logo changes again this year, it's not easy being this color of green.

#10 KFC

Here's a brand that is looking to its history with veneration, and it's turning out quite fun and gloriously simple. Although here we are only comparing the old and new marks, the entire branding and packaging has received an overhaul using large red striped bars, flat design, plenty of negative space, and a nice oversized font. Blending the best of what is great now, with what was great then, makes it feels solid, secure, and trustworthy. Read this review to see more details about their rebrand.

#9 Johnnie Walker

Maintaining their classic main dandy character, Johnnie Walker desperately needed an update to their scripted font. The handwritten fonts just don't work at the smaller sizes required by mobile devices nowadays and their new all caps serif is working splendidly. Some might be concerned about adding more details to the 5th major variation of the Johnnie Walker illustration, but we think it shows that there are fine details to crafting a product with quality. The older version was too anonymous for our times, similar to the old Apple iPod silhouettes.

#8 OpenTable

Once again the new overall shape is much easier to work with and the heavier font will make the brand much easier to read on mobile devices. While the color red is notoriously used to make us hungry, and this brightened version of red is lighthearted and candied, we are slightly confused by the logo shape. Are we looking at the top of a wine bottle with the cork off to the side? Is it a bullseye? Or is it just a big "O"?

#7 Oculus

The new VR lens logo definetely moved in the right direction. The all-black is a bit bland, but we do understand how it fits the sleek non-descript aesthetic they are creating. They're allowing what the product does to be the life and color of their brand and the new mark looks like their product, so, BONUS!

#6 TV Land

When everyone is switching to all lower case, we like the fact that TV Land is switching to ALL CAPS! Since TV Land is appealing to Gen Xers who grew up with them, the maturity of the entertainment and the branded look needed to keep up as the old logo was too young and whimsical. The new flat banner shape adds interest, while showing upward movement on a slight angle. The new color is definitely cultivated, but, more like a color to paint your living room than an eye-catching logo. We wonder if they will play around with the color in future uses? Nice job!

#5 Coors Light

One of the best examples of the shift to flat design on our list. They held onto their collegiate Coca-Cola script but cleaned it up and flattened it out adding a killer new font for the "Light", much better! This is quite a big move and somehow feels exactly what you think the brand to be, that's a strong balancing act right there, kudos! Though we are not sure we agree with cutting off the "C", it does look great overall.

#4 IHOP

"Turn your frown upside down!" Another good example of a shift to simple, flat design. We do love the fact that they are not taking themselves too seriously. They are saying that they are a clean, family-friendly, fun place to enjoy a meal. The old font still works nicely and getting out of that trap of a rectangle helps to make it feel open and light-hearted. FYI, take note that the International House Of Pancakes first started using the acronym IHOP way back in 1973. OMG!

#3 Spike

Definitely an onomatopoeia (or should we say fontomatopoeia, haha). The action of the new font is very cool, it offers opposing directions and conflict, yet neutral and full of impact. The new logo is super simple, but looks like its name. We are down, Spike.

#2 Facebook

Such a subtle change, most people did not even notice. We like the softer logo, Facebook, with a small shift toward popular circle typefaces and it is clearly the best example of "undesign" on the list. Refreshed and under the radar, well done.

#1 Google

We thank you Google for the new, well deserved logo. Hopefully the old one gets to retire in a nice community with other venerable logos. That being said, the reality is that Google has the most flexible logo ever and we have flexed right along with it. Google has changed their logo hundreds of times to represent an historic day, or to play a witty game, or to pay tribute to a sad or mournful moment in time. Because of their business model and value to the masses, we might never see a company logo that has that same capacity. So with their new sans serif, soft, clean look and a nod to their colorful history, the new Google logo is #1 on our list!

Building a Robust Web That Lasts

Tue, 01 Dec 2015 00:00:00 GMT

With the Internet going into its 3^rd decade, it is good to look back and see how it all began. A computer scientist named Tim Berners-Lee proposed a concept of hypertext in the 1980’s. In the late 1980’s, Berners-Lee had an idea to connect hypertext to Transmission Control Protocol and the domain name system which created HTML and the World Wide Web. In 1990, he created the first web browser.

The first website was activated on August 6, 1991, and can still be found online today at http://info.cern.ch. It provided information on what the World Wide Web was, how to use the browser, and how to set up a web server. In 1994, Berners-Lee founded the W3C foundation (World Wide Web Consortium) which created standards to improve the web. They decided this information should be free, with no patents or royalties. This allowed for the expansion of the web to what we see today.

HTML is one of the few things within the technology world that is backwards compatible. The site listed above still works to this day, over 30 years later. One reason for this is that HTML was designed to be resilient and fault tolerant. This means if a web browser does not understand a tag, it will just ignore it and display the content within.

During the time period of 2002 – 2006, W3C developed an alternative language to HTML called XHTML 2, which was the next step for XHTML. It was short lived because of the strict syntax, no backwards compatibility, and it was too strict for general web coding. In 2009 it was retired after being rejected by the web community.

The Robustness Principle

Jon Postel was a computer scientist who was key to the development of Internet standards. He was famous for the quote, “Be liberal in what you accept, and conservative in what you send.” This is known as the Robustness Principle. This principle allows information to be accepted in many different ways, but returns it in the same format every time. This can be seen across the Internet when it comes to forms. From entering addresses to credit card numbers, people have many ways they enter their information. The Robustness Principle suggests that developers should try not to force users to enter information in a certain way, but accept the information and then format it properly.

Responsive Imagery

Images are another good example of how HTML is resilient. There are many tags that can be added within an image tag. A recent tag from HTML5 that is helpful in responsive websites is the “srcset” tag. This tag allows browsers to display higher resolution image, usually for retina displays. Here is an example of the srcset tag:

If the browser is older and does not understand srcset, it will just skip it and use the typical src tag. If it does understand, it can display different images based on viewport size, as shown with the 1000w and 2000w.

Progressive Enhancement

“When an escalator breaks, it becomes stairs. Websites should be able to partially break and still allow you to get things done.” – Christian Heilmann

With new functionality and enhancements happening every day within web development, we should remember to keep building a robust web that lasts. By identifying core functionality within links, forms, and data displays, a plan can be developed to allow fallbacks for these features. These fallbacks should be the same format that has been around for over 30 years, HTML and CSS.

Thanks to An Event Apart San Francisco 2015 and the presentation by Jeremy Keith for the information.

Designing for Performance

Sun, 15 Nov 2015 00:00:00 GMT

Performance is user experience. User experience is the core of what we do here at AVIBE. We strive to create a great user experience in all of our web applications. Designing web applications is a balancing act between business goals and user needs. We want fast, functional, and lightweight applications; but we also want beautiful, memorable, and on-brand applications.

Audiences want content fast. Fast websites build trust and are memorable. According to a 2012 New York Times study, shoppers expected pages to load in two seconds; at three seconds, a large share abandoned the site. People will visit a website less often if it is slower than a close competitor by more than 250 milliseconds—that is a quarter of a second! We can market performance as a feature to our clients and to their users.

In order to optimize performance, a web application’s images, custom web fonts, interactions, style sheets, and third party scripts must be considered. There are numerous ways we can optimize these to increase speed and performance. Fast websites do not have to be boring!

Goals should be created to prioritize performance from the beginning of a project by setting a performance budget, being deliberate in decisions and actions, and by communicating these actions. While doing so, keep mobile users in mind: create reusable patterns, avoid unneeded styles, and get designs into code earlier. Web applications should be tested on real devices and tested using different connection speeds.

A performance budget is a goal used to guide design and development. It is a tangible way to talk about performance. Consider every project decision as an item that has consequence. These budgets can be browser-based or user-experience-based. For example, set a budget of ten seconds for the amount of time that a page should load over a sub-3G connection, or set a per-page budget of 400kb or 15 requests. The important thing to note is that the budget should be followed at every step of the development process. If an image exceeds a page weight budget, then consider replacing the image, optimizing it, or removing some other page feature. The key to designing for performance is communicating performance goals to the team and to clients. Include performance budgets in project documents.

A user experience assessment can be created by identifying the strengths and weaknesses of current user experiences, including:

Usability
Content
Navigation
Information architecture
Performance
Workflow
Brand

It is also important to set a web font budget. Each unique font added to a web application can require an external request to the font source and adds additional loading time. Each font style—like italic or bold—can also add extra requests and loading. Do more with fewer fonts, and always include font fallbacks.

Another way to improve performance is by manipulating the images to be used. SVGs can replace simple images and can scale up for retina devices. If they are defined inline, they also eliminate the need for an HTTP request. JPEGs are able to reduce noise and other complexity. The export quality can be decreased and unimportant areas can be blurred.

Web applications can also be optimized through code enhancements. Create repurposable code. Rename non-semantic elements. Remove inefficient selectors. Remove unnecessary elements. Create patterns through style guides.

A great way to optimize web applications further is by analyzing them, using tools like webpagetest.org. This site provides data on page weight, time that a page takes to start to render, time that a page takes to fully load, number of HTTP requests, and speed index. According to webpagetest.org, "The Speed Index is the average time at which visible parts of the page are displayed. It is expressed in milliseconds and dependent on size of the view port." This tool allows you to view the data in graphs, videos and charts. It also allows you to compare site performance.

Using these tips, we can continue to produce beautiful and functional user experiences.

Thanks to An Event Apart San Francisco 2015 for presenting topics on performance. In particular, the presentations Design Decisions Through the Lens of Performance by Yesenia Perez Cruz and Designing for Performance by Lara Hogan provided great insight.

Is Your Website Secure?

Sun, 01 Nov 2015 00:00:00 GMT

The Internet can be very powerful and allows us to do some amazing things with data. But as Uncle Ben once said, "With great power, comes great responsibility." Ensuring your data is secure and safe in the constantly fluctuating battlefield of cyberspace is very important to us. This article will explain a few ways in which malicious users may attempt to put your data at risk. While not a comprehensive guide, this will serve as an eye-opener to the many things web developers have to be concerned about when it comes to security.

Protect Your Sessions

Two important concepts for web applications to protect against are Session Hijacking and Session Fixation. Any time you interact with a website, that website creates a unique session for you and your browser. Protecting that session is paramount. If an attacker can manipulate the website using your session, the website will not be able to distinguish your valid actions from those of an unwanted user. A malicious user may hijack a session using various approaches from "sniffing" data being sent across non-secure means, to inserting persistent cross-site scripting code to run in other users’ sessions.

Data sniffing can be stopped by having a Secure Socket Layer, also known as an SSL, on your website. You can tell when a site is secure because the URL will start with https:// instead of http://. You will also see a padlock icon in most browsers that can be clicked for more information. SSL's are relatively inexpensive and should be used anywhere where personal, or sensitive data is being sent or received. Some websites are even choosing to secure the entire site, rather than only securing forms or login sections of the site.

Cross-Site Scripting (XSS) uses scripts to run a malicious action. This can be reflected, using a direct link to run the script; or stored (also known as persistent) where a script is injected into the database and triggers each time that data is accessed. Sites that have comment sections or forms that submit to a database can be especially vulnerable to XSS. Developers can add validation to these forms which rely on whitelisting (allows only certain characters) or blacklisting (allows everything except the specified bad items). Most commonly, these would prevent custom HTML, JavaScript, or DIV tags from being entered into form fields.

The history of the Internet is riddled with famous examples of large and well-known companies falling victim to such attacks. One famous example is the "samy" hack. Through the use of a cross-site script, over one million MySpace user profiles were updated to say, “but most of all, samy is my hero.” A hacker used JavaScript in DIV tags so that whenever someone viewed a profile with this code, they would automatically be added as his friend and the quote above would be added to their profile; from there the code would propagate even further. After five hours, "samy" had 1 million friends and MySpace closed the site for repairs shortly after.

Protect Your Database

The last example of cybersecurity concerns is that of Structured Query Language (SQL) injection. Data stored on a database is very often stored and accessed via a programming language known as SQL. SQL injection is an attack to insert and have the database run unwanted SQL code, which can compromise the data within. For example, if a site uses SQL and it allows any text in a form to be run by its queries, an attacker may type SQL code in a form field that in essence means, “give me all the users’ login information, too!”

Session security and protection from SQL injection are just a couple of the many security risks web developers must be mindful of today. Fortunately, there are many tools to utilize and we at AVIBE take these situations seriously. The first step in defending a site from these risks is to develop sites with security in mind and avoid the naïve assumption that an attack will never happen.

PDX Palettes Fall 2015

Thu, 01 Oct 2015 00:00:00 GMT

NW Portland

Mt. Hood

NW Portland

SE Portland

SW Portland

What is Responsive Web Design?

Tue, 15 Sep 2015 00:00:00 GMT

The term “responsive web design” has greatly increased in popularity over the past couple of years. It has become so mainstream that web designers have almost completely adapted this concept as the new standard. The takeover of responsive design has come about because of the explosion of touch screens and mobile devices. According to some sources, 75-80% of US adults own a smart phone as of December 2014. This is not far behind the 91% that own a Personal Computer or laptop.

Responsive Web Design Explained

The idea behind a responsive website means the website will respond, or react, depending on the user's screen size, whether on an iPhone 3G screen or a large desktop monitor. Websites respond to screen sizes using a fluid grid system, where each column of the grid can resize or reposition depending on the width of the screen size. Within each proportion, the columns can shrink or grow to maximize the display area. For smaller screen sizes, the columns can stack on top of each other to allow for easy readability while not losing any elements of the content.

How Google is Changing Searching, Again

Starting April 21, 2015, Google will be updating their search algorithms by giving higher priority to websites that are mobile friendly. They have already been identifying websites that are mobile friendly with a tag placed before the website description. This has the possibility of having a huge impact on organic search rankings for companies that have not made the decision to create a mobile-friendly website. While not only affecting rankings, it will also influence a viewer’s choice of which website to visit, with mobile-friendly being a top choice. While Google has verified that users on a tablet will be treated like desktop users, this will be changing in the not-so-distant future.

Google Analytics provides great data on how many of your users are on a mobile device; the average for websites is about 30% currently, but this number is expected to be over 50% within the next couple of years. Even if your reports show smaller precentages, current trends indicate that organic search engine rankings, both mobile and desktop, will continue to be based on whether or not your website is mobile friendly.

Mobile-Friendly Websites

In the past, one way a company could adapt is by creating a separate mobile website, which meant they would have two different versions of a website: one version for phone and another version for desktop. While a mobile website is a good start, it is restrictive. First, businesses must update separate versions of their websites, which can double the time it takes to make any edits to the site. It also leaves out a large portion of users on tablets. From Microsoft’s Surface to Apple’s iPad, many people are opting for a device that is much easier to carry with them than a laptop. Even with the limitations of a mobile site, some companies are finding mobile sites to be a good temporary measure based on the needs of their customers.

The Future of Responsive Web Design

There is no longer a standard phone, tablet or monitor display size, and new screen sizes and resolutions for these devices rise each year. Our methods of interacting with the web and the accessibility of the Internet continue to evolve. Having a responsive website is the best way to know your site will give your customers the best user experience possible.

Technology has proven that it can progress quickly. How many times have you bought a new phone just to have something better come out a short time later? So, what does this mean for responsive web design? Will it be a thing of the past in the near future? While responsive web design does have a few limitations, its flexibility and power will be around for many years to come.

Put a Nerd On It

Sat, 01 Aug 2015 00:00:00 GMT

Did you know that Dr. Seuss coined the term “nerd” in his 1950 book If I Ran the Zoo? We love the term and have put it on everything from ink pens to t-shirts. If you love it as much as we do, show us your nerd love by downloading our wallpaper “Put a Nerd On It,” in honor of the TV show Portlandia’s quote “Put a Bird On It.”

Sizes:

Designing UX

Wed, 15 Jul 2015 00:00:00 GMT

User experience: You’ve heard of it, but what does it mean? What does it affect? Why is it important? All great questions…shall we get started?

Who

Arguably, the most important thing to consider when doing user-experience- focused design is grasping audience attention. Do you want to sell skateboards online? If so, you probably want to think of targeting your advertisements and web experience to young, athletic adults.

Now, the tricky part of this is not pigeonholing your design toward one user type. Counter intuitive? Map out all the user types you would expect to visit your website and come up with a way to make your online shopping cart easy to use for both 18-year-old Johnny Doe, as well as Jane Doe, his 54-year-old mother, buying the skateboard for his birthday.

What

UX is a strategy used for designing processes that users interact with. This is most frequently referenced when designing for web, but it doesn’t stop at the digital world. Here are some examples of UX in our daily lives:

Bus routes
Checking into a hotel
Being served at a restaurant
Filling prescriptions
Changing settings on the TV
Shopping in a mall

It may be strange to think that some of the listed items start with a UX design process. A good user experience design should be invisible to the end users.

Every year, hundreds of thousands of patents are filed through the U.S. Patent Office. Most new inventions are created to make specific tasks easier. There is a constant need and desire to make things more accessible and effortless.

When

Let’s jump back into the beginning of the digital age. The first website was introduced in 1991. Those who owned a computer in the early 90’s can vouch that there was a pretty strong learning curve for this brand new technology. Home computers and the concept of the Internet were unique and unfamiliar, and designing for this new concept was in its infancy. No one really knew how people would interact with this thing since there were very few users of computers at the time. There were precedents that needed to be set for UX, and now after 25+ years there are a lot of studies on what works, and what doesn’t.

We have become spoiled with good UX design, so it is easy to tell when more work is needed to create a successful design. The attention span of current web users is so short that 55% only spend 15 seconds on a website. Still think your website doesn’t need a refreshing new look with great UX? Think again.

Where

Think about an average morning: Alarm clock buzzes, coffee maker brews, and smart phones need to be checked. All of these mechanisms have been designed to be easy and simple to use, and those are just the ones used before 9:00 a.m. How many things do you interact with on a daily basis that have been specifically created to make your life easier or more luxurious?

With an ever-growing number of people partaking in personal technology, the world is learning at a remarkable rate what people want. Smart devices have allowed designers to dive into more personal and advanced UX. A person can go into a physical store, download the store’s app, and view an interactive map of the store’s floor plan. Not only is this type of user experience portable, but it makes everything more efficient.

Why

User experience is being studied for a number of reasons, from personal safety to outright enjoyment. From a marketing standpoint, the better the UX, the more successful the business. A grocery store with an intuitive shopping environment, a drive-thru car wash, a restaurant with attentive staff, or a tech company with an easy-to-use website are all examples of businesses working for their audience.

Consumers are more likely to use or shop for items based on how simple their experience was. The inspiration for user experience is the phrase, “Don’t make me think.” If a user can get from point A to point B with little effort and thought, you’ve done your job.

How

Some of the best technological UX design is meant to resemble human nature. Have you ever entered your password wrong and the login box shook at you? That small animation is a human gesture letting the audience react to a “no” head shake directing them to the error made.

We have learned that hiding distracting information and consolidating actions into fewer steps makes the process easier to digest. Letting users see how long a process takes helps users comprehend time expectancy on any given task. It is in our nature to want to see the end of something before starting—a race, a book, a road trip, or a blog.

Sorted Out

It is easy to forget how integrated technology is in our everyday lives, until it is not available. The various intuitive processes we depend on came into being through extensive studies and research that created a natural and invisible user experience.

When starting your own design process, think of the who, what, when, where, why, and how. Do your ideas complicate things or make them easier? Does the process feel intuitive and natural? Choose your two most drastically different users and plan their journey through your design. Once it feels smooth…try it ten more times.

Whether you are planning an event, creating a new company advertisement, or designing a new web interface, UX design should be a top priority. Pay attention to studies and ask your users questions. Find out what people want and how it can be handed to them. Work with an intelligent team that has experience with UX design and look into all possible routes before committing to the first idea.

10 Year Anniversary

Sun, 14 Jun 2015 00:00:00 GMT

Thank you to all of the amazing clients we have worked with over the years. We appreciate each and every one of you!

Site Structure

Fri, 15 May 2015 00:00:00 GMT

Creating great site content is based on having a strong foundation that comes from building an organized sitemap. With every company being different, there isn’t one exact formula that everyone has to follow, but there definitely are some important strategies that should be considered when formatting site content.

Before we dive into building the architecture, let’s get organized. Look at the first draft of your site map and ask yourself the following questions:

Will I be able to provide unique and compelling content for all of the pages I want?
Can any of these pages be grouped into one larger page?
Are the titles of the pages clear to a broad audience?

Now we are ready to dig in. Here are some hints, ideas, and guidelines to consider when creating your site map.

Cover the Basics

Two pages you want to start thinking about immediately are the home page and the contact page.

Believe it or not, there is no need for a ‘home’ button to be included in your navigation. At one time this was necessary, but luckily we are creatures of habit and have learned that the site logos will 99.99% of the time work the same as a ‘home’ button.

One of your top level pages, preferably the last one, should be your contact page. Many users, especially on mobile, come to your site to get contact information. The biggest mistake you can make when creating your site map is making this page difficult to find.

Categorize your pages and be obvious

The main navigation should be clean, clear and concise. Your users won’t mind dropdowns if they are easily taken to where they want to go. Start small. Most sites can fit into a structure containing 3-7 top navigation links.

http://www.tinyfootprintcoffee.com/

http://www.stopcmv.org

http://www.privategetaways.com

http://www.clarkdesigngroup.com

Your site visitor came to your website for a reason; let them find what they are looking for. If your navigation is simple to manage, they won’t have any trouble. The way a business thinks vs. how a customer thinks can vary greatly. Think to yourself, “How would a customer search for this product?” Just because your products and services are clear to you, doesn’t mean a customer won’t have some trouble knowing the exact page to visit for the information they want.

http://www.microsoft.com

This isn't the labyrinth

Users should not ask themselves, “How did I get here?” or, “How do I get back?” If a visitor doesn’t know how he got to a certain page, he won’t know how to get back. He’ll be confused and his overall experience will be nerve-racking. This subject can be brought up during the design process to make sure there are clear indicators to show a user’s location on the site. Breadcrumbs are a proven example of this:

http://www.newegg.com

Time to study

Check out sites that you frequent and find new sites to explore. What works with their navigation? What would make it better? How are your competitors doing it? Sites like http://www.webdesign-inspiration.com/ have collections of beautiful web pages and can filter web pages by industry. Exploring and taking notes will provide you with the best idea for your own site map. Good luck!

Above the Fold

Sun, 15 Mar 2015 00:00:00 GMT

A company website is now arguably as important as a physical store front. Many people look at a company site to decide whether or not they even want to visit the store. A quick search online gives users immediate information regarding business hours, location, contact, and store offerings.

The world of web design is constantly changing with new trends, languages, and functionality. What used to be a design standard does not apply anymore.

Designers had to change layouts when the world created new devices. Now that over 58% of American adults own a smart phone, it’s high time designers and business owners alike considered the ever-growing number of mobile users and how they interact with the web. What is the most natural gesture to use on a tablet or phone? Scroll. For years there was a taboo idea that users didn’t scroll down. This is no longer the case.

The Dreaded 'Fold'

This is a design term that originally came from newspapers. The goal was to make the front page content enticing enough to convince a passerby to purchase the newspaper and continue reading. Unfortunately, this idea adapted itself into the web world. The “digital fold” would be the bottom of your view port, whether this is a laptop, tablet, or phone. What you see on your desktop will change dramatically on your mobile phone. The concept is to put the most important information “above the fold,” or the top portion of a folded newspaper.

A Better Concept

If all of the important web content is crammed into one small area, it makes it difficult to read and navigate. If you owned a retail store, you wouldn’t put your entire inventory in your front windows. You would pick some special elements that will convince the customers to come in and browse. Your home page is a store front, and it should be treated the same way as the front window.

The New Store Front

The first impression of your website is very important. The top content needs to be enticing and informative without going overboard. Decide with your team and web designer what kind of impression you want to make on visitors. What are the ultimate goals or actions you want a user to take?

Give your visitors an easy introduction into your business. Start small with a logo, slogan, imagery, intro statement, etc. Avoid adding multiple ‘Call to Actions’ and don’t pester the user to make decisions before they have read about your company.

Organizing Content

The first step of page organization is creating a site map of every page you need included on your website. If you intend to have secondary navigation, nest any pages that fall under main categories; for example, ‘Our Staff’ may go under ‘About.’ This can be done in numerous programs such as Word or Excel, and you can find many examples online on how this can be set up. Having a visual reference will help to determine if similar pages can be combined, or conversely, if you need additional pages to make it easier for a user to find the information they are looking for.

Consider your user’s goals when viewing your site. Most companies design websites based on what they think users should see or do. Instead, ask yourself, “What does the user want from my site?” You can find this information through market studies, reviewing you own Analytics data, or providing surveys to your different types of users (casual browsers, returning users, and frequent visitors).

Scrolling Isn't Bad

With the World Wide Web now fitting in pockets across the globe, web design needs to adapt to hand held devices. Touch screen devices require scrolling on a regular basis, whether you’re looking through contacts, text messages, emails, etc. This action has become second nature. Scrolling is a way for viewers to discover interesting sections of your website. “Mobile first” design theories are becoming commonplace for web designers. Having a key concept about how your website will be displayed on phones replaces the former idea of designing for mobile afterward. This makes it easy to carry the design forward into desktop monitors with longer pages that require scrolling.

Laying Out Pages

Think of each page within your site as a chapter in a book. Chapters can go across multiple pages within a book; your website sections can expand vertically in the same way. Each new thought on your page needs plenty of breathing room. Think how important paragraphs are. Imagine trying to read a book without paragraphs where all the text is crammed together. That, for sure, would not be on the bestseller list.

Make sure that your site is easy for users to navigate; don’t ask them to read everything all at once. Your ‘Call to Actions’ should direct your visitors to important information they want to see, rather than ask them to take an action without knowing about your company.

In A Nut Shell

When you hire a web company to create a new site or redesign your current one, discuss with them the current standards of web design and user experience. Scrolling should be fun, not scary. The easier your website is to browse, the more time visitors will spend reading. Let the users explore your website like a Choose Your Own Adventure story and allow them to discover fun and inviting sections. Use call to actions in a smart way and users will navigate through the site with ease. Allow web content to breathe so that you may give users the ability to digest the information at their own pace. No more cramming content!

Hey look! You made it to the end of the blog. Congrats for all of that scrolling. It wasn’t so bad was it?

Rebrand—Rebland

Sun, 01 Feb 2015 00:00:00 GMT

A company is a living and breathing thing in this world. Successful businesses and corporations grow and adapt to their surroundings. In order to stay current these companies need to update their missions, rethink their marketing, and put a fresh coat of paint on the walls.

Brands are signatures, and there will always be some reservations about updating the branding for a successful company; however, it must. be. done. Unless a company hit gold the first time, like the Nike swoosh in 1971, chances are their branding will need a facelift after some time.

Here are some of the most notable logo changes in 2014. As you will be able to tell, flat design is so hot right now!

8. Fandango Movie Guide

This one probably flew under the radar for most people, but the changes are a step in the right direction.

Originally, the black outline with yellow and red, oh, and some shadows, wait, and it looks like a ticket, and an 'F'… In short, they cut the unneeded elements out of the old mark. The new capital 'F' is in proportion and people will be able to recognize the ‘ticket’ look of the mark.

The previous typeface had too much spacing and the letters didn’t even look like they came from the same family. What is going on with that ‘D’ in the original logo? The updated title has more a defined and harmonious presence.

7. Netflix Online Movie & TV Network

Dramatic isn’t it?

Take a good idea, and then make it better. Netflix tossed the drop shadow and updated the font. The arch still works and the letters are easier to read. The logo on the left may be iconic, but the new logo will give Netflix more freedom. And that’s what this country it all about, right?!

6. ThinkGeek Online Retailer

ThinkGeek is a beloved online market for many things geeky, from Star Trek robes to HTML baby books. The old logo never quite hit the mark for the product or the audience. The logo is silly and maybe a bit geeky—with the brain and the typewriter font—but it was never quite right. What is that, a cigarette?

How exciting, a new logo for ThinkGeek! Oh…that’s it? While I appreciate the aesthetics…the colors, the backward-ness and the slogan…where’s the geek?!

With a thousand ways to make a logo geeky, they used absolutely zero. Our recommendation would be to create a simple ‘base’ logo, and then make a series depicting various geeky themes, like Mario, Dr. Who, and Star Wars. This could have been your Google doodle, guys!

5. Cricket Wireless Provider

We all know the 90's were a crazy time, but what were you thinking?! Are those cricket legs? Grass? We don’t even know anymore. Forgive and forget is what they always say.

The updated Cricket logo came paired with an entire new brand approach, now found in all of their advertising, and it’s a huge improvement. Keeping the green mark in the 'K'? Fantastic. Keeping the whole logo as a cohesive unit, even better!

4. Hershey Chocolate Company

Hershey’s summer redesign received quite a lot of attention. Most people hadn’t really thought of Hershey even having a logo. It simply looks like the iconic chocolate bar. Well, apparently this was their business logo, and to be frank, it needed an update. In the old logo, nothing is aligned with intention, the letter embossing is difficult to work with, and a photorealistic chocolate kiss is not print friendly.

The new design, however, has received some scrutiny for what the flat kiss candy resembles. Sure, maybe it looks like something your dog might leave in the back yard, but hasn’t the Hershey’s kiss always resembled that? Eventually people will stop teasing the look of this logo, because, deep down, we all know it’s chocolate.

3. Olive Garden Italian Restaurant

After 32 years, Olive Garden finally updated their tacky old-world logo. Would you believe that the new logo finally has olives on it? Honey, those purple things on the right were grapes. The logo that they have been dragging around since the 80's is one of the most difficult logos to work with. Texture, background, shadows, gradients...oh the inhumanity! How would a newspaper publisher even create a black and white version of this logo? It’s been a long time coming, OG, and we are happy for you!

2. Foursquare Location-based social network

Foursquare announced their rebranding early this summer, along with a new business approach. Essentially, they are dividing the app into two separate experiences and keeping the Foursquare name with the new ‘Yelp-esque’ travel and recommendation app.

Now that users won’t be checking into locations with this app, the previous logo/icon had to go. The logo grew out of its lowercase, heavily stroked look and traded it in for a crisp, uppercase, geometric typeface. The icon mimics the classic ‘pinpoint’ look found on maps, but with their own signature 'F.'

No opinion yet in regards to the split being a good business move, but the branding is a step up.

1. Airbnb Travel Rentals

Airbnb had a very interesting time this year rebranding themselves. Founded in 2008, Airbnb started out with a modest “lighter than air” type logo. The subtle shadow, large white stroke, handwritten bubble script font, and the light blue gradient were meant to give you a cloud-like euphoric feeling. The perfect innocuous logo for a new company.

Well…the times have changed, the company grew, and Airbnb got a makeover. They rebranded with an identifiable mark, dropped the gradient and shadow for a flat design, and adopted a sans-serif font.

The controversy around this logo is fierce. So far the new mark has sparked major ridicule. There is even a song about it by the awkward British synth-pop band, The Brett Domino Trio, and within the depths of the Internet, much, much more.

There have also been claims of plagiarism. Automation Anywhere has an extremely similar logo:

Since this comparison, Airbnb and Automation Anywhere released a joint statement:

“In early 2014 both Airbnb and Automation Anywhere began use of new logos that, by coincidence, have similar designs. Airbnb and Automation Anywhere are working cooperatively to address this issue, and Automation Anywhere is in the process of transitioning to a new logo design that is not similar to the Airbnb logo.”

They say all publicity is good publicity, but one could argue that point.