Technology

User Authentication with JSON Web Tokens

By Joshua Kemmerling
Architect, projekt202

Security today is more important than ever. Most people I know have online accounts at a bunch of different social networks or online retailers. Some of these websites require personal information and some don't. But every new website you create an account for increases your vunerability to being hacked. So, as web developers, we need to make security a priority during development. It doesn't matter if it's a mobile app, API or a client-side application. Security needs to always be taken into consideration.

Security is not only incredibly important today, but it's also easier to implement today than it was years ago. Developers have huge amounts of resources available to be able to learn about the most recent security standards and techniques, and most all of these techniques have been tested and proven. So, there isn't any good reason that a website should be lacking with its security.

There are many security concepts and techniques that exist, but I want to talk about JSON web tokens.

What are JSON Web Tokens, You Say?

JSON web tokens are a way to authenticate an API request. Each JSON web token is digitally signed, so JSON can be sent between clients securely. A JSON web token is made up of three parts -- header, payload and signature -- and looks like xxxxxx.yyyyyy.zzzzzz. They are very compact and can also contain necessary information in its payload, so you won't need to query a database as much as you normally would. JSON web tokens are stateless, so it is simpler for the server to authenticate API requests.

Let's see how we can use JSON web tokens in the real world.

Authenticate Users

In this first example, we are going to use JSON web tokens to authenticate the API request after a user has logged in. This is the most common situation where we at projekt202 use JSON web tokens. Note that all examples use Node and expressjs on the server.

1. Install jsonwebtoken Package

The first thing we need to do is install the required packages command in the command prompt:

[code language="shell"] $ npm install jsonwebtoken $ npm install express [/code]

2. Require the need packages

We need to require jsonwebtoken and the crypto library at the top of our file. The crypto library is built into Node, so it's already on your computer.

[code language="javascript"] var crypto = require('crypto'); var jwt = require('jsonwebtoken'); var express = require('express'); [/code]

3. Create the secret key

The next thing we want to do is create a secret string that will be used to digitally sign each token. This is what gives us the ability to trust JSON web tokens. When you create the secret key, it is extremely important that no one knows what the secret key is. If someone knows the secret key, then that person is able to create valid tokens to send to the server. To make sure that no one knows the secret key -- not even the developers that wrote the code -- we are going to use the crypto library and tell it to return us 20 random bytes, then we convert that to a string. We are going to set that value to a variable when the file loads up. This means that the only person that will be able to know the secret key will have to purposely write code to output the secret. You create the secret key like:

[code language="javascript"] process.env.jwtsecret = crypto.randomBytes(20).toString('hex'); [/code]

4. Create the token

The next step is to create the token. We do this by calling a function in the jsonwebtoken framework like:

[code language="javascript"] var token = jwt.sign({ role: 'admin', }, process.env.jwtsecret, { algorithm: 'HS512', expiresIn: 300 }); [/code]

The default algorithm used when creating the token is HS256. We want to replace that with HS512 for increased security. We also want to set an expiration time so that keys cannot live forever. In this situation, we are going to set the expiresIn to 5 minutes, but we have to give the time in seconds to the function. We are also using this to limit the amount of time a user can be logged in.

5. Attach the token to the response header

After the token is created, you want to send that token in the response header back to the client making the API request. Every API request will have the token in the header to verify the request. You will verify the token, then, if valid, create a new token and send it back to client to save for the next request. Using expresses, we can do this with middleware.

Read more about expressjs middleware here.

[code language="javascript"] app.use(function (req, res, next) { try { jwt.verify(req.get('x-token'), process.env.jwtsecret, { algorithms: [ 'HS512' ] }); } catch (e) { res.send(401);

return false; }

var token = jwt.sign({ role: 'admin', userId: 'h3bd-87db-23jh-8dh2-87d3-asd2-p2er' }, process.env.jwtsecret, { algorithm: 'HS512', expiresIn: 300 });

res.setHeader('x-token', token);

next(); }); [/code]

Full index.js file

Here is the entire index.js file for the server:

[code language="javascript"] var crypto = require('crypto'); var jwt = require('jsonwebtoken'); var express = require('express');

process.env.jwtsecret = crypto.randomBytes(20).toString('hex');

var app = express();

app.use(function (req, res, next) { try { jwt.verify(req.get('x-token'), process.env.jwtsecret, { algorithms: [ 'HS512' ] }); } catch (e) { res.send(401);

return false; }

var token = jwt.sign({ role: 'admin', userId: 'h3bd-87db-23jh-8dh2-87d3-asd2-p2er' }, process.env.jwtsecret, { algorithm: 'HS512', expiresIn: 300 });

res.setHeader('x-token', token);

next(); });

app.get('/', function (req, res) { res.send('Hello World!'); });

app.listen(3000, function () { console.log('Example app listening on port 3000!'); }); [/code]

More to Learn

This is a simple version that we use to authenticate users. I encourage you to customize this to your needs and read more about JSON web tokens. A good place to start is jwt.io. The site has more information and a way to test your tokens.

Look for another article in the near future on how to use JSON web tokens to authenticate application access to your API.

Stay up-to-date on projekt202 news, events and upcoming articles. Follow us on LinkedIn, Twitter, Facebook,YouTube and Instagram.

Bringing UX Issues to Light in New "Expose UX"

Expose-UX-ep-14.jpg

projekt202's Senior UX Designer Chelsea Maxwell and Vice President of Customer Experience Jeremy Johnson share their expertise in an illuminating new episode of "Expose UX," a TV show devoted to identifying user experience (UX) issues and solutions.

The latest episode shines a spotlight on Openbrite, whose modular LEDgoes products allow businesses to create programmable LED marquee displays of any size, shape, color and speed. However, its creators are struggling to clearly pinpoint their key audiences.

Along with fellow UX expert James Helms, Chelsea and Jeremy open up with their own bright advice on the importance of targeting exact users. Watch the new episode now.

Stay up-to-date on projekt202 news. Follow us on LinkedIn, Twitter, Facebook and Instagram.

projekt202's Thought Leaders Provide Direction on UX, Strategy and More

Some of projekt202's Thought Leaders -- representing key areas such as User Experience (UX) Design, Technology, and Experience Strategy, among many others -- broadcast their expertise in solving complex challenges facing today's businesses. Their presentations were recorded this week as part of projekt202's new Thought Leadership series. The videos showcase the experts behind projekt202's methodology and holistic approach to experience-driven application development.

Solutions Architect Ben Bays hits his mark for his recording session, as Vice President of Customer Experience Jeremy Johnson looks on.
Solutions Architect Ben Bays hits his mark for his recording session, as Vice President of Customer Experience Jeremy Johnson looks on.
Senior Experience Strategist Shannon Graf is one of the Thought Leaders in projekt202's new video series.
Senior Experience Strategist Shannon Graf is one of the Thought Leaders in projekt202's new video series.
Bringing focus to the ways projekt202 leads in experience-driven application development.
Bringing focus to the ways projekt202 leads in experience-driven application development.
Assembling a great design isn't child's play. Senior UX Designer Josh Christopher, UX Designer Anne Grundhoefer and Solutions Architect Drew Loomer share their creativity in helping companies deliver better solutions for customers.
Assembling a great design isn't child's play. Senior UX Designer Josh Christopher, UX Designer Anne Grundhoefer and Solutions Architect Drew Loomer share their creativity in helping companies deliver better solutions for customers.

Learn more about what we do at projekt202.

projekt202 podcast: 3 Areas Primed for Real UX Change

In the world of UX design, what are three key areas primed for real change?

projekt202 VP of UX Mike Blakesley
projekt202 VP of UX Mike Blakesley

In this podcast with projekt202′s Vice President of User Experience, Mike Blakesley looks at the present and future states of the industry, and discusses significant UX opportunities to leverage in the remainder of the year and into the next.

Follow us on LinkedIn, Twitter, Facebook and Instagram to stay up-to-date on projekt202 news.

projekt202 podcast: Why Smart Companies Adopt UX

projekt202 Chairman and CEO David Lancashire
projekt202 Chairman and CEO David Lancashire

 

"It's going to tie directly back to what we're designing, building, taking into market and driving revenue streams with."

How are companies missing out if they fail to employ user-experience (UX) strategies and what impact does this approach have on their bottom lines?

In this conversation with projekt202's Chairman and CEO, David Lancashire shares the real-world ROI of user experience, his advice to skeptics about embracing UX, and his predictions on the resources that companies will invest in and adopt in coming years.

Follow us on LinkedIn, Twitter, Facebook and Instagram to stay current on projekt202 news.

CEO David Lancashire Celebrates UX at Dallas Tech Event

What was your user experience "aha!" moment? That was the question put to North Texas technology leaders, including projekt202 Chairman and CEO David Lancashire, at Celebrate UX on May 12. The networking event for Dallas' technology, design and business communities was hosted by producers of the TV show "Expose UX."

projekt202 Chairman and CEO David Lancashire shared some of the steps he took to rise to the top of the UX field.

David shared his UX story of meeting projekt202 Co-Founder Peter Eckert.

"Peter talked about the programmatic methodology he'd been working on since 2003, a repeatable framework to gain customer and user understanding to capture their wants, needs, aspirations and even their emotional connection points. It was the reality of delivering a great user experience," David recalled. "This framework for gaining real customer insights was a breath of fresh air."

It was so refreshing, in fact, that David bought projekt202. The trustworthy methodology developed by Peter -- now the company's Chief Experience Office -- is used by projekt202 today to help companies and organizations deliver better digital experiences for people everywhere.

Along with David, executives from AIGA Dallas, Launch DFW, Women Who Code Dallas, Big Design Events and the Dallas Entrepreneur Center discussed their key moments of UX enlightenment.

Compelling user-experience stories also liven up "Expose UX." In each episode, startups make their best product pitches to a panel of local UX experts; panelists have included projekt202's Vice President of Customer Experience Jeremy Johnson and Senior UX Designer Chelsea Maxwell. Participants receive useful feedback and, if their pitches are strong enough, a variety of prizes. As one producer described the show, "It's 'Shark Tank' for design."

The Celebrate UX event in Dallas was the kick-off to the "Expose UX" Kickstarter tour, as well. The TV crew will travel to 25 U.S. cities to showcase its program and, no doubt, capture more UX "aha!" moments along the way.

projekt202's Lindsey Norman, Anne Grundhoefer, Hayley Parham, Lori Lodwick, Karen King, Lan Nguyen and Chelsea Maxwell

Jeremy Johnson, with Ryan and Rayn Breault

projekt202's Matt Scamardo, Jeremy Johnson, Drew Loomer and Anne Grundhoefer


Follow us on LinkedIn, Twitter, Facebook and Instagram to stay current on projekt202 news.

projekt202 podcast: Designing Experiences that People Really Value

"It is changing the industry ... This approach has at times been called 'design thinking.' At projekt202, we like to call it also 'experience thinking,' because it really is all about people's experiences."

projekt202's VP of Experience Strategy and Insight Aliza Gold
projekt202's VP of Experience Strategy and Insight Aliza Gold

In this conversation with projekt202's Vice President of Experience Strategy and Insight, Aliza Gold discusses the importance of fully realizing customers' wants, needs, motivations and goals.

"Understanding those elements," she says, "is what helps us design, create and envision experiences that people really value and can connect with emotionally."

Follow Aliza Gold on Twitter: @alizagold

projekt202 Announces Executive Promotions in Austin

Peter Eckert, Michael Blakesley, Dennis Van Huffel and Paul Tidwell
Peter Eckert, Michael Blakesley, Dennis Van Huffel and Paul Tidwell


Fast-growing projekt202 has announced senior leadership promotions on its Austin team.

Michael Blakesley has been named Vice President of User Experience (UX), Dennis Van Huffel is Austin's new Director of UX and Paul Tidwell steps up as Vice President of Technology.

Co-Founder and Chief Experience Officer Peter Eckert will take on added responsibilities as projekt202 Ambassador, increasing his industry outreach to actively promote the company's programmatic, observation-based methodology. Peter will drive strategic guidance for clients and present his renowned, industry-defining insights on national and international tech stages.

A Prescription for Health Care Innovation and Disruption at Austin Hackathon

What's the cure for health care's stagnant status quo? Creating change and disruption through technology. That was the focus of the 2016 More Disruption Please Austin Hackathon, presented by athenahealth.

Recognizing the robust opportunities available for innovation, the April event brought together forward-thinking experts to prescribe tech solutions for the health care industry.

projekt202's Amber Lindholm, Director of Experience Strategy and Insight, served as featured speaker and judge, along with leaders from athenahealth, Dell Medical School and Patient IO.

With $6,000 in prize money at stake, teams strategized and made health care tech pitches to the judging panel.

Winning teams were Hemolabs for best overall health care technology solution, DxMachina for best use of athenahealth API and Remedi for the best inpatient solution.

Get Your Tickets to Join projekt202 at Expose UX Party in Deep Ellum

Join projekt202 on Thursday evening, May 12, for the Expose UX Kickstarter Party in Dallas' Deep Ellum.

It's an opportunity to meet, mingle and network with fellow technology, design, development and UX professionals. projekt202 CEO and Chairman David Lancashire will be a featured speaker and panelist, along with North Texas-area user experience professionals sharing their UXpertise.

This May 12 event is the kick-off to the Expose UX team's 25-city U.S. tour. Produced in Dallas, Expose UX is a TV show where startups make their company and product pitches for prizes, while receiving in-person feedback from local UX experts.

Get your free tickets now while supplies last.

What: Expose UX Kickstarter Party

When:
7-11 p.m.
Thursday, May 12

Where:
Common Desk
2919 Commerce St.
Dallas, TX 75226

Embracing the Evolution toward the Experience of Things

Embracing the Evolution toward the Experience of Things

Over the next few years, many advancements in technology will unfold and dramatically shift our behavior and expectations in society. Just look at the IoT, the Industrial Internet, autonomous driving and flying, virtual and augmented reality, wearable devices, biometrics sensors and implants, among others. It is on us to bring these things together in a meaningful way. Welcome to the Experience of Things.

Success Story: Improved UX Breathes New Life into the ERP Market

Challenge: We need to disrupt the ERP market … starting with our own software

An operational technology distributor decided to change how enterprise resource planning (ERP) software is built and used in the marketplace. Over the course of the global company’s growth, its existing ERP software had fossilized into a cumbersome, difficult obstacle. Inconsistent user experiences began negatively affecting sales as more niche-focused competitive threats emerged, increasing pressure on the firm’s R&D.

Recommendations: New personas facilitate better communication and awareness

Observing over 200 core ERP users across 12 countries in more than 60 enterprise environments provided projekt202’s Experience Strategy and Insight and UX team with a wealth of key insights. For instance, while most users had difficulty learning and using the software, the two largest issues were process awareness and communication. Most enterprises using ERP solutions also experienced inefficient use, long training times and high staff turnover.

From this comprehensive data, projekt202 created eight company-wide personas to emphasize users’ needs. Workflow models for each gave teams more insight into persona needs. New navigation frameworks were validated with users before core development and platform planning began. Tools and concepts were created for communication and process awareness. projekt202 also created and presented design guidelines, principles and themes to the client's R&D team.

Results: Improved UX leads to greater demand and renewed customer loyalty

The client saw improved demand for its existing and in-development ERP solutions. Reduced needs for training, call center activity, and help and documentation validated improved user experiences. Improvements led to increased customer loyalty.

Tools built for the new ERP solution became omnipresent across the client platform. The R&D team was trained on projekt202's methodology, now an essential part of the team’s strategy. Interactive design resources and pattern libraries are used throughout the organization to drive marketing efforts and further increase growth.

More than five years later, projekt202 continues its successful design and development partnership that grew out of this initial project.

Success Story: Applying an Enterprising Solution for Suite Consistency

Challenge: Applications are running into language barriers

One of the world’s top technology and hardware development companies needed consistency across its enterprise suite of over 80 applications. A streamlined enterprise design language, uniform navigation and standard product guidelines were essential.

Recommendation: Create language and workflow consistency

With its experience-driven design research methodology, projekt202 was asked to improve key workflows for high-revenue products and establish a design-thinking approach within the enterprise organization.

To gain insights into core users, projekt202’s team observed IT administrators, revealing that more than half of the applications were controlled by third-party development teams. In addition, many products had overlaps in functionality.

projekt202 also conducted a visual design exploration that would become the foundation for the company’s enterprise design language. This created a new look and feel to apply to an initial set of core products, showcasing their scalability and flexibility.

Results: Uniform language delivers pronounced revenue increases and brand reception

Applying its synthesized data from direct user observations, projekt202 built a new navigation across large portions of the application suite. The team also created an online repository to facilitate the new enterprise design language and its patterns. With these guidelines, the client established requirements for all third-party teams, which formed a more streamlined, cohesive and integrated suite of applications.

As a result of projekt202’s work:

  • The client’s software as a service (SaaS) revenue has grown dramatically, along with its Net Promoter Score (NPS), a valuable indicator of business performance and brand experience
  • The company bulked up its internal user experience (UX) team from three members to more than 30
  • Employees have access to continuing education on experience-driven design and UX classes, taught by projekt202

Success Story: Thinking Outside the Box for a Handier Mobile Experience

Challenge: A retailer’s mobile presence didn’t pack the punch of its in-store experience

A nationwide retail chain couldn’t contain itself any longer: it realized that its mobile app was boxing the retailer into a corner. Customers were hampered by the app’s lack of responsive enhancements for phones and tablets, text that appeared too small and difficult to read, and navigation that was incompatible with touch devices. The retailer needed to shelve the cluttered app and, in its place, provide customers with a responsive and consistent user experience across all platforms.

Recommendation: Organize a full mobile redesign and updates to key features

projekt202’s team of designers and developers wireframed each section of the client’s existing mobile app. A visual design was presented to the retailer in the form of clickable prototypes, the frames of reference for projekt202’s developers to build the application. Developers also improved the app’s default font size to make text more legible, increased the size of the navigation buttons and redesigned menus for touch devices.

The projekt202 team made updates to the shopping section, where all filters, categories and product detail pages were overhauled to be more user-friendly. In addition, the wish list feature was redesigned so consumers could readily and conveniently access their favorite or saved items from any device.

Results: Exceeding the goal for reaching shoppers on mobile devices, with a mention in Forbes for Best Mobile Site Performance

A primary goal for the retailer was to boost the percentage of customers shopping from mobile devices, which previously stood at a rate of 0.1 to 0.375 percent. After projekt202 wrapped up its responsive redesign, the conversion rate surpassed that goal, rising to 0.45 percent. The increased rate of conversion meant more value to the retailer’s bottom line and the overall result was an accessible, better-organized and more user-friendly shopping experience.

In addition, Forbes cited the retailer for having the best mobile site performance, with a high score of 88 out of 100. These findings were based on a survey of 300 websites and mobile sites during the hectic holiday season. Companies were scored against 200 best practices, with criteria that included social media integration, contextual help including live chat and mobile optimization.

Success Story: Superior UX Delivers Over $1 Billion in Sales

Challenge: An unreliable workforce design needs to be terminated

A global workforce management company was laboring under outdated, convoluted technology. Its primary management resource had grown inconsistent, unreliable and difficult to use. The organization needed to improve customer interactions, keep competitors at bay, and create a new user-centered design and development process internally.

Recommendations: A redesign, UX support and a demo that silences the competition

projekt202 identified pressures from key competitors, documented users’ frustrations and perceptions, and interviewed stakeholders to capture the vision of the organization. Based on its analysis, the projekt202 team recommended a user-friendly redesign of the client’s 900-screen legacy application; hiring dedicated user experience (UX) staff; and unveiling an impressive demo at industry trade shows to spark word-of-mouth and sales.

Results: Superior user experience delivers over $1 billion in sales

When presented at an industry conference, a new dashboard solution based on projekt202’s design research caused an immediate sensation. Sales demand doubled as customers eagerly anticipated its release to market. Development strategy and priorities reflected the huge interest generated by the prototype’s unveiling.

In addition, persona-specific roadmaps for the legacy application were produced and validated, and mobile tools supporting key workflows across all personas were established and released. A consistent new visual design language was built across all applications and products. Design guidelines, principles and themes were created, along with interactive design and pattern libraries. To reinforce the company’s tech foundation, projekt202 helped grow the client’s UX team to more than 20 employees.

As a result of this collaboration, the workforce management company saw sales skyrocket from $240 million to over $1 billion.

The sales and marketing divisions continue to rely on projekt202-constructed resources. Providing this superior user experience has led to a sustained design and development partnership between the client and projekt202.

Success Story: Investing In a New Standard for Trading

Challenge: Taking stock of the ways customers actually use trading platforms

A leading investment and banking firm wanted to create a new standard for high-end trading by making its existing platform more user-friendly and engaging, allowing customers to become better investors.

Recommendation: Bank on a customized solution to make users feel powerful (especially in front of their spouses)

By observing the ways people researched and chose investments using resources from the client and its competitors, projekt202’s researchers gained several interesting insights. Customers wanted to feel powerful and in control by having the ability to customize the system to suit their needs.

In particular, men wanted the trading platform to look complex, sophisticated and important so they could impress their spouses. This vital emotional factor – which would have been overlooked by standard market research – was discovered through projekt202’s unique, contextually-relevant observations.

Based on these user insights, projekt202 recommended a new infrastructure that supported a customized trading solution to fit customers’ practical and emotional expectations. It needed to balance stability, familiarity, flexibility and reliability; maintain current customers’ loyalty; and add new generational users.

Results: Gaining an outstanding 97% adoption rate

projekt202 worked with the client’s development teams to create multiple concepts for the application’s UI framework. A fresh look emerged to complement the newly-designed tools. Throughout development, projekt202 and the client worked together to integrate controls and tighten layout and interactions.

This partnership created a world-class application that was stable, secure, efficient and fast.

The application was built to:

  • understand the complex work of trading
  • support users by giving them a market-wide perspective
  • guide their decisions in making solid investments

The innovative application achieved a 97% adoption rate in the client’s first quarter. It was also recognized in the trade media and by renowned industry analyst firm Gartner for its outstanding, forward-thinking design, development and adoption.

Welcome to Web Components with Polymer

By Joshua Kemmerling projekt202

By Joshua Kemmerling
projekt202

The web tends to evolve in different ways over time. Right now it seems like most of the new developments in web technologies have to do with new frameworks or new versions of frameworks released almost weekly. This isn’t a problem until these frameworks overshadow upcoming technologies that deserve some recognition. Technologies that will end up changing the way we develop for the web. Let’s say hello to Web Components.

Web Components are a collection of a few technologies. Custom elements, HTML imports, templates, and shadow DOM. The specifications for these technologies are being created by Google and the W3C. That is why we are looking at Polymer. Polymer is created and managed by Google. It is a framework built on top of Web Components and designed to leverage these evolving technologies in modern browsers. Because Web Components are being spec’d to be natively supported by browsers, Polymer mostly consist of polyfills for Web Components.

Custom Elements

Custom elements are simple and just as it sounds. Now you can create your own custom HTML elements, like <projekt-202>, with this new technology. Custom elements need to be registered using Polymer so that they act like natively supported HTML elements. This is really easy and only requires one line of code. The catch is that the custom name has to contain a dash in the name.

HTML Imports

HTML imports are also very simple and gives you the ability to import HTML without needing to write specific JavaScript to call and process the HTML. It uses the link HTML tag with a rel attribute value of import. The best part is that you do not have to register anything using Polymer or run any special functions. It just works! Even the execution order is the exact same as native HTML. Things load in the order they are on the page.

Templates

Templates can get a little complicated or can be really simple if you don’t need your templates to do much. Templates contain the same tags as any other HTML page. But Polymer adds powerful functionality to templates that make you HTML dynamic and makes it feel more like Angular or Knockout.js. A few useful things Polymer has added that developers will find helpful are data binding, event binding, repeaters and even an observe function. Templates can even contain other templates.

To use templates in Polymer, you have to create a <template> HTML tag with an id attribute, add your HTML inside, and a couple line of JavaScript and Polymer does the rest. Details of these features and more information on templates can be found on the Polymer website.

Shadow DOM

The Shadow DOM is a really amazing part of web components and Polymer. The Shadow DOM is essentially a DOM inside of a DOM. This is very powerful because when you add a <style> inside of a DOM, the styles only affect the elements inside of that DOM. The styles do not affect elements in any other DOM. Same things goes for JavaScript. Using Shadow DOM in Polymer is just as easy as creating a template. To use Shadow DOM, wrap your template code with a <dom-module> HTML tag and that’s it. Now any styles you add in the template tag will only affect that template.

How does Polymer fit into the web right now?

As of right now, most UI software is built using some sort of UI framework like React or Angular. These UI frameworks come in all shapes and sizes and usually take on some form of MVC and provide functional programming to UI developers. Polymer would be the “V”, or View, of MVC. This means that there might be some missing functionality, like URL routing capabilities, you might be looking for in a framework for your next project.

Polymer and web components are amazing technologies that are evolving the web in a really great direction. When the technologies are supported by all browsers, UI developers will now need to bring in frameworks like Polymer to have access to these advanced features. The features will be built-in to the browser.

Other web component frameworks

Polymer is a great framework that is bringing web components to all browsers. But it is not the only frameworks that is implementing web components. Other frameworks are, but not limited to:

X-Tag: Small library created and supported by Mozilla.

Bosonic: Another framework that brings web components to browsers. Even to IE9.

Web Components: The WebComponents.org keeps updated information related to web conponents, frameworks, and even has useful polyfills for all parts of web components.

Apps are Key to a Meaningful User-Centric Mobile Strategy

peter eckert.jpg

By Peter Eckert
Originally Published in Mobile Commerce Daily: April 13, 2015

Mobile applications are increasingly becoming a strategic imperative for enterprise and consumer channels.

Last year, the industry saw a significant uptick in companies shifting their attention to mobile app development for the exploding mobile device market that also includes the wearable device space.

The demand for mobile solutions is only expected to grow. In fact, Gartner predicts “that mobile application development projects targeting smartphones and tablets will outnumber native PC projects by a ratio of 4:1 by 2015.”

This reality has caused a near panic for companies struggling to keep pace with the evolving speed of technology. The influence of the app-centric world started only a short time ago, with the release of the iPhone, yet many marketers are already behind the curve.

With the proliferation of mobile technologies, the landscape is only becoming more complex. Most companies lack a clear mobile strategy, which addresses the present and future evolution of the mobile ecosystem, because they do not fully understand their audiences and the execution skill set needed.

Apps not created equal

The cliché, “There’s an app for that,” is all too true, yet not all apps are created equal.

Right now, marketers are trying to figure out how to create and implement the right mobile strategy.

Keeping pace with competitive pressures, companies are spending billions of dollars every year developing and deploying mobile apps that do not meet user needs and aspirations or make an emotional connection, wasting at least 30 percent of the overall spend.

Clearly, mobile devices have changed consumer behavior and expectations.

In a world of 24-hour access to information, shopping and social media, there has been a significant shift in the way that consumers use mobile devices.

Apps have evolved to create a powerful brand and user experience. Good apps enable users to do things rapidly, more efficiently, and fulfill a need that in return creates an emotional bond and affinity toward a brand.

Users quickly become extremely frustrated with poor apps, leading to a loss in sales and an erosion of brand value.

Some common pitfalls to modern-day app deployment include lacking clarity in user needs, not fully understanding the mobile medium, lacking internal development skills and an inability to acquire the tools needed to accomplish the task.

Additionally, many marketers are ignoring the growing global audiences. Mobile access and usage are growing at a fast clip in foreign countries.

Gartner forecasts “by 2017, mobile apps will be downloaded more than 268 billion times, generating revenue of more than $77 billion and making apps one of the most popular computing tools for users across the globe.”

Do not embrace the herd

Staying ahead of the competition and creating engaging user experiences requires a thorough examination of what marketers want to accomplish, whom they are trying to reach and what end users need.

A key strategy for success entails crafting and executing a well-thought-out mobile strategy that includes making a decision to go the native apps route or the Web app route.

The demand is global, and the shift is taking shape in different forms and in different places. Marketers will need to invest wisely with a clear strategic plan.

According to Forrester Research, “In 2015, marketing leaders who have embraced the mobile mind shift will accelerate spending to create an insurmountable gap between themselves — the industry leaders — and the laggards who view mobile as just another channel.”

With so much at stake, companies should not just rush to push out an app and see if it sticks. They should step back and create a solid strategy that will propel the goals of the organization, and address actual user needs, aspirations and emotional connections.

If a mobile solution does not address real user needs, it will not create a lasting impression and the abandonment rate will be high.

Engagement is key.

Providing the right information at the right time in a simple and intuitive way will drive adoption, increase efficiencies, loyalty and brand awareness.

Trends to watch include location-based services, wearable technology and the Internet of Things. Marketers must think about the big picture.

Necessity of a mobile strategy

Getting it right the first time is crucial. There is a very clear step that marketers can take to better define their mobile strategy. It begins with understanding the user.

To understand users is to be able to step into their perspective and interpret what matters to them – to empathize with their challenges, achievements, motivations and desires. This kind of understanding does not come from numbers alone or from counting clicks.

Borrowing from the fields of anthropology and psychology, trained researchers must spend time with users, watching what they do, talking to them, and witnessing their frustrations and their victories firsthand.

From there, these teams will take what they have learned about people and make decisions through the lens of the business goals, selecting opportunities that are most effective.

With design and development teams working alongside the researchers, marketers can ensure that they are building software that meets true user needs.

MARKETERS CANNOT just sit back and wait. Those without an effective mobile strategy are already behind the curve.

There is a pressing need to focus intellectual and financial capital into deploying short and long-term strategies to meet the ever-evolving user demand and changing global mobile appl environment.

Merely deploying apps without the upfront legwork will fail.

Peter Eckert is cofounder and chief experience officer of projekt202, Dallas, TX. Reach him at peter.eckert@projekt202.com.

10,000 Mobile Apps and What We Learned

Image by Link Texting
Image by Link Texting

Image by Link Texting

TL;DR:We downloaded 10,000 mobile apps this year and we’re sharing insights on how we found them, examined them, lessons we learned about building apps, and a heuristic checklist for how not to screw up your own mobile app dev.

—Thanks to Mike Townson

‘Minority Report’-esque Office Chair Makes Computers Body-Controlled

<!-- .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } -->

Creatures with creations and their segregation of joy‘ is the title of a design research on how to embed movement related to expression and emotional release in a daily life. Due to multi functionality of computers and their expansion most people spend their working hours while siting behind a computer. By making an office chair based on the dynamics of the body and linking these body movements to the control of the interface, work can become dynamic and expressive again. An attempt on integrating joy.

Govert Flint designed the Dynamic Chair to facilitate movement in all directions, then worked with programmer Sami Sabik to translate the motions made by the sitter into actions on-screen. “I started to think about how we make chairs that are disconnected from their activity. Working in the office is an activity we sit for. From then on I tried to design a chair based on body movements.”

Although the technology currently only allows for the operation of a cursor, the designer hopes to extend the idea so it works with the full computer interface.

The prototyping of the chair was done in collaboration with Sami Sabik.

—Thanks to Oscar Tellez

Apple on the “Hamburger Menu”

Image by Mike Stern
Image by Mike Stern

Image by Mike Stern

Apple details to developers (and designers) how they feel about the stacked menu and why it’s lazy—no cupboard stays free of clutter. Thinking about content strategy and information architecture will be of much better benefit than a catch-all menu in the corner that people wish not to interact with.

—Thanks to William Yarbrough

Google’s New Mail App

Image by Gigaom
Image by Gigaom

Image by Gigaom

Google is finally taking a stab at reducing Gmail clutter with its brand-new app, Inbox. The app uses context and its considerable smarts to automatically group and tag similar items, serve up location-sensitive reminders, and snooze messages to be answered later. It’s more or less the Google Now of mail.

—Thanks to Chip Wilson and Alan Koda

Aesop’s Fables with Google Fonts

Image by 25x52
Image by 25x52

Image by 25×52

Using hand-picked fonts from the Google Font project with text from Aesop’s fables showcases beautiful type design (that’s free) with great wisdom (that’s public domain). Go Webtype!

—Thanks to William Yarbrough

Yes, We’re Finally Getting Hoverboards

Photo by Hendo
Photo by Hendo

Photo by Hendo

It seems like it might finally be the future—hoverboards are real. Hendo has created a Kickstarter for both their hoverboard and their more stripped-down developer kits, and are well past their initial goal of $250,000. Set to go to market on October 21, 2015—just in time.

—Thanks to Alan Koda