Development

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.

Success Story: Helping 40,000 Reps Get a Grip on a Powerful New Mobile App

Challenge: Obsolete equipment and time-draining inventory steps need to be shelved

A leading retail services company was recognized industry-wide for its legacy of outstanding work. Internally, however, it was building a legacy of clunky equipment, outdated processes and low employee retention.

To hone its competitive edge, the organization needed to give its salespeople a more efficient, productive and accurate way to do their jobs. Each of its in-store retail service representatives was saddled with multiple, aging resources – an obsolete handheld scanner that required evening dock and sync, a digital camera for sending photos to the company for documentation, and bulky binders of UPC pages to scan at grocery stores on their routes. Printing for the code pages alone cost the company thousands of dollars each month.

Inadequate training and lack of enterprise support services also contributed to an in-the-field staff turnover rate of over 100 percent.

Recommendation: Design a convenient, powerful mobile app

A consideration to allow reps to use their own phones or tablets helped projekt202 build an application for use across multiple devices with multi-platform capabilities.

The work involved was three-fold: (1) design and implement a new mobile application for the field force, (2) architect and build new enterprise services to support the mobile app and other systems, and (3) transform the development organization to an Agile one.

projekt202 did contextual inquiry and built journey maps to understand the true needs of the reps and of the business, including device form factor and connectivity requirements.

projekt202’s team of designers, developers and architects used data-rich observations of the reps’ training programs and work environments to drive the application’s design. Features were added to improve the ways in which reps planned their routes, received support, documented work and reported to the company:

  • Connected/occasionally connected modes, including request/response caching and queuing
  • Near real-time work assignment and results reporting, including camera, sensors and GPS data
  • Built-in, in-context training and learning aids, including instructional protocols for performing work

Results: Reduced overhead and increased efficiencies for over 40,000 employees

projekt202's solution completely eliminated employee reimbursements for wasteful printing costs and administrative time spent transferring data from paper in the old interface. This resulted in a 13% reduction in overhead costs.

The creation of a new mobile application -- along with a suite of enterprise services that supported it -- formed the foundation of new app development initiatives across the client company. As a result, 40,000 field reps across North America were better able to plan daily tasks and map routes with the help of the internal GPS feature. Tutorials helped reps complete tasks more efficiently. A request queue also let them access information on- and offline, and report documentation – including photos – directly to the company.

During the three-year collaboration, projekt202 and the client's team built processes in the back-end with a suite of enterprise services, such as true REST services, including Hypermedia/HAEOAS, content negotiation, caching and Domain Application Protocols; commodity hardware scaling; and ESB for content aggregation.

As part of projekt202’s end-to-end application development, the client’s employees were trained and empowered as the stream of work transitioned to the company’s team. In turn, the company retained more employees, and streamlined its internal processes for standardization and quality control.

Results of projekt202's work were:

  • Labor costs were two orders of magnitude lower
  • First-to-market with a new service offering, which remained without competition for over two years
  • Reduced training and onboarding costs
  • Creation of multiple Agile teams
  • Drastically reduced printing costs
  • Availability of near real-time results and analytics, as well as the ability to assign work to reps already in the field
  • More frequent releases and better incorporation of validation/feedback into releases

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

2016: The User Interface Revolution Underway

projekt202's Chief Experience Officer and Co-Founder Peter Eckert is regarded as one of the leading UI design visionaries. The following article illustrates why. Five years ago in UX Magazine, Peter shared his insights on the importance of meaningful interface design and usability, looking ahead to the state of technology in 2016. Looking back now, it's significant to see how spot-on Peter's forecasts were.

Following is Peter's original article, as published Feb. 24, 2011 in UX Magazine:

2016: The User Interface Revolution Underway

Looking at the next five years, the role of interface design will only increase in importance as companies compete to win market share worldwide. Ease of use is essential to winning hearts, minds, and customers. With consumer product companies in heated competition, I anticipate a surge of redesign and new design in the near term. These designs will focus on usability, which means we are likely to see breakthrough products over the next several years.

Yet these new interfaces are not going to be uniform; devices and applications will not possess common protocols. For users, each interaction will have to be learned, so despite the improved usability of products, individuals will find themselves learning the quirks and standards of more and more technologies just to get the functionality they seek.

Converging Technologies, Diverging Experiences and Standards

For global companies, the next five years is a time to put their best solutions forward and integrate the UIs and capabilities of their own product suites. As companies work to independently to improve their products within the context of new technical and usability advances, we will see more diversity and incongruence in design overall. In the next several years, differentiation and unique ease of use will matter more than a common standard.

Technologies continue to combine and converge, but much of this convergence happens only within companies. Technologies and products developed by different companies will not truly interact across platforms any better than they do so today, or at least not in the near term. For every new process and device, there continues to be a lack of common standards, which requires that people learn device- and product-specific commands and functions. This problem is still acceptable to most people because that lack of integration and the individuality of interfaces has long been the norm.

Caught up in the daily flow of our lives, we hardly recognize we are in the midst of a rapid evolution in how we leverage technology. We barely acknowledge that we are slowly replacing ordinary and extraordinary functions alike with technology, including purchasing goods via phones, receiving on-demand GPS-based directions, and eliminating hard-wired phones altogether. And it is certain more innovation is just around the corner.

Today and in the next five years, those UIs will remain separate and disconnected from each other. But many decades in the future, we can expect to see shared protocols and standards that enable users to transition seamlessly between devices and appliances, which transmit information to one another to a far greater extent than we see today.

In the meantime, all of our incremental progress toward more usable applications is exciting for the UX industry as a whole. UI designers can rest assured that over the next five years they will not be out of work. In fact, as someone working in the field for nearly 20 years, my concern is there are not enough experts in UI design to meet the avalanche of design and redesign that needs to be completed. The process for designing UIs will continue to come from research related to behavior, and from evaluation of how information hierarchies and protocols can be more intuitively accessed.

Worldwide Vision

All this opportunity to design better experiences is not exclusive to the U.S. and Western Europe. In fact, much work over the next five years needs to be done to create UIs that are more in tune with the rising middle classes of China and India, each surging with unique demographics of potential technology users.

Companies will increasingly look to market consumer technologies to pockets of fast-growing populations that have so far had little exposure to technology as part of their daily lives. For these people, it will be critical that the solutions be highly intuitive to ease the abruptness of the transition.

In making these new technology products, leading consumer technology companies will be delving into new areas of UI design and need to think through language, cultural, and ethnographic particularities to create effective solutions. It will also be important to recognize how specific cultures truly interact with their social environment and technologies within the context of those environments.

Racing to market with products with long feature lists is not the only answer; in some cases, it may prove to be the wrong answer. The technologies must offer users an intuitive and tailored UI to give users full enjoyment of and access to product features within the context of their cultural experience. This is a new challenge that is rapidly unfolding as more solutions are offered to emerging populations.

A Seamless Future

New, improved UIs are part of a transformation that is happening worldwide in technology. As we have seen with Apple and others, the new measuring stick of quality and key to critical acclaim is not just about whiz-bang features, but also about the presentation of the technology and accessibility of features through sound design.

Over the next five years, UX designers will be increasingly called upon to create solutions that join the power of new technology with good usability. Their skills and vision will be put to good use as companies awaken to the new stakes related to intuitive design and strive to roll out a host of products that will be more engaging than ever before.

Conclusion

Consumer and business users alike will experience remarkable forward steps in the evolution of UI design, but they will also grapple with the lack of convergence and common protocols. It will likely be many more years before any common standards begin to emerge.

For emerging populations around the world, leading consumer companies will seek to capture market share. We advise these companies to go beyond the language barrier and truly evaluate the culture they are targeting as they have the opportunity to serve these customers through powerful design.

It is an exciting prospect to think of the millions or billions of more people who will be able to access technology, communicate globally and garner more information than they have before—all through intuitive, intelligently designed interfaces.

UX Predictions for 2016

By Michael Blakesley
projekt202

We see these predictions taking place in product development this year, though it's not likely that these will be widespread in the hands of the general public. These predictions are in anticipation of what product and service companies will focus on developing in 2016.

Digital Tools to Manage Individual Medical Care

In the category of wearables, smart watches and health monitor bracelets became more popular in 2015. However, only a small percentage of the population is really buying them.[1] Beyond the dedicated exercise enthusiast, wearables still seem a novelty for most people. Indications point to the market for health and fitness wearables sticking around and growing.[2]

Improvements – such as accurate heart rate tracking without a chest band – are also helping to make sensors smaller and more affordable. For example, the new Microsoft Band 2 has 11 sensors, making it potentially more useful beyond fitness training.[3] Advancements like these make it much more plausible for innovations like the sugarBEAT system[4], used for monitoring diabetes, to find a home.

While these products provide tools to empower people with the ability to monitor some of their wellness diagnostics, it is still up to the users to manage the holistic range of their health. At projekt202, we’re working with clients to explore how the real-time data from these connected devices provide more opportunities for specialists and health care providers to give more accurate treatment and holistic care.

With the general trend toward care based on health outcomes, we'll see more wellness coaches emerge among the doctor-patient relationship. These coaches will provide the timely intervention to help interpret this real-time data coming from wearables and provide tailored advice. It's likely we'll start to see some systems and corporate health programs mandate these wearables to maintain adherence to wellness in this circle of care.

An interesting development already taking place in the midst of these connected health devices is the integration with big data sources served into a meaningful interface. By interpreting relevant data, patients can make informed decisions related to trending data in their environments.

For instance, people with weakened immune systems could be directed away from communicable-disease hot zones shown on a map in their vicinity. An exciting example for people with asthma and chronic respiratory issues is the system developed by Propeller Health[5].

In combination with the data captured by Bluetooth-enabled inhalers, pollution and allergy data is layered on a local map, along with the frequency of inhaler use in the area. This powerful data can show real-time environmental information that can prevent adverse events, just as simply as someone using Google Maps to navigate the fastest route around traffic jams.

Curved and Molded High-Definition Touch Interfaces

Looking around the TV department at Best Buy can be an exciting and overwhelming experience these days. The levels of definition available in large Ultra HD 4K displays are so impressive that it’s almost impossible to compare the difference in quality from one to the next.

To stand out in the digital display market, companies like Samsung are even going a step further by promoting their curved display technology. These innovations are becoming easier for consumers to get their hands on as manufacturing processes become more efficient[6]. Flexible displays[7] have been in development for a while, but just now are becoming more popular with consumers.

On a much smaller scale than TVs and desktop computer displays, the Samsung Edge phones continue to upgrade their trademark curved, wraparound display. The Samsung Galaxy 6S Edge[8] sports a touch-screen UI offering extended controls and operation out of the way of the primary UI surface. The rumored Galaxy 7 Edge wraps even further around the side of the device, working to virtually eliminate its visible bezel.

The prediction for 2016 is that more product designers and manufacturers will work in partnership with UI and UX Designers to develop meaningful interactions with touchscreens that have more form factors, including more fluid or organic shapes. These new display shapes open a whole new range of capability for gestures that are more ergonomic and natural.

One of the most interesting opportunities is in the design of automotive dashboards. Over the past three to four years, car manufacturers have rolled out some concept cars that show innovative uses of touch interface and sleek displays. A few quick examples that lead the pack are the Nissan Ellure[9], the Mitsubishi EMIRAI[10] and the Lexus LF-CC[11].

These examples demonstrate curved shapes and styling that are more conformed to the ergonomics and aesthetics of the vehicle's dashboard design. With the advances in flexible display manufacturing, developing these types of interfaces at scale seems much more possible now.

The company that appears most poised to make this leap is Tesla. Currently, the interface is a disappointing flat-panel display placed in the center console that feels like a design afterthought. There is so much potential to improve this design where it is integrated into the curves of the dash, allowing for an enlarged touch-display surface with more ergonomically-placed locations for controls.

Additionally, larger gestures along sweeping surfaces could allow for development of muscle memory to perform specific interactions in locations that don't require the finger-point precision of the current touch interface. Tesla’s market is already in a high-luxury car price range, so, some might ask, what's a few thousand more to have a sleek dashboard that doesn't look like a taped-on iPad?

Anticipatory Design with Assumptive Workflows 

Anticipatory design has been discussed as an emerging trend and is expected to be the driving force behind quality user experiences.[12] This approach to designing software is not really all that new.[13] The difference now is that we have a common name for this technique.

I see a nuance to this concept that will emerge as this trend becomes more established this year. Rather than just anticipating user needs, assumptive workflows take action and then seek confirmation from the user that the action was appropriate. We might get messages like this from our devices: "I found *this* is happening, so I am doing *this* for you, OK?"

In consumer products and services, these workflows can help eliminate a lot of the small choices and decisions we need to make. I predict that our devices will get better at assuming what our goals and needs are by leveraging other data sources to inform decisions.

For example, the Nest thermostat learns and behaves only based on the behaviors a user-owner trains it on. In an assumptive workflow, the Nest services would know when the energy company raises rates during peak energy-load times on hot days, therefore making the assumption and sending a message: “Since you’re not home, I raised the temperature at home by 3 degrees to save you $10 today. Are you OK with this?”

In business software where human accountability is still required, the anticipatory design approach needs to be kept in check. Based on our years of designing business software, we believe companies still need a way for people to be responsible for making – or at least approving – thoughtful decisions. We see examples of anticipatory design in business software with tailored dashboards and alerts, notifying the user of what should be done. These design approaches are applying with the goal of making people more efficient and effective at their jobs. In an Assumptive Workflow Design, the system has already done most of the work and only seeks user intervention for final approval.

In Closing

At projekt202, we’re always putting the user first. With trends like these, it’s more important than ever to truly understand user behavior through direct observation, developing honest empathy for users and awareness for their contexts. We can expect to see corporate spending on user research to continue to rise throughout 2016 and beyond.

[1]http://civicscience.com/ourinsights/insightreports/insight-report-popularity-and-potential-of-wearable-fitness-trackers/

[2]http://www.statista.com/topics/1556/wearable-technology/

[3]http://www.microsoftstore.com/store/msusa/en_US/pdp/Microsoft-Band-2/productID.324438600

[4]http://nemauramedical.com/index.php/diabetes-and-cgm/cgm-smart-watch

[5]http://propellerhealth.com/solutions/

[6]http://www.cnet.com/news/samsung-slashes-price-of-curved-oled-tv-to-8999/

[7]https://en.wikipedia.org/wiki/Flexible_display

[8]http://www.samsung.com/us/explore/galaxy-s-6-features-and-specs/

[9]http://www.nissanusa.com/future-and-concept-vehicles/ellure.html

[10]http://techcrunch.com/2011/12/12/emirai-mitsubishi/

[11]http://www.engadget.com/2012/09/27/lexus-lf-cc-concept-shows-the-future-of-touchscreen-interiors/

[12]http://www.fastcodesign.com/3045039/the-next-big-thing-in-design-fewer-choices

[13]http://www.smashingmagazine.com/2015/09/anticipatory-design/

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.

What is Contextual Design and Development for the Web?

What is contextual design and development for the web and why should I care? I hope to answer those questions here.

By Joshua Kemmerling projekt202

By Joshua Kemmerling
projekt202

I recently attended Future Insights Live 2015 and was able to see a lot of amazing talks. A talk on this topic was given by Matthew Carver. And during this talk, gears started turning in my head. I automatically had questions and thoughts related to development, design, and research. Contextual design and development isn’t anything new but I don’t think it gets used that often on the web.

Examples

Let’s start with a basic example of what I am referring to here and then we can talk options and implementation. For this example you are a restaurant, and on the homepage of your website you want to show the users specials that are happening at the moment and you want them to be relative to the time of day. The time of day can be our context. If it is before 1pm, you can show the visitor information about your brunch menu. If it is between 1pm and 5pm, the visitor will see information on happy hour and if it is after 5 pm, you can show the visitor drink specials. All of the information on the homepage would be relative to the time of day the potential customer visits the site. I know this was a simple example, but it gives you an idea of what I am talking about.

Contexts

There are four main contexts that we would use on the web: user, environment, task, and technology. These are self-explanatory but let’s go through them anyway. The user context could be the currently logged in user or the user you are currently searching. The environment context could be a desktop browser or a mobile app. The task context could be as simple as a sign-up form or clicking on a category link. And the technology context could refer to native app or web app.

So let’s talk about some of the ways that we could use context to present information to users. One of the simplest and most used ways to use context in the web is whether a user is logged in or logged out. Github automatically changes the homepage view if a user is logged in to present their repos to them. A little more advanced example could be that you track a user’s clicks and find that this particular user clicks the men’s link in the menu a lot. You could start presenting information related to men’s products on the homepage when revisit your online store. A more advanced example is that you could detect how much light is around the user and if it is dark out, then present information in a dark theme so it doesn’t seem so bright, and vice versa if it is bright out. Mobile phones already do this in their OS but we can detect light on the web as well.

Sensors

We refer to the different ways to detect information or events as sensors. And there are almost an infinite amount of sensors that can be used. If you think about the different actions or tasks just in a desktop browser, there are even more in a mobile browser. We have access to things like the accelerometer, geolocation, size of screen or browser (media queries), and even information about a device’s battery.

Research

So when and how do you use these? That is where research and design come into play. We need to start by thinking about what type of site or app you are building and how your users are using the solution. We have to figure out your overall goals and the problems you are trying to solve. All of these requirements get worked out and a solution is created.

How do these different sensors get tracked and triggered? This depends on the environment, the technology, the overall needs, and the proposed solution. And if you dig around different technology related blogs and sites, you can run into things that you didn’t think existed. Combing through the Web API Interfaces on Mozilla’s site, it’s easy to find things that you didn’t realize you could do on the web. Maybe it is something that you will never use and maybe it is a solution to a problem you have been trying to solve for a while. Dig around and see what you can find.

Future

How do we use this for human context? Can we suggest the best restaurants to visit based on outside temperature? Can we remind users to drink water by knowing how far and fast they have run? It is amazing to think what we could do using context on the web. But this is just the beginning. There will be more articles to come related to this vast topic.

Is React JS Good for the Web … Right Now?

By Joshua Kemmerling
projekt202

New technologies for web developers are introduced all the time. Especially in the world JavaScript, it seems like there is something new every week, although recently very few things have been as popular as React. For anyone who doesn’t keep up with web technologies, ever since React was publicly released, there has been a large number of plugins, blog posts and other projects created using the framework, such as (or most famously…) example. Plus, at the time of this writing, React has over 21,000 stars and over 2,900 forks on the Github repo. But just because a new technology is popular doesn’t always mean it is the right choice for client projects.

To determine whether React is a good choice for projekt202, I needed a baseline to compare it against. That baseline is AngularJS. AngularJS is one of the most popular JavaScript frameworks out right now and we have grown fond of it here at projekt202 and have leveraged it to successfully deliver numerous projects for our clients. It packs a lot of features into a small space and allows us to make a high performance front-end app without needing to bring in extra files or frameworks.

Before we go too far, I want to point out one thing about React. We usually build front-end apps in following the MVC (Model-View-Controller) pattern. Most people use React as the V of MVC but I feel like it can be used as the VC of MVC. AngularJS is a MV* framework so it has functionality for all parts of a MVC app. React is missing the Model (M) of MVC, though a developer should be able to create their own solution or leverage an existing framework like Cortex to give them the Modeling functionality they need.

Routing – This is the very first thing that jumps out at me when I was looking at how useful React could be. React does not come with supported routing functionality out of the box. AngularJS on the other hand, comes with built-in routing that is supported by the AngularJS team. This isn’t that huge of a problem because a router is something that could be easily created or we could use a pre-created option like Director that already exist and works well.

AJAX – This was the second thing that initially jumped out at me when I started reading articles about React. There is not a built-in AJAX library of any kind. This isn’t totally a deal breaker since most front-end developers are familiar with jQuery , which offers robust AJAX support. But without built-in AJAX functionality, this also leaves the developer to choose how he/she wants to include AJAX features. AngularJS utilizes jQuery Lite so it has AJAX functionality built in requiring no additional effort to get connected to services.

Templating – Templating is a hard thing to compare because most developers have a preference when it comes to HTML templating so I am not going to go too deep into templating in this article. The reason I bring templating up is because AngularJS provides “filters” which extend the functionality of their templating engine to allow the developer to format the value in the template any way they would like. React takes a different approach to templating that is best understood by getting hands on with it. React templating will be a future article.

Size – We look at size all the time in front-end development from a performance standpoint because we don’t want it to take too long for files to load up when it isn’t necessary. AngularJS minified is downloaded at 126 Kb and React minified is downloaded at 121 Kb. Not a huge difference, but with a lack of features in React we tend to lean towards AngularJS as our framework of choice.

That’s it for now. There are some other features that differentiate the 2 frameworks such as two-way binding, localization, and dependency management that allow developers to build powerful, dynamic web apps. But those are topics for the next post about React. In my opinion, React has made some big strides with their approach to front-end development but I don’t think it is fully ready for us to use on client projects as of right now. We need features like routing and AJAX in a small package to be able to build robust applications. And because we hand the code base off to the client, we need well-documented frameworks that have a lot of support from the community. Neither of which we get from React. I do expect it to get better and more useful in the future. To read more about React and to get to know it better, visit their website and follow the React blog.

projekt202 Takes a User-Centric Approach to Software Design. What a Concept.

By: Ken Hess

Originally Published in ZDNet: May 11, 2015


Summary: Before any projekt202 developers tap in a single line of code on your new application, the design staff spends time with your users to find out how they work, what their needs are, and what makes them efficient. Engaging users in the design phase. What a concept.

Although engaging users during the design phase of an application should be the normal way to do things, it isn’t. Not by any current standards, at least. The philosophy at projekt202 is different than normal. The developers and the design team for an application extensively engage, interview, and observe users before entering a single line of code. CEO David Lancashire and I spoke about projekt202’s unique application design and build philosophy is the exact opposite of “standard” application development. I found it refreshing to know that his teams take user feedback, work habits, needs, and desires into the core of the application design process. What a new and exciting concept it is when a programmer asks a user how to do something. It’s called “Experience-Driven Software Development” and it’s the modern approach to user-centric design.

Maybe this is the new normal for building applications.

Unfortunately, application development usually takes the following path:

  • Initial client meeting, which might or might not include a developer.
  • Requirements gathering for the application covering the type of app, number of users, platform, etc.
  • Developers go into “silent” mode while programming the alpha release of the product.
  • Periodic update meetings to check progress.
  • Alpha release; much fanfare.
  • Feedback on alpha release.
  • Periodic update meetings to check progress.
  • Beta release; much fanfare.
  • Feedback on beta release.
  • Periodic update meetings to check progress.
  • Excuses as to why the product is delayed.
  • Missed milestones.
  • Periodic update meetings to check progress.
  • Conversion of old data into the new application format.
  • Excuses as to why 60 percent of the data will be lost or munged.
  • 1.0 release, much long-awaited fanfare.
  • User complaints, bug reports, application crashes, data loss.
  • Data re-entry.
  • Long overdue patches and updates.
  • Lather. Rinse. Repeat those last three steps.

I’m sorry that this list was painful to read through. It was painful to write. It’s equally painful to live through when having an application built. I didn’t include the pain of dealing with your typical vendor’s offshore (cheap labor) programmers. That’s a whole other painful tale that includes time zone problems, language problems, cultural differences, and misunderstandings of business requirements. There’s no greater joy than to spend an hour (or more) on a phone call and to feel that you’ve accomplished nothing from it.

The end result is that you never get the application that you’ve paid for and your users never get an application that truly works for them. In all, you’ve wasted how much time, labor hours, money on something that really doesn’t work for you.

There is a better way. The projekt202 way.

“The perspective and processes projekt202 is focusing on and perfecting will, over time, become standard operating procedure for any application development project.”– Gartner

Revealing Reality - Fact gathering involves understanding the constraints of the project and then engaging in an observational process to develop a full understanding of the user. The company seeks to fundamentally answer the following question: “What should we be building?”

Focused Innovation - With data points extracted from user observations and other evidence sources, the company puts insights into action and creates a grounded vision for the product and design principles for building it.

Building & Evolving - Cross-functional teams are used to build the software. Scrum-like processes are engaged to plan and execute on the discoveries made in earlier phases.

As you can clearly see, projekt202’s approach is different than the accepted practice of creating applications on the fly with release/trial/error/reprogram/release, etc. The accepted model doesn’t work. It doesn’t work for users. It doesn’t work for companies that pay for the development and it doesn’t work for the application programmers. Missed deadlines, poor application design, low user acceptance, and high maintenance costs are but a few of the reasons why the accepted model doesn’t work.

The user-centric model that projekt202 has developed over the years works. It’s a detour from the normal way of doing things. When you see the projekt202 team working, you might not understand the method behind the madness, but your users will and that’s really what you’re paying for: user acceptance. To empower users in the design and development phases of application development ensures buy-in from the user community because they have had a voice and a hand in creation.

It’s not a culture of complaints; it’s a culture of progress toward a goal–a common goal among designers, developers, and users. It’s a brilliant application development method and one that should be far more common than it is.

Another unique projekt202 feature is that they’d like not only to talk to you, but also to see you. That’s why the team freely publishes their addresses and phone numbers in Addison, Texas; in Austin, Texas; and in Seattle, Washington.