Forem: Spire Digital | Kin + Carta

Gung Ho Predictions About the Future of AI: UX, Psychology, and Advertising

Spire Digital | Kin + Carta — Mon, 26 Aug 2019 14:55:53 +0000

Current State of AI and AdTech

Let’s face it- AI probably already knows you better than most of your friends.

As you surf the web for news and insight, AI is learning what you like to read, how long you like to read for, and it probably even knows if you’re one of those people who reads articles with your mouse cursor.

And with that information that AI learns, companies are turning a profit. AI software like Google Ads and Facebook Ads select advertisements to show you based upon your habits.

And I believe these AI are only going to become more advanced...

To view this entire article, go to the url below: https://www.spiredigital.com/views/the-future-of-ai-ux-psychology-and-advertising/

API Integration with Stripe Webhooks Using Ngrok

Spire Digital | Kin + Carta — Tue, 13 Aug 2019 16:04:51 +0000

DISCLAIMER: ngrok is a paid service. This blog post is not sponsored by or affiliated with ngrok in any way.

What are Stripe Webhooks?
Recently, I worked on a project that involved taking payments using Stripe. Not having worked with Stripe before, I imagined a fairly straightforward process of setting up API calls to Stripe to handle what we needed. Turns out, while that is part of the equation, Stripe also offers a powerful feature called webhooks.

Webhooks are just a fancy name for API calls made from Stripe to your application. So now we have a two-way street of communication: it's not just our app talking to Stripe, Stripe is also talking back. This is just what we needed for our use-case.

We decided to use Stripe's Checkout feature, which sends users to Stripe to input their payment information and then Stripe redirects them back to our app. This allowed us to skip the hassle of integrating the Stripe payment form directly on our site. When the payment is completed, Stripe sends a webhook event to our app so we can process the order. Once that's done, our app returns a 200 response code to Stripe and our user gets redirected to our app's order success page.

Now, this all sounds great, but when we're developing, our local server can't accept requests via the internet. After all, the server only exists on our local machine- it's not on the public internet. So what can we do? We have to find a way to allow our local development server to be accessible via the internet. This is where ngrok comes to the rescue.

Using Ngrok in a Docker Development Environment
Ngrok is a service that provides a public URL through which one can access a local development server. When we run the ngrok software on our development machine, it creates a tunnel that routes incoming requests to that public URL to our local server. In our case, our development environment is set up with Docker, so it required a tiny bit more work to configure. Let's get started.

Download the ngrok client binary
Go to the download page on the ngrok site. We're going to be running ngrok inside a Linux Docker container, so download the Linux binary regardless of your machine's OS. For this example, we're going to put our ngrok-related files in a directory called ngrok in our project.

Configure ngrok
Create a configuration file called ngrok.conf with the following contents:
web_addr: 0.0.0.0:4040
authtoken:
log: stdoutYour ngrok authentication token is available in the ngrok dashboard under the "Auth" section. The web_addr line allows us to open the ngrok web inspector in our browser. The log line allows us to see the ngrok log when we run docker-compose logs ngrok.
Note: ngrok says to use the ngrok authtoken command to set the token. This would work fine if we were running ngrok on our host machine. Since we're running ngrok in a Docker container, we're going to set the token in a configuration file instead.

Configure a new container for ngrok with Docker Compose
We're using Docker Compose to set up our development environment, so adding an additional container for running ngrok is a breeze. Add the following lines to your docker-compose.yml under the services sectionngrok:
image: nginx
volumes:

./ngrok:/code/ command: /code/ngrok http : --subdomain= -config=/code/ngrok.conf links:
php ports:
4040:4040In the above configuration, should be replaced by the name of the Docker Compose service that is running your application server. The --subdomain flag is an option if you have a paid account, which allows you to reserve one or more subdomains that, combined with ngrok.io, create your public URL. Without this option, ngrok will create a random URL for you each time it runs. (ngrok docs) As an example, say my service is called php, the app listens on port 8000, and the subdomain is eriks-app. The line would then look like:command: /code/ngrok http php:8000 --subdomain=eriks-app config=/code/ngrok.conf

Build and run the ngrok container
Use docker-compose up ngrok to build and run this new container. To verify that ngrok is running, go to localhost:4040 in your browser and you should see the ngrok web inspector.Congratulations! ngrok is up and running and now requests to your public URL will be routed to your local app server. You can test by opening the public URL in your browser or using CURL to make an API request to your app.Now that we have ngrok running and our public URL, all we have to do is configure the service that is providing our webhooks (Stripe, in our case) to use the ngrok public URL as the application URL.

Going Forward with Stripe
Using this setup, I was not only able to easily work with Stripe Webhooks, but also, by my simply sharing the new docker-compose.yml and ngrok-related files, the other developers on my team were able to just run docker-compose up and quickly have ngrok ready to go, without needing to download the binary or deal with any configuration themselves. We were then all able to continue with our Stripe integration work using webhooks.

Google’s Flutter the Next Big UI Framework in Mobile App Development?

Spire Digital | Kin + Carta — Mon, 01 Jul 2019 16:42:36 +0000

As of 2018, Google’s brand was valued at over $120 billion. This means that when Google does something, anything, a lot of people pay close attention.

In 2017, Google caught the attention of the world after disrupting the mobile app development industry and introducing a new UI framework called Flutter. The framework allows for the portable development of native apps from a single codebase and has already been used to develop a number of apps.

The most exciting part about Flutter may not the framework itself. Popular frameworks like Bootstrap, Foundation, and Milligram are not lacking in interface and capability. Flutter’s hype most likely comes from one single fact: it’s managed by Google.

GOOGLE, DART, AND MOBILE APPS

Google has a strong background in mobile-app development. They have created a number of successful mobile apps like Google Maps, and Google Wallet. But why would they decide to create Flutter?

Google’s creation of a UI framework should actually come as no surprise to anyone since Google’s Dart language first appeared seven years ago. Dart is the language used in Flutter development, and also the language used in Google Ads and Google Greentea.

Flutter Vs Bootstrap, Foundation, and Other UI Frameworks

Now that you’re more educated about Flutter, it’s time to help you decide whether it is worth trying. What better company to help you than a 20+ year-old software development firm?

To compare these various frameworks we’ll compare client lists of notable applications to be built on these frameworks, to date. Obviously, Flutter is at a disadvantage because it has not been around very long. But Flutter has already been used to build a number of notable apps by companies other than Google.

BOOTSTRAP
Instacart
Grocery delivery app
Vogue
Fashion content/news app

FOUNDATION
Facebook
Social media platform
Ebay
eCommerce app
Netflix
Video streaming platform

FLUTTER
Alibaba
eCommerce app
Tencent (QQ, WeChat, Qzone, and more)
A variety of apps

THE VERDICT ON FLUTTER

In such a short period of time Flutter has accrued a lot of press for a reason. For one, Google uses Dart and Flutter to create their own mobile applications. It’s important to note that mobile app development takes time. There could be more Flutter apps in the works and we just don’t know about them yet.

Regardless, one should note the very strong client list of Foundation. Foundation has a great list of clients of organizations not included in the above client list, like National Geographic, Pixar, and Yahoo.

GOOGLE’S FUTURE AS A MOBILE APP DEVELOPER

It’s clear that Google wants to be relied upon by everyone from Marketers to Developers with the introduction of tools like Google Ads, Google Optimize, and now, Flutter. But what’s next for Google? Will all of their software remain free? For now, all we can do is speculate as to what they will develop next and react to the times. Are acquisitions a possibility? Will they team up with rival Amazon?

99 Questions UX Designers Must Ask

Spire Digital | Kin + Carta — Wed, 05 Jun 2019 17:40:28 +0000

For a UX Designer, it’s easier when you start with answers, instead of questions.

The ability to ask meaningful questions is a fundamental yet often overlooked skill in the UX Designer’s toolkit. I’ve begun to notice a clear correlation between the number of questions a designer asks throughout the process and the quality of the final design output.

It’s much more than creating, it’s about understanding your problem so well that the solution is obvious.

In order to understand the challenge at hand, UX Designers must ask great questions at every stage of the process. I’ve catalogued a robust list (98 to be exact) of questions that I’ve found to be useful for our projects spanning industries, devices, and personas. While by no means comprehensive, it should provide a framework for design thinking through different stages of a project.

Kickoff Meeting

In order to align the delivery team and stakeholders around the vision and project plan, the big questions need to be asked. Avoid jumping to solutions, instead focus on the underlying problems and insights that can give the team foundational knowledge to design from later.

-What is the problem or need we are aiming to solve?
-What does the application need to do?
-What is the business opportunity? (e.g. acquisition, activation, retention, revenue, referral, etc.)
-What are the Key Performance Indicators (KPIs)?
-How else will we define success for this project?
-Who are the users or customers?
-Why is this important to them?
-Why do they care?
-What are the users trying to do?
-What are their pain points?
-How can we reach users through this design process?
-Are there any constraints (technological, business, etc.)?
-How are we better than our competitors?
-Are there any relevant products we can look at?
-Who are the primary decision makers on this project?
-Do brand guidelines exist?
-Does a style guide exist?

Stakeholder Interviews

Further understand the business and market by speaking with individuals who who have a vested interest in the organization and the project. Many of these questions can be asked during kickoffs, but if asked individually they can yield better answers.

-What is your role in this project?
-What is the one thing we must get right to make this project worth undertaking?
-How will you, personally, define success for this project?
-What is the role of this project in achieving that success?
-What are the goals you need to achieve from this project?
-What have you tried that has/hasn’t worked?
-What went wrong in that case?
-Who are the biggest competitors and what worries you about them?
-How do you expect to differentiate this product?
-Where do you want the product to be in the next year, 5 years?
-What keeps you up at night with regards to your users?
-What assumptions do you think you are making about your users?
-What do you know for sure about your users?
-What are the most common problems your users face?
-What worries you about this project?

User Research

Avoid the risk and expense of creating something users don’t want by first understanding their goals and pain points. Answers to these questions can give you the all important “why” behind user behavior. These are best supplemented with observational findings (what users say and do can be different) and analytics if they exist.

The Context

-What does your typical weekday look like?
-Tell me about your role at your company.
-What are your daily responsibilities?
-What are some of the apps and websites you use the most?

The Problem

-How do you currently go about [problem/task]?
-Are you looking for a solution or alternative for [problem/task]?
-Tell me about the last time you tried to [problem/task].
-What are you currently doing to make this [problem/task] easier?
-Have you tried any work-arounds to help you with this?
-Have you tried any other products or tools?
-If so, how did you hear about them?
-What’s the most frustrating part about [problem/task]?
-How often do you encounter/perform [problem/task]?
-How long do you spend on [problem/task]?

User Testing

Validate your assumptions and improve the experience by watching real users interact with your prototype or product. While this is to mostly gather qualitative feedback, there are opportunities to supplement these findings with qualitative answers (e.g. testing against success metrics).

First Impressions

-What is your first reaction to this?
-What is going through your mind as you look at this?
-How does this compare to your expectations?
-What can you do here?
-What is this for?
-Do you have any questions right now?
-Why would someone use this?
-How do you think this is going to help you?
-What is the first thing you would do?

Task Focused

-If you wanted to perform [task], what would you do?
-What would you expect to happen?
-What parts of this were the most/least important for you?
-How could we present the information in a more meaningful way?
-Is there anything you would change/add/remove to make this better for you?
-What was the hardest part about this?
-Was there anything surprising or unexpected?
-On a scale of 1–5, how [adjective] was this?

Summary

-Would you use this today?
-What might keep people from using this?
-What is the most you would be willing to pay for this?
-What, if anything, do you like or dislike?
-If you had a magic wand, what would you change?
-Does this feel like it was designed for you?
-Is anything missing?
-What adjectives would you use to describe this?
-On a scale of 1–5, how likely or unlikely would you be to recommend this to a friend?
-Since this isn’t finished, what would you like to see in the final version?

Design Reviews

Conducted with fellow designers or the larger project team, design reviews can ensure the “whys” behind design decisions align with user and business goals. Ask these questions to to better understand how a designer arrived at their solution. Good design requires intentionality.

Overall

-What part of this design are you looking for feedback on?
-What constraints are you working within?

Interaction Design

-What is the user trying to accomplish on this screen?
-What problem is this solving?
-How could this design fail?
-How did you arrive at this solution?
-What’s the simpler version of this?
-Is there anything we can remove?
-What assumptions are you making?
-Why is that there?
-Why is that shown at all?
-Is that worth displaying by default?
-Why is the screen organized this way?
-Why is this a better solution than [established design pattern]?

Visual Design

-What is your type hierarchy?
-What UI patterns are you using?
-What rules have you defined for these patterns?
-Are there opportunities to be more consistent?
-What are your margin and padding rules?
-What rules have you defined for the color palette?

Stakeholders Reviews

Receive feedback from stakeholders that is clear, relevant, and helpful. They’re probably not experts in giving design feedback, so it’s your responsibility to ask questions that steer the feedback towards project goals and areas they are subject matter experts in.

-Does this solve your users’ needs?
-Does this effectively address [project goal(s)]?
-Does this meet all functional requirements?
-Does this effectively reflect the brand?
-Why is [design request] important?

Parting thoughts

Follow questions with a healthy dose of “why?” or “tell me more about that”.
Learn what you don’t know.
Think of a product you love. Then think of the great questions the design team had to ask to arrive at that solution.