Home Blog

Improving Your UI/UX Design – Applying White Space

0
Photo by You X Ventures on Unsplash.

Good UI design is the thoughtful application of whitespace at all scales of an interface, from component to page, micro to macro. When whitespace is used well, the result is an interface that is harmonious, legible, and, above all, effective and easy to use.

1 / Follow the Law of Proximity.

The amount of whitespace between elements in the UI indicate how the elements relate to one another. The Law of Proximity suggests that:

  1. Related elements should be spaced closer together. Conversely, unrelated elements should be spaced further apart.
  2. Elements of the same “type” should be spaced evenly apart.

Follow these basic rules to help users readily organize and perceive logical groupings in your UI.

Image for post
Whitespace works hand in hand with the size, weight, and color of the text to convey the hierarchy of elements in an interface.

2 / Start from a baseline of generous whitespace.

Let your design breathe. A reliable way to improve the usability of an interface is to ensure that there is a generous amount of whitespace between all its elements.

Image for post
The form controls here are spaced too closely together.
Image for post
The form controls here are appropriately spaced apart, and more comfortable on the eye.

There are exceptions, of course (see the last tip below), but for most UIs, having a generous amount of whitespace is usually better than having too little.

3 / Use whitespace to focus attention on particular design elements.

Having less information and fewer elements on the page can help bring clarity and focus, and draw attention to the information and elements that are on the page.

Whitespace can also be an effective way to add emphasis to text. It can be used in combination with — and even as an alternative to — bumping up the text size, or changing the color, case, or weight of the text.

̇

̇

̇

This sentence, surrounded by whitespace, is a case in point.

̣

̣

̣

Making an element bigger or brighter isn’t the only way to draw attention to it. Consider that when everything is bigger and brighter and important, nothing actually is.

4 / Use the same method for measuring space in both design and implementation.

The space between adjacent text elements can be measured in one of two ways.

Between adjacent “bounding boxes”

This method is how most UI rendering engines (eg. the Document Object Model on a webpage) measure space. However, this method is not particularly precise because there is excess space that is “unaccounted” for at the top and bottom of each bounding box.

Image for post
Measuring space between adjacent “bounding boxes”.

Between adjacent cap heights

This method is more precise, but could complicate implementation.

Image for post
Measuring space between adjacent cap heights.

Both methods are reasonable, but have different trade-offs. What is important here is that the same method for measuring space is used in both design and implementation. This is to ensure that the design can be accurately translated into code.

5 / Use a spacing system.

A spacing system specifies the set of possible spacing values to be used in a design. Using a spacing system can help bring about a sense of consistency and harmony to a UI.

Image for post
You only really need a handful of values in a spacing system. Here, four different spacing values are used, namely 12, 16, 32, and 56.

A spacing system is to whitespace what a color palette is to color. Just like a color palette, a spacing system forces you to make UI design decisions from a constrained set of options. With a spacing system in place, you need only consider the handful of spacing values from the system during the UI design process. This makes design iteration faster and more systematic.

6 / Avoid using spacing values that are visually too similar.

When spacing values are mathematically different but visually too similar, the way that users perceive logical groupings in the UI could become ambiguous. Contrast matters. If your intent is for two spacing values to be different, then make it readily obvious that they are in fact different.

Image for post
The space above and below each “actions row” are too similar, and it is unclear which video each action row is supposed to be associated with.
Image for post
Having sufficient space below each “actions row” helps to clarify the relationship between each video and its associated actions.

Consider having a wider “spread” of values in your spacing system, with a visually obvious difference between adjacent spacing values.

Image for post
This is a non-linear spacing system with a progressively larger increment going from one spacing value to the next.

7 / Reduce the line-height (ie. leading) as text size increases.

Increasing the text size while keeping the same proportional line-height will result in there being too much whitespace between each line of text. Relative to the text size, the proportional line-height of headings should generally be less than the line-height of the body copy.

Image for post
The two lines of text are too far apart from one another.
Image for post
When a smaller line-height is used, the two lines of text are perceived as a single visual group.

8 / In an information-dense UI, rely on other techniques besides whitespace to convey how elements in the UI relate to one another.

For example:

  • Adding a subtle fill or border around a group of related elements.
  • Using a line to separate adjacent elements that are closely-packed vertically. Or, using an interpunct character (“·”) to separate adjacent elements that are arranged horizontally.
  • Changing the size, case, weight, or color of the text as a way to associate or differentiate UI elements.
Image for post
Increasing information density through reducing whitespace, reducing the text size, and adding a subtle horizontal line to ensure that adjacent rows are perceived as being visually distinct from each another.

Making an interface more information dense could help to make it more efficient to use. Remember that an interface that is information dense does not necessarily need to feel cluttered or overwhelming.

An effective way to learn about whitespace — and, indeed, UI design in general — is to create a “master copy”: pick one or more screens from any app or website with an interface that you admire, and recreate it in its entirety, from scratch. You will gain an insight into the many small design decisions that were made, discover interesting patterns, and see how the above tips about whitespace actually play out in well-crafted UIs.

There are reasons for why an interface “looks right”. Through experience and practice, you can hone your visual sense and intuition about how to apply whitespace in your designs. Your users will thank you for it.

This post was first posted here.

How to Write a Web Design Case Study that Lands New Clients

0
Photo by Annie Spratt on Unsplash.

One of the toughest challenges designers face when pitching prospective clients is winning over their trust and confidence. If your prospective clients haven’t worked with you in the past,  they’ll likely have hesitations about handing over their hard-earned cash to a stranger. To win their confidence (and close the deal!), you’ll need to take some extra steps to reassure them that your design work will not only be a success aesthetically, but that it will also help them achieve their business objectives.

One of the greatest tools in a designer’s arsenal for overcoming this unique obstacle is the case study.

Case studies are narratives that reveal what you are capable of as a designer. They allow you to walk prospective clients through the contextual details of your existing project work, including your design briefprototyping, and final product, so you can outline your creative strategy from conception to completion (learn more about rapid prototyping, and take a look at some great prototyping tools to help with this process). They are the perfect tool for boosting the quality of proposals, building your web design portfolio, and adding credibility to your portfolio website

The best case studies move beyond intuition-based explanations and document the rationale behind the design, UX, and visual decisions. They offer a more humanized perspective into the design process that, ultimately, makes a business case for your work. This leaves you in a better position to prove your value (and price) to even the most skeptical client. 

First things first: Plan for your case study ahead of time

Before we take a deep dive into the kind of content that makes a great case study, I want to stress the importance of creating a case study for each project you work on.

While this may seem like a lot of extra work, you can facilitate the writing process by taking the time to proactively think about how you will document your projects and their successes before you begin working. That way, you’re guaranteed to end the project with strong documentation that reflects your thinking, iterations, and key results as accurately as possible.

With that out of the way, let’s take a look at the five core elements that should be included in any case study.

The 5 core elements of a web design case study

1. The Overview

Think of your Overview section as the executive summary of your case study. It’s the Cole’s Notes version of the document, and allows your prospects to quickly understand the highlights of your past work without reading the entire thing. This section should include the core takeaways from all other sections including the main problem, an overview of the solution, and key results.

While the Overview will be your least detailed part of the case study, it is probably your most important. Only the most meticulous clients will take the time to read through your entire case study; the majority of them will just quickly skim through in order get the gist. Because of this, drafting a complete and well-articulated overview should be your top priority.

design case study: the overview

An overview section can be as simple as this example by Work & Co.

Pro Tip: Write your Overview section once the rest of your case study is finished. That way you can simply scan over the main points of each section and summarize them into a one or two paragraph synopsis.

2. The Context and Challenge

The second section of your case study — commonly referred to as the Context and the Challenge —  is designed to provide your prospective client with a detailed description of the context that led to the creation of the project. If it’s well-written, the reader will leave with a solid understanding of the environmental factors and problems that you were hired to solve as a designer.

This section can be distilled into three main elements:

1. Project background and description — The contextual information for the project including timelines, budgetary constraints, and the overarching purpose of the job.

2. The problem — The “why?” and the focal point for the project. Your case study needs to clearly explain the problem that led to the onset of the project. For example, if you were working on an ecommerce project then your problem could be something similar to:

“Interest for company X’s core product was growing internationally at an unprecedented scale. This led to severe logistical and distribution problems that could not be fixed by physical retail solutions alone.”

3. Project goals and objectives — Every website you work on should have tangible goals and objectives associated with the project’s problem. Are you trying to drive more traffic to the site overall? Optimize product pages for lower bounce rate or higher conversions? Reduce cart abandon rates? No matter what your objectives are, try your best to include any quantifiable metrics that were known at the onset of the project.

Design case study: the challenge

A simple, yet descriptive, “challenge” in Super Top Secret’s case study

Pro Tip: The core elements of The Challenge are often presented to you in the project Request for Proposal or creative brief. If you are working on a more personal level with your client, however, try capturing this information in conversation. This will become the basis of your brief and, eventually, your case study too.

3. The Process and Insight

The purpose of this section is to elaborate on your design process, creative concept, and insight that led to your design decisions. It’s also an opportunity for you to walk your prospective client through the research, workflow, and iterations of your design work.

When writing content for this section, you want to illustrate how you got from The Challenge to The Solution. Make sure the flow of information is logical and that it culminates with a core insight about your client’s audience, business, or industry. These insights can stem from your client’s unique selling properties and key differentiators, or from their audience’s behavioural and consumption habits.

To ensure your reader conclusively arrives at these insights as well, you’re going to need to thoroughly document your research. Include any details about A/B tests, user research interviews, and key brainstorming takeaways that led you to uncover those crucial pieces of information.

design case study: the process

A simple version of a “process section” from nurun’s case study

Pro Tip: Finding a core truth about your client’s audience can be one of the toughest challenges as a designer. If you’re lucky, your client might already have substantial research about their customers. Use their knowledge and this research to help you craft an insight. Otherwise, try employing tactics like A/B testing and user research to help guide your design decisions.

4. The Solution

The Solution is where you get to show off your skill and style as a designer. It’s your chance to feature any and all samples of your work — from videos, landing pages, custom integrations, and anything else you created for the project.

To really get the most from this section, be sure to include written descriptions about your design work. Take the time to explain in detail your site’s defining features like its UX, navigation structure, content strategy, or unique mobile attributes. If you put the effort into crafting descriptions that complement your visual assets, your readers will feel much more confident in your decisions as a designer.

Design case study: the solution

A sample highlighting animated design elements from This Also’s case study

Pro Tip: Remember, the medium is the message. Don’t limit yourself to screenshots alone. Incorporate interactive elements – animations, video, transitions, or anything else – that accurately represent your design work to really wow your prospects.

5. The Results

For most business owners, it’s all about the numbers. That’s why this section is crucial for an effectively written case study.

The Results section will cover the qualitative and quantitative success metrics from your project (and if you’ve tested your product, such as with a contextual inquiry, you should have great metrics to share!). While the type of metrics you report on can vary from one project to another, they should directly address the objectives you established in The Context and Challenge section. Having these results in hand will allow you to show your prospects that your work had a direct influence on your client meeting their goals. If you can do this, you’ll help them feel more comfortable putting their business (and their money) into your hands.

In addition to, or in lieu of, quantifiable metrics, consider including one to three testimonials in this section. These testimonials are another great tactic for boosting the confidence of your prospects. Since the source of these reviews come from outside your business, prospects are more likely to trust them as a reputable reference. When including your testimonials, however, keep them short and sweet. They can be as simple as one or two sentences, so long as they illustrate your previous client’s satisfaction with your work.

Design case study: the results

A nice mix of qualitative and quantitative results from Simon Pan’s case study

Pro Tip: Be sure to collect testimonials from your clients near the tail-end of your project. Ask them to speak about your process, creative thinking, and the quality of the final product. Just make sure you get their approval to publish them!

5 examples of creative web design case studies

Although case studies should include a lot of important and somewhat formulaic information, they are still an expression of your unique personality and style. This means you have all the liberty in the world to get creative with their format and presentation. To give you some inspiration, here are five examples of creative web design case studies that we loved reading.

Aerolab — Xapo

Design case study example: Xapo

Fantasy Interactive — Airlines Project

Design case study example: Fantasy Interactive

Michael Evensen — Soundcloud App

Design case study example: soundcloud

Robin Noguier — Allocine

Design case study example: Allocine

Super Top Secret — University of Oregon

Design case study example: University of Oregon

This was first posted here.

Build to Beta: Five Tips for Launching a Digital Product with MVP

0
Photo by Ryan Snaadt on Unsplash.

Over the last eight months, there has been a dramatic shift in the way consumers interact with businesses. According to a study conducted by McKinsey, the Covid-19 crisis has accelerated the adoption of digitized customer interactions in North America by three years. There has also been a seven-year increase in the rate with which companies are developing digital products and services. If you didn’t believe us when we said now is a good time to bet on yourself (again), there is further proof. 

After losing our biggest client in 2018, we took the leap and began building a product through equity investment. We shifted our mindset, found the right partner, did our homework, raised money, and uncoupled the product from the agency. Now our minimum viable product (MVP) has been built, and we’re ready to launch to beta. The journey has been filled with lessons — ones I hope to continue sharing with you to help your team avoid the same mistakes we made.

1. Commit a Full-Time Team for No Margins

The agency playbook tells us that to survive, margins and utilization need to be at full capacity. Accepting that you won’t make money now (or in the short-term) is contrary to all that we’ve been taught and experienced as agency owners. To give your product the best chance for success, go against your instincts and commit the right amount of people to the project — even though the bottom line may look terrifying. If everything goes right, the margins you are foregoing now will be kicked downstream with a multiplier. 

The process of building an agency and a product is different and requires competing mindsets. We attempted to create a digital product that had market validation in the past, but we didn’t adequately resource the project, so it failed before reaching MVP. And this narrative is common. Inadequate resourcing accounts for 22% of unsuccessful projects.

2. Adopt an Agile Approach

Older methodologies, such as the Waterfall approach or Water-Scrum-Fall, are not flexible enough to meet the current demands of product development. Agile forces teams to decide on MVP early and work through short sprints until achieved. With the understanding that projects rarely go according to plan, Agile is designed to adapt to the unknowns and the unknown unknowns. 

An important disclaimer: If your team is not fully competent in Agile design and development, your product should not be your first attempt. Trialing Agile on your product means attempting to solve the product’s problem and the delivery, which is never recommended.

3. Designate a Product Manager or Owner

Many CEOs feel they are best suited to be the product manager. Before electing yourself to the position, consider how autonomous your agency is. If the agency requires leadership to run, doing both is not easy and may compromise each venture’s success. Instead, identify someone internally or hire an experienced product owner. You can still influence the direction but do so at 1,000 feet. I took on the Chief Product Strategist role and continue to find it challenging dividing my time between the agency and product.

4. Seek an Experienced Advisor

Client and investor expectations are radically different. The responsibility agencies have to clients is to design, build and ship. Once the solution is live, our job is complete. Investors require reports on progress, burn, trajectory and forward-planning. They need to know the go-to-market strategy, marketing, product fit and continuous improvement plans. These updates go far beyond typical client work and may feel foreign to agency owners. 

Reach out to your network and solicit guidance from an experienced advisor. Nurturing a product long-term surfaces many unknowns for agencies that have only been concerned about moving from project to project. The earlier you seek counsel, the better prepared you will be to respond to investor, product and market needs throughout the build and post-launch.

5. Prepare Your Go-to-Market Strategy Earlier Than You Think

Preparing your product for launch is almost as important as the build itself. Ask questions such as: Who will be the business-as-usual team? Do we hire a full-time marketer? How many features should be included in Beta? These are all critical components of the process to consider.

As the CEO, your best chance at success is to have the discipline to step away from designing and building the product, trust your team and focus efforts on going to market. If you begin launch planning when the product has nearly reached MVP, you’re too late. 

There is not a lot of money to fund this step. Most of the dollars raised are used up by the build. With infinite possibilities of launching a product, it can be challenging to know where to allocate the small number of resources left to get the biggest return. If you don’t have experience with go-to-market planning, reach out to an advisor as soon as possible.

The Journey Continues

Building a product and running a digital agency does not get easier or less risky (not yet, at least). Some CEOs pivot completely, go all-in for a product and shut the agency down, but we are running the two in parallel. I chose this path because the risk of being stretched too thin appeared better than running a deficit. I grossly underestimated what it was going to take to run both and have a family.

In addition to committing a full-time team for no margins, adopting an agile approach, designating a product owner, seeking an advisor and preparing your go-to-market strategy early, consider the constraints on your time outside of work. Knowing yourself and what you can handle is also a crucial part of the product development process.

This is article was written by JP Holecka, CEO of POWERSHiFTER Digital and Co-founder of a funded luxury e-commerce search platform start-up Luxxee™. First posted on Forbes.

How To Become a Better Entrepreneur: Pricing, Customer Service, and Market Strategy

0
Photo by Brooke Cagle on Unsplash.

Corporations must navigate their ship one way or another toward continued success. Early-stage entrepreneurs need to decide if they are building a ship, an aircraft or a warehouse.

What kind of company are we building? Who is the ideal customer? What is the real pain point? What will our business model be? What geography will we tackle first, and will it be direct sales or via channels? How will the product look and feel? will it be a pure SaaS play or will it also include professional services? Will it be a vertical SaaS or horizontal Saas?

Itay Sagie, co-founder of VCforU.com

There are so many strategic decisions to be made, and at most times CEOs and founders have few people to consult with. Each strategy will have its own implications and requires a unique set of considerations one must balance before making a decision. While there is no right or wrong answer, but it is always best to seriously consider your steps before committing to one strategic path over another.

Following are three strategic balancing acts that could have a high impact on a company’s growth and success.

Pricing: Balancing free and premium offerings

Today, customers are getting used to a freemium model, where a simplified or limited version of the product is provided for free, sometimes for a limited period or a limited set of features. There are great products I personally use that give me all I need in the free version. That means converting me to a paying customer will be a problem. If they were to have no free version, perhaps fewer users would try the product in the first place. What is the right premium price? A high price may deter many customers while a low price may suggest a low-quality product.

Considerations when looking at your pricing strategy:

  • Competitor pricing: Your product will typically be measured against its competitors. Your price point should be somewhere in the range of your competitors, either in the high range if your product brings more value, or in the low range if you are competing on price, which is usually not a good place to be; it could mean your sector has been commoditized.
  • Target audience: Enterprises usually do not have a freemium model. Instead they have a pilot (paid or unpaid) to test your product. Enterprises have a high willingness to pay compared to small businesses and consumers. However, their sales cycle is longer, so you should have enough resources to pursue these opportunities for a longer period.
  • Tiered pricing: Once you identify your target audience, it is best to create three price tiers, depending on the customer size and product capabilities attached to the offering. This ensures you provide various target audiences with what they need at the price point they feel comfortable paying.

Customer service: Balancing happy customers with strategic focus

Customer service is one of the most important things you can do to improve your unit economics. It has a big positive impact on retention, monetization and greater lifetime value. Smart companies create a strong farming strategy, keeping their existing customers happy and paying by making sure their needs are being met. However, what happens when your customers start demanding features customized for them? Too many early-stage startups immediately comply. The issue is you are giving away professional services for free and pivoting from a product company to an unpaid, unscalable services company.

Considerations when looking at your customer service strategy:

  • Scalability test – It is best to test every new feature for scalability; how many customers would find this new feature valuable?
  • Integrate vs build – Would it be better to integrate my product with other platforms to bring immediate additional capabilities to my customers? For example, ticketing systems, CRMs, mailing services, APIs to databases and so on.
  • Product vs services – Being a services company is also a valid strategy, albeit one that VCs shy away from. So if you are self-funded and it provides additional runway, go ahead. However, while revenue from services will help increase your runway it will not attract VCs.

Go to market: Balancing time to market and profitability

You have built your product and you want to start selling. Using channel partners to gain quicker access to the market is a common practice, and you will most likely accelerate your revenue growth while maintaining a low customer acquisition cost. However, using channels means you will likely part with up to 50 percent of your revenue upon sale. Being dependent on a few resellers might put you at risk of being replaced by another product down the line. On top, if you do not have relationships with your end customers, your margins will diminish.

Considerations when looking at your go-to-market strategy:

Is it a new or established company? In the first years, I suggest focusing on direct sales. This way you will better understand the end customer’s needs, you will perfect your sales pitch, and you will better commercialize your product toward growth. Once you have established a well-defined sales process, have a proven working product, customers willing to pay, and low churn rates, then you should consider ramping up sales using channels. That will put you in a strong position and helps you to negotiate better terms with the resellers.

Itay Sagie, a guest contributor to Crunchbase News, is a lecturer, contributor, strategic adviser to startups and investors and co-founder of VCforU.com.

Illustration: Li-Anne Dias

How to add Google Analytics API code in Laravel PHP to get summary

0
Google Analytics to Laravel

Introduction

Google provide powerful programmatic method to get report from Google analytics in your custom dashboard.

You can see real time activity by integrating Google Analytics API.

You can pass custom date ranges to see the report in your dashboard.

I am going to integrate Google Analytics API to get summary and api will return following things in summary parameter by following this code.

  • ga:sessions
  • ga:users
  • ga:pageviews
  • ga:bounceRate
  • ga:hits
  • ga:avgSessionDuration
  • active_users

Step1: Setup service account

Before going to integrate Google Analytics API, you must have project in the Google API Console if don’t have project then click on Create a project link to create project.

It will take few minutes to active after that you can create service account by clicking this link Create service account.

Image for post

You must enable your google app.

Here you will get service account email which will be used to configure with Google Analytics API.

You will need also view id which you will get in your analytics dashboard > admin > view setting somewhere it is known as table id.

Step2: Update composer to install package for Google Client

Add this line in your composer file and update composer command in your terminal.

"google/apiclient" : "^1.1",

Step3: Add Routes

Route::get(‘google-analytics-summary’,array(‘as’=>’google-analytics-summary’,’uses’=>’HomeController@getAnalyticsSummary’));

Step3: HomeController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class HomeController extends Controller
{
public function getAnalyticsSummary(Request $request){
$from_date = date(“Y-m-d”, strtotime($request->get(‘from_date’,”7 days ago”)));
$to_date = date(“Y-m-d”,strtotime($request->get(‘to_date’,$request->get(‘from_date’,’today’)))) ;
$gAData = $this->gASummary($from_date,$to_date) ;
return $gAData;
}
//to get the summary of google analytics.
private function gASummary($date_from,$date_to) {
$service_account_email = ‘your service account email’;
// Create and configure a new client object.
$client = new \Google_Client();
$client->setApplicationName(“{application name}”);
$analytics = new \Google_Service_Analytics($client);
$cred = new \Google_Auth_AssertionCredentials(
$service_account_email,
array(\Google_Service_Analytics::ANALYTICS_READONLY),
“{your private_key}”
);
$client->setAssertionCredentials($cred);
if($client->getAuth()->isAccessTokenExpired()) {
$client->getAuth()->refreshTokenWithAssertion($cred);
}
$optParams = [
‘dimensions’ => ‘ga:date’,
‘sort’=>’-ga:date’
] ;
$results = $analytics->data_ga->get(
‘ga:{View ID}’,
$date_from,
$date_to,
‘ga:sessions,ga:users,ga:pageviews,ga:bounceRate,ga:hits,ga:avgSessionDuration’,
$optParams
);
$rows = $results->getRows();
$rows_re_align = [] ;
foreach($rows as $key=>$row) {
foreach($row as $k=>$d) {
$rows_re_align[$k][$key] = $d ;
}
}
$optParams = array(
‘dimensions’ => ‘rt:medium’
);
try {
$results1 = $analytics->data_realtime->get(
‘ga:{View ID}’,
‘rt:activeUsers’,
$optParams);
// Success.
} catch (apiServiceException $e) {
// Handle API service exceptions.
$error = $e->getMessage();
}
$active_users = $results1->totalsForAllResults ;
return [
‘data’=> $rows_re_align ,
‘summary’=>$results->getTotalsForAllResults(),
‘active_users’=>$active_users[‘rt:activeUsers’]
] ;
}
}

If you are getting error “User does not have any Google Analytics Account” then add service account user in analytics by clicking admin option on analytics dashboard and go to User Management.(Within account,property or view).

If you are getting error “Google Analytics API has not been used in project {project id} before or it is disabled” then follow given url in error message and enable api.

There are several package to integrate Google Analytics API too.

You can use spatie/laravel-analytics package but this package are using same google api client version.

Now use this code to get summary of Google Analytics in your dashboard using Laravel.

This article was written by Arslan Ali.

26-Year-Old Programmer Built a $1 Billion App In 2 Years — After Following His Girlfriend’s Advice

0
Photo by Jakob Owens on Unsplash.
Kevin Systrom left Google frustrated.

Having spent almost three years as a product manager at the company, Kevin was eager to take on more responsibility and apply his nuclear drive to something tangible. Instead, he was offered by his boss to take up golf.

His next stop was NextStop, a location recommendation app startup. With FourSquare leading the way, check-in apps were all the rage in the late 2000s, and a small team meant Kevin could get more responsibility and take initiative.

He did. After a year of honing his coding skills at the startup, Kevin decided to create a check-in app of his own.

“I didn’t have a specific idea in mind… I mean, the idea was basically to start a check-in app… Who wasn’t starting a check-in app at that time? […] It was probably the worst idea we could’ve been working on at the time.”

A hostel in Mexico seemed like the right place to pursue his terrible idea, so Kevin packed his flip-flops and bought two tickets out of California — one for himself, one for his girlfriend. That second ticket would become the best investment Kevin Systrom ever made.

Kevin’s life story and quotes taken from these four sources.

“You should probably add filters”

Burbn — Kevin’s first grown-up brainchild — sounded good on paper. Unlike other check-in apps, Burbn allowed users to post photos and videos along with their check-ins. Investors liked the idea, and Kevin received two checks — one from Baseline Ventures, and another from Andreessen Horowitz — totalling $500,000.

“We spent like $60,000 to launch Burbn. We raised $500,000 and we were kicking ourselves the second day after… We were like, we had all this money left. […] Turns out, you can bootstrap yourself with Amazon Web Services; you need like 2 engineers these days to do things well.”

Burbn was easy to build, but it was even easier for users to forget. 80 people — that’s how many joined Burbn over nine months. Kevin recalls having his friends meet his parents via the app, and reconnecting with long-lost acquaintances. But whenever he showed the app to ‘outsiders’ — a.k.a. potential users like you and me — they would nod enthusiastically and then dismiss the app minutes later.

It was a tight-knit community of enthusiastic location-sharers. But it wasn’t growing. Something had to be done.

“We made a list of [Burbn features] and we asked ourselves: what already exists in the world? What sucks? […] There were a lot of check-in apps, there were a lot of planners and group chat things… but there wasn’t a great solution to posting great photos to a lot of friends at once.”

During their Mexico trip, Kevin asked his girlfriend why she didn’t post any pictures on Burbn. She said that her iPhone 4 photos didn’t look as good as some of Kevin’s friends’. He explained that his friends were using photo filters.

“She goes ‘oh, well, you should probably add filters.’ We came back from that walk, I went straight to the room, got on my laptop and I made the first filter, which was X-Pro II.”

Within weeks, Burbn was stripped of all features except photo sharing. The gutted version was downloaded 25,000 times on day one.

How do you call an app that sends instant camera shots with the speed of a telegram? That’s right. Insta-gram.

Snippets of wisdom from Kevin Systrom, co-founder of Instagram

Kevin is a well-read guy, so it’s not a surprise that he’s quotable. Here are a few sharp thoughts I heard Kevin say.

  1. Learn just enough to be dangerous.” — Kevin is a self-taught coder, but he admits he would never be able to build Instagram without the help of his more proficient friends. Instead, he advocates learning enough about a subject to build an MVP, and then bringing on real talent once you know the demand is there.
  2. You’re never ready, but that’s the fun part.” — you don’t build a billion-dollar company at 26 by waiting for enlightenment. You get your hands dirty, and you see if any gems emerge from the mud you dig up.
  3. The hardest part is finding the problem to solve; solutions come pretty easy.” — alludes to Einstein’s “understand the problem and the solution will emerge” wisdom, which is extremely relevant today, because we live at a time when our problems aren’t obvious, and the solutions aren’t that complex.
  4. Great ideas are about editing the bad ones out.” — exactly what happened with Burbn.
  5. One day on the job is more than one year in a book.” — big words coming from someone who has a pile of books on his bedside at all times. If I were you, I’d take it at face value.

“If I could only read two books, I would read these two books”

Kevin describes himself as someone who primarily learns by reading — and he offers invaluable advice for reading non-fiction books (Kevin doesn’t read fiction.)

First of all, he suggests always having a clear objective first (“I want to learn about body language”) and then picking up the appropriate book — this way, you’ll actually find reading meaningful and enjoy it.

It’s also interesting how he reads non-fiction books: he starts off by analyzing the table of contents, and then reads the last paragraph of every chapter — there, he says, authors actually make the point they’re trying to make. Only after having a good idea what the book is about, does Kevin proceed to read it cover-to-cover.

Here are his favorites.

“Principles” by Ray Dalio

Principles is a classic, and it was a PDF with Dalio’s “commandments” before it was a bestselling book. The PDF didn’t produce that big of an impression on Kevin, but the book, he admits, blew his mind.

In Principles, Dalio goes over his life story — from his poor grades in school and the death of his mother to leaving Bridgewater Associates, a $160 billion hedge fund he founded. He then goes on to extract key lessons from his life.

The principles themselves can be somewhat dogmatic and vague — but if you’re looking for a refreshment of life’s core logic (or a replacement to the Bible) then lessons like “radical open-mindness” will resonate:

  1. Don’t confuse what you wish were true with what is really true.
  2. Don’t worry about looking good — worry instead about achieving your goals.
  3. Don’t overweight first-order consequences relative to second- and third-order ones.
  4. Don’t let pain stand in the way of progress.
  5. Don’t blame bad outcomes on anyone but yourself.

Either way, these were written by a real person and backed by real reflections — so if you find Dalio an authority, even the dogmas might be worth drilling into your skull. The story, though, is why you should read it.

“The Lean Startup” by Eric Ries

Another classic — one that I can personally vouch for. The book is over 300 pages and contains plenty of interesting business stories, with one simple truth at the core: nobody knows what’ll work for you, so the best thing is to build a Minimum Viable Product (I think Ries actually coined the term) and test things out.

Kevin says The Lean Startup was one of the most influential books in his life:

“The principles from The Lean Startup that I still apply today… One of which is to do the simple thing first, and that was our number-one value at Instagram. […] Still, to this day, I come back to that. “

Four reasons why Instagram became a $1bn company in two years

Kevin’s tale has become a classic Silicon Valley lore — and for good reason. It embodies most of the truths that go into building a world-changing product.

#1. Instagram was ridiculously simple

Most apps try to lure in users with their vast menu of features, continuously adding new ones, drifting further into irrelevancy. Instagram was literally born by taking an app that already exists, and stripping it from all features that showed the least promise.

“Really, you should not be afraid to have simple solutions to simple problems. Too many people believe you have to solve things in a really complicated way. At the end of the day, if you delight people even a little bit with a simple solution, it turns out it goes very far.”

Kevin emphasizes that simplicity goes a long way when working with limited resources — which, for most startups, is the day-to-day reality. Most founders, however, prioritize the elegancy and sophistication of their product — not necessarily its effectiveness.

“When you’re small, and you’re two people, and you’re coding, late into the night — you don’t have time to make things complex; you have time to make things work. Otherwise, you end up over-optimizing.”

It’s not just the product that was simple — simplicity runs in Instagram’s DNA. After the company gained momentum, Kevin introduced ‘decision meetings’ — where nobody would leave the room until all the decisions that needed to be made would be made. And if you hear him talk, you’ll quickly see that his childlike curiosity and humbleness stayed very much intact over the years.

“I feel like I wake up every day with a lot of the same worries I had before Instagram was a thing. Am I working on the right thing? Did I do nothing today? Is that idea the right idea?”

Indeed, simplicity is not the only criterion for a billion-dollar exit. You also have to find a billion-dollar problem to solve.

#2. Instagram was born out of a field test — not imagination

You don’t have to look far to find massively successful ideas that were initially designed to do something else entirely. Kevin reminds us that Youtube was initially designed to be a video-based dating site, while Samsung started out as a dried fish exporter.

“Timing, perseverance, and ten years of trying will eventually make you look like an overnight success.” — Biz Stone, Co-Founder of Twitter

The problem Kevin stumbled upon with Burbn was that people did want to share their lives via photos, but they weren’t satisfied with the quality of their images. Back when iPhone 4 was the hottest smartphone available, photo quality was a serious problem.

Instagram blew up because it solved two problems at once: it allowed users to make their photos pretty with a click of a button, and it provided a platform for users to actually share their photos.

But who cares about sharing photos if nobody’s going to see them?

#3. Instagram fit into an already existing ecosystem

Before Instagram became a social network, it was a photography app — almost a portfolio platform for amateur photographers. What turned it into a multi-billion giant was its integration with Facebook — which Kevin launched right at the beginning.

Nowadays, with the social hierarchy of the Internet pretty clear, integrations are a default decision. You want your apps to plug into Facebook, Google, or whatever other network makes sense for the user.

Back in 2010, it wasn’t obvious that you should ‘submit’ your users to a larger platform instead of trying to kickstart an ecosystem of your own. Kevin, in line with his realist character, encouraged users to share their filter-enhanced photos on Facebook, effectively riding the wave of social network’s bulldozer growth. Only later did Instagram add social media features: DMs were introduced in late 2013, while hashtags were added a year after Instagram was launched.

All of these decisions seem natural and even obvious in retrospect, but the reality was a lot messier.

#4. Kevin listened to advice, but made his own decisions

Advice isn’t a rare guest in the Systrom household. He was told not to leave Google. He was told not to work with Facebook. But he was also told to add photo filters.

After years of sifting through advice, Kevin has made a conclusion that sometimes people just say things because they like or dislike you — not because they’re being rational.

“That’s what starting a startup is like. Really, no one believes you until they believe you. And no one is a fan until they’re a fan. […] Part of being an entrepreneur is like, yeah, these two sides are going to exist always. Sometimes it’s gonna be weighted towards hate, and sometimes it’s gonna be weighted towards love.”

Nowadays, it’s hard for Kevin, the $400-million-net-worth founder, to get negative feedback. He has figured out workarounds — like having people rate his public speaking on a scale from 1 to 10 — with ‘7’ eliminated from the scale. This way, he says, people can’t be neutral.

Keep it simple, stupid!

My phone just buzzed — it’s my mom. It’s the sixth time she asked me about a potential domain name for her new e-shop. It’s been about two weeks, and she still hasn’t decided on a name yet.

What would Kevin tell her? He would probably tell her to just pick a name and go test out her e-shop — because nobody knows how or when or why her e-shop will or will not work.

But I’m not Kevin, so I just told her that I liked the previous name better.

This article was written by Alan Trapulionis and first posted at here.

How to Price Your Online Products

0
Photo by Jakob Owens on Unsplash.

Pricing your online product is important because it affects numerous aspects of your business, namely: finances, marketing, and sales. An inappropriately priced product could lead to your company’s death while an appropriately priced product could place you as a prime competitor in your space.

This is certainly no easy task as it is a good combination of both art and science. But, you can’t get caught in the trap of thinking about it forever as that would impede your business’ growth. Recognize that pricing evolves as expenses change, customer demand changes, and competitor success changes. This flux should help you feel comfort in trying a certain price, or pricing strategy, knowing that it might not be the one that brings the most success, but that you will be changing it at a later date no matter what. As with every aspect of your business, try something, learn from it, and iterate.

Your goal is to maximize profits so that you can continue to grow and get as much market share as you can. Price isn’t the only factor affecting market share, but it sure plays a critical role. There are a variety of ways to consider pricing to ensure that you are not overpricing or underpricing your product.

There are four overarching angles to consider when pricing a product for retail:

  1. your costs,
  2. your competition,
  3. psychology of your buyer,
  4. the market.

We will dig into them all.

How to price an online product

There is no hard and fast answer to how to determine the price of a product. Your competition, costs, objectives, and buyers all factor into the right answer for you. Let us explain.

What does your competition charge?

Buyers in the market for your product rarely shop in a vacuum. They will almost certainly compare you, your prices, and the value you offer, to those of your competitors.

product comparison

Consequently, it is prudent to take careful note of your competitors’ prices, as well as understand how your industry tends to price their items. Do they bundle products a certain way? Do they offer a freemium model? Is pricing flexible as demand changes? Certainly always be analyzing the market to respond quickly to any changes.

What are your costs? 

The price of a product must be determined, at least in part, by your costs. It is especially essential to generate a profit on an item if it is the sole item you sell. Your costs will be a prime consideration of your pricing in order to have a sustainable business. We will dig into this in more detail in a future section.

What profit margin do you want? 

Your desired profit margin is a factor in how much you charge for a product. Once your costs have been met, how much more do you want to have of surplus? You may wish to maximize your profit margin potential as a strategy to enable business expansion without a loan or investments.

Who is your buyer and how do they think? 

First and foremost, you should only be selling to someone you know inside and out. It may seem obvious, but many never take the time to ask their customer what they are willing to pay. You can discover this information by having a conversation or sending out a survey. By talking to your customer, you’ll learn whether they are looking for a budget option, which means you would need to be priced cheaper than your competitor, whether they want status or convenience, which means you can charge more, or whether they want something in between that is just average.

who is your buyer

With your costs in mind, what do you make of these conversations? Does it look like you need to charge more than what your buyer can pay in order to break even and generate a profit? What could be a solution to this? Lowering your costs? Changing your target market? Or maybe what they are willing to pay aligns perfectly with what you already had in mind.

Beyond what your buyer can afford, neglecting their psychology would be a travesty. There are several common pricing concepts that help companies maximize the value of their customers.

  1. One is called the Rule of 100.” This rule suggests that when your product is going on sale the sale should be communicated as a percentage off if the original price is less than $100. If, however, the price of the product is over $100 originally, then you should communicate the sale price in number of dollars off. The perception this creates has been deemed an effective sales pricing tactic.
  2. The other psychological concept to apply to pricing is called charm pricing. Charm pricing is at work when you go to the store and see an item marked at $8.99 instead of $9.00. A single penny “discount” is negligible, but people process $8.99 as a far better deal and are more inclined to buy.
  3. Make the buyer feel like they are getting a good deal by giving them something free with their purchase even if you are charging a higher price. The addition just needs to provide some sort of value to them but does not need to cost you much or any money. Alternatively, offer discounts on future purchases, and the opportunity to unlock exclusive deals to add even more appeal.

Ultimately, your product needs to be priced to keep your customer.

What conversion rate does it yield?

You don’t just want to fall into the trap of thinking that the price with the highest conversion rate is the way to go. It’s possible that a higher price point would lead to a lower conversion rate, but still bring in more revenue. It is true that if you price your product higher, you may lose out on the business of those who would purchase at a lower price point. How can you avoid losing this business? Create sales, periodically, that don’t go low enough to make you lose money, but are low enough to land the customers who wouldn’t pay the full asking price.

Product pricing methods

We just went over considerations on how the price of a product is determined. Here are 6 actual product pricing methods to use based on the considerations.

  • Cost-based pricing (or cost-plus): Thinking about your pricing this way revolves around your break-even point. This means identifying how many units need to be sold to meet all of your expenses and not generate a profit. This product pricing method is good for establishing a baseline price, as it does not factor in the market and what your competitors are charging. We will go over the formula, below, to help you determine what your baseline cost for your product should be.
  • Value-based pricing: There is a rule that states that customers should get a perceived value of 10x what they paid for a product or service. If a product is far greater than 10x cheaper the value they will derive from it, they will be turned off. Do not underprice your product even if you would still make great margins. Because, not being able to sell it at all would keep you from even breaking even much less generating a profit. To price your product appropriately, you should understand the value that customers place on it and how they compare your product to competing products. If the perceived value is higher than the cost-plus value factoring in a good profit margin, you could charge even more.
value-based pricing
  • Market-oriented pricing (competitor pricing): You can determine the price of your product using the market-oriented pricing method. This method is based largely on your industry, what market trends there are, and how your competitors price what they produce. The quality of your product is a large factor in using this pricing method. Your customers will judge the quality of your product based on its price and how it stacks up against the price and quality of your competitors’ products. An underpriced item will make you seem cheap. People are actually willing to pay more for good value. Your price leaves an impression on would-be buyers; the question is: what kind of impression do you want to leave? Stay ahead of the curve, and always be considering where your market stands and where it is headed. Are there any weather patterns or law changes coming up? What about change in societal views?
  • Dynamic pricing: Dynamic pricing features price changes based on market demand weekly or even daily. A few companies and industries may come to mind that do this on the regular: Amazon, Uber, hotels, and airlines. Raising and lowering prices based on demand can help you hit more people. There are some fantastic tools like QuickLizard, Omnia Retail, and Profit Peak that help companies with dynamic pricing.
uber dynamic pricing
  • Loss-leader pricing: Loss-leader pricing is essentially a form of marketing. It gets people in the door with a sale so low that it makes you lose money on the product, only to be made up by profit through the sale of other products that have high margins. The grocery retailer, Aldi, and outdoors apparel company, Patagonia, are known for this type of pricing to attract buyers to their store and website. Alternatively, this form of pricing could be done by bundling low-cost items with higher cost items. This method requires a lot of knowledge about your costs and margins.

patagonia loss-leader pricing

Patagonia’s loss-leader products

  • Price skimming: This strategy implies that you start with a high price (think of the highest your clients would pay), and drop it over time. Usually used for innovative products, when there’s no real competition, in order to maximize the profit for every segment of your addressable market. This approach is actually is contrasting the next model.
  • Market penetration pricing: As previously mentioned, this one is the opposite of price skimming: you start low to capture market share, and then raise the price to build on profitability. The main goal of penetration pricing is to spark the curiosity of your prospects and entice them to become customers. This method comes with some a risk: once prices increase, customers may choose to leave and switch to a cheaper competitor.
  • Captive pricing: Like penetration pricing, captive pricing involves counting on expansion revenue to offset an initial discount. In this case, you provide the core product at a discount but charge a premium for additional products and services (like what a mobile service will do with data usage) to use or get the most from it. Use this wisely not to create customer frustration if pricing for dependent products is too high.
  • Anchor pricing: The last pricing method we want to introduce you to is called “anchor pricing.” This is when a company makes a “regular” price visible to their buyers, but regularly sells it at a discount. This functions to catch the people who are always on the hunt for a good deal.

If you are selling SaaS, there are a few pricing models you could employ, often used in combination with one another:

  • simple or flat rate
  • tiered
  • per feature
  • per user
  • metered/usage-based
  • freemium
  • premium
  • free trials
  • mixed pricing
  • dynamic pricing

2Checkout’s resource, Pricing for Success in SaaS: An Essential Guide, includes extensive, actionable helpful pricing insights, tips, and examples around SaaS pricing. Make sure you get your copy!

How to calculate selling price of a product

Many of the product pricing methods above are based in part on art, psychology, and a solid intuition, however, the cost-based method uses a formula centered around business expenses to calculate the selling price of a product.

This is what the formula looks like. It’s fairly simple.

All costs ($) + profit margin ($) = price of product ($)

You may see the equation presented as:

profit = total revenue – (cost to produce 1 unit)(# units) – total fixed costs.

This equation breaks down the costs so that you can think about them in terms of variable costs per tem that you sell and the fixed costs involved with running your business.

Or, if you know what profit margin percentage you want, you can use this formula:

target price = (variable cost/ product)/(1-decimal profit margin)

You can calculate the selling price of your product by making a simple spreadsheet of all the costs involved in producing it. These are called variable costs and include those of:

  • Materials
  • Time
  • Packaging
  • Shipping
  • Credit card transactions
  • Marketing

But then there is also your company’s overhead, which is fixed costs (not directly related to the production of your product). These costs are for things like:

  • Legal fees
  • Rent
  • Electricity
  • One-time start-up costs

After you’ve figured out your costs, you can determine the profit margin that you want to factor into the price of your product. The profit margin is your markup. It’s okay to have products with low margins if you have products with high margins to make up for it. Some high-margin items are furniture, skin care products, and eyeglass frames.

For eCommerce, a good profit margin would be 20%. So, if a product cost you $10 to produce, and you wanted to make a 20% profit margin, your target price would be $10/(1-.20), which is $10/.8, and amounts to $12.50. Therefore, your profit margin in $ amount is $2.50 per unit sold ($12.50 – $10).

In wholesale, this pricing formula and market acceptability permits doubling the cost of the variable costs to arrive at the product price. Then, in retail the cost could be doubled, yet again.

Beyond the basics of how to price your product

You may know your prices at any given moment, but there are some long-term considerations that are important to keep in mind, as well. Always be aware of where the market is going and how your competitors are pricing their products. These can change with the drop of a hat.

Additionally, there are certain expectations that come with your price. For example, people generally do not expect high quality if you are selling a cheap product. However, if your product is priced above that of your competition, they expect it to be of superior quality.

update price regularly

As we mentioned earlier, no price is ever permanent. In fact, companies that regularly update their pricing realize almost twice that growth in average revenue per user than those that don’t.

That might make you breathe a sigh of relief. Your company goal is to maximize your potential for profit, and you don’t know for certain what the response will be when you make a certain price change. No matter where you want to go with your price, ensure you make gradual changes so as not to jolt anyone. These gradual changes will also help identify optimum pricing. If you create new versions of your product, the price can certainly go up (or even down).

But, above all, be open, honest, and transparent with your pricing to build trust and avoid confusion. And, if you are offering a sale, play the mental game of how good of a deal they are getting by showing the sale price alongside the original price.

Conclusion

You can think about how to determine the price of a product forever — but, don’t.

Don’t get stuck thinking about pricing; it’s time to make some money! Take what you know about your costs, your buyers, and your industry and just try something. That’s not a stab in the dark; it’s a very educated guess.

Thankfully pricing evolves as expenses, customer demand, and competition change. So, no matter what your pricing is now, it will change — great news if you are uncertain of getting it wrong initially. You cannot go wrong when you base your pricing off of all the information you have.

Good luck with your first retail product price! Here’s to great profit margins.

This post was first posted here.

10 Years of Designmodo: Highs, Lows, Lessons and Inspiration

0
Photo by XPS on Unsplash.

This is an article by Andrian Valeanu, the Founder of Designmodo.

Designmodo turns 10 years old in August 2020! 🥳 All this time, I’ve never shared what happens behind the scenes here. It’s been an amazing journey – so I’ve decided to share how the company came to be what it is today.

This is a story about turning tough times into valuable lessons. About creating success in what seems like an impossible situation.

Hopefully, you can learn from our failures, and also take some inspiration from how we picked ourselves up when we got knocked down. Repeatedly!

There’s one thing I want to mention at the outset: we’re an indie company that exists because of the support from our incredible community of creative clients. We never sought investments or business mentors, and we’ve worked entirely remotely since the beginning.

So, here goes…

Chapter 1 – Freedom

In August 2010, I decided to start a blog about web design and development. It was at the height of the blogging/vlogging boom! In the first 6 months, I published three articles per day (it was a crazy time!) and built an extensive library of website content in a short period of time. I was doing it all in my free time from my full-time job, in the evenings and on weekends.

Revenue from AdSense and BuySellAds was growing fast. So, in January 2011, I decided to leave my job. I dedicated all my time to my project, and my own freedom. I began to invest around 80% of revenue in new authors to write better articles – there’s always someone better than you. I was aware that the blog needed to grow further, and I started to invest more in authors than in my daily needs. I don’t spend to excess. I only buy enough in my daily life for my basic needs. This is notion is known as minimalism, and I continue to live in this style.

Chapter 2 – The Best Idea

10 Years of Designmodo: Highs, Lows, Lessons and Inspiration

In 2011, I pushed hard on publishing new articles, tutorials, and freebies. User numbers were headed towards the sky. In the autumn of that year, I noticed a new trend in web design: UI Kits. The big idea was a hit! 💡

I had seen a few designers beginning to post some shots with ready-made UI elements on Dribbble. At that moment, I decided to look for a partner, a good designer who was interested in creating some free UI Kits for Designmodo’s audience – which was the best idea ever! Yes, I have some design and coding background, but to make something really cool, I needed a professional partner.

“There is always someone better than you.”

I sent ±150 emails to different designers from Dribbble and Envato. I received a few responses; one was positive. Together we started work on the first UI Kit with plans to share it for free.

In early 2012, we released the first UI Kit, and it was a success! We received so many mentions, and website traffic grew far more than we had expected. Server down, server up… appreciations, new contacts, new offers… People were asking for more elements. We answered the call with a paid version.

We launched our first premium UI Kit, priced at $19. 💰 Soon came the sale! But then… the first refund. ‘What?’ ‘Why?!’

The refund was, it turned out, because the client couldn’t open the PSD file on his old machine. So, we thought, will EVERY sale be refunded!? 😲 Happily, that wasn’t the case. In the next few days, the sales kept coming in, refunds didn’t, and we were motivated to create new UI Kits for web and iOS.

Chapter 3 – Downfall

In April 2012, Google released a new algorithm, and Designmodo’s traffic fell from 135,000 to 25,000. That made a big impact on our sales, and worse, motivation and enthusiasm. I remember how hundreds of websites shut down or were abandoned after this update.

Designmodo stats

I couldn’t believe it had happened. I’ve since learned more about how the new algorithm works, but of all I’ve read, very little applies to our website. My conclusion is that we accumulated too many low-quality backlinks due to our popular freebies. The next few months were a constant fight with algorithm updates, and we recovered 50% of our traffic. We never renounced the project and we started work on a new UI Kit.

Chapter 4 – Inspiration: Get Ahead of Trends

The new UI kit was entirely different. It was the first pre-coded Bootstrap HTML Kit, and the main innovation was to make it in the Flat design style (the biggest design trend of the next few years). That trend has been reflected in the Apple products later in that same year.

In May 2013, we released the Flat UI with flat colors and flat icons, six months before Apple released its OS based on flat design principles. In the same year, we released the Startup Framework, based on Flat UI. It was one of the first online page generators with pre-made blocks of designs and with ready-made code.

Flat UI and Startup Framework were the shining stars that pushed us forward. Both products were a huge success, and more people learned about us. There were millions of downloads of the free version. Major publications mentioned our products in their news and articles. We got 15,000 stars on Github. And all this just in a few months!

The period from 2014 to 2015 was fantastic. The only unhappy memory of the time, not related to sales or products, was a legal problem with using “Startup,” the name of our framework. But we won and continued to use the name. Then we received a DMCA request to Flat UI, for the colors we used in this UI Kit. A company (which no longer exists) asserted that we used their colors to create our UI Kit. This gave us enormous support; thousands of designers and developers turned out on different communities like Reddit and Y Combinator. We won again and continued using the colors, and still more designers and developers started using Flat UI.

We released the Slides Framework in 2015. This app was what kept us going and growing sales. We presented a new way to build static websites, with a new builder experience and visually appealing templates. The community’s feedback was positive and with continued support from the Slides customers.

Chapter 5 – FAIL!@

As I mentioned earlier, from the start of the project we’ve continuously reinvested the money we earned. So, we tried developing a new product, this time for WordPress. It was a bad decision and a valuable learning lesson.

After the Startup Framework release, people had asked for a WordPress theme based on that. Sounds like a good idea, right? We gave it some thought. “Let’s do this!” we said.

We hired a few WordPress developers and started to work on the Startup WordPress theme. The first release of the theme failed, but we still had revenue from previous products, so we decided to continue working on the theme and make it better.

We covered all our spending with our sales for a few months, but then sales began to fall. 🤯

Sales down

Our solution to save the project? “Let’s FAIL AGAIN!” 🥳

We started work on a WordPress (again!) plugin called Qards. No luck with this plugin as well.

In 2016-2017, we stopped developing WordPress products and started to pay off the debts we’d built up with previous developers. We continued to fix bugs on previous products and offer support for clients. We were paying everything we needed each month, over the space of a year.

We continued publishing articles and tutorials, offering support, and fixing bugs. We had to cut a large part of the project budget, but we continued to post new content.

We lived from our savings. We lost a part of the team. Only three of us remained: Sergey, Edvard, and me.

So, what did we do wrong?

  • We hired too big a team to get the work done quickly.
  • We targeted an industry (WordPress) that wasn’t familiar with and that we didn’t understand.
  • We started a WordPress project without any WordPress expertise in the core team.
  • We managed our money poorly, without analysis of past and expected sales.
  • We developed every product/feature users suggested, without considering the business case for doing so.
  • We only thought about acquiring new users, not retaining them over the long term.

Chapter 6 – What Next? Uncertainty

We found ourselves with a huge community; almost a quarter of a million Twitter followers, 150,000 email subscribers, and 100,000 Facebook fans! But we had nothing to offer them. No inspiration, no motivation. “Where’s the freedom we set out to find?” we thought.

Poor sales continued in 2017. We had no engine to drive forward new products!

We’re down… ☠️

What next? Look for investors? Sell the project?

After team discussions and months of uncertainty, we came up with a new plan.

We didn’t have enough money to invest in developing new products. But what if we could find a team happy to work on it initially without pay, but then take a share of all the profits? Would anyone want to do that? Yes, it turned out; there are people who want to create a startup from zero.

We started to build a new team with new people, with whom we could work well and create something cool for our audience. In a few months, we found and organized the team and started to work on Postcards, Startup, and Slides.

We relaunched in February 2018. 🚀 

Chapter 7 – New Start, Forget the Past

New Designmodo

After a massive redesign and new logo release, we put all our efforts into the new products. This time, we decided to offer subscription-only access to our apps. Previous products remained online, and clients could access them; but for new products, clients had to keep a subscription active to access app functionality.

We redesigned and recoded Slides and Startup, and released the first new product: Postcards. Those apps are now the core of the Designmodo business; we frequently update them with new functionality. Thanks to the dedication of our team and the profitability of the apps, we worked in a stable, slow-grow mode.

What do you think we did with the money we started earning? We continued to invest, putting 70% of the money back into the business.

Chapter 8 – What We’ve Learned

The past 10 years have been an incredible journey.

Here’s what they taught me:

  • If you’ve really got faith in your business, put your profits into it as well as your heart.
  • No matter how challenging a situation may seem, there’s always a solution if you think creatively and have the ability to learn from failures. Maybe that means developing a new idea or abandoning an old one. Maybe it means collaborating with people in new ways. Just don’t let it get you down.
  • Building a supportive community can pay higher dividends than you could ever imagine.
  • Focus on what you know. Innovate, sure, but don’t try to crack a new market if you don’t know what you’re doing.
  • Don’t rush to turn each and every suggestion into reality; take time to work out which ones are worth pursuing and which aren’t.

Chapter 9 – Present and Future

Now, we’re working on Slides, Startup, and Postcards updates. We’ll release a big update for Postcards later this year, and we’ll release some new functionality and facelifts for Slides and Startup. With our small team, we want to make all our apps no-code ready.

A month ago, we redesigned the Designmodo’s first page and released it on ProductHunt.

Something more? Yes! 🤫

We’re working on three new side-projects related to:

  1. No-code website builder for designers
  2. Email marketing
  3. Hosting

All three projects are expected to be released this autumn. They’re different than what’s on the market right now; I really hope you will like them. The future’s looking bright.

Chapter 10 – Team

Designmodo Team

Building a solid team is one of the most important elements of product development. You can start solo, but if you want to grow, if you want your idea to become a reality quickly, you need a good team with ambition and dedication. The team should be professionals with good organization and the right skills. Every team member should help power the engine driving the project forward, without needing to be pushed by others.

“During Designmodo’s existence, I have seen how a team might be broken up in the most extreme situation, but I have also seen how a team can be strong and rise again.”

We have excellent professionals behind Designmodo. A few of them prefer to stay out of the public, so we won’t mention names! We come from far and wide, working from Moldova, Spain, United States, Romania, Ukraine, Russia, Uzbekistan, and Armenia among other countries.

You can be a good professional, but if you can’t work as part of a team, you can’t achieve the desired purpose. Remember: You should grow with your team. Don’t get left behind.

Footnote

I want to thank our entire community for being such a special part of this journey from a small blog to a SaaS business. These years were full of hope, mistakes, learned lessons, and happy moments for our team, and we’re really grateful for all the support and trust you offered us during all this time. And maybe it sounds trivial, but without you, our supportive community, the development of Designmodo as you know it today, wouldn’t have been possible. We appreciate this more than you’ll ever know.

I’d love to know what you think of our journey, or if you have any comments on Designmodo generally. Please leave a message!

See you online! 🙌

Andrian

This was first posted on this link.

Designing Cards

0
Photo by Sven on Unsplash.

Cards? You mean like Poker?

Close. But no, not exactly.

We’re talking about “cards” in User Interface terms. Although it’s not untrue that the concept of cards in UX is inspired by its real-life counterpart.

So what’s a card in UI/UX terms? The Nielsen Norman Group defines it as below:

“Definition: A card is a container for a few short, related pieces of information. It roughly resembles a playing card in size and shape, and is intended as a linked, short representation of a conceptual unit.”

Image for post
Cards come in many sizes and forms

In my relatively short, but exciting design career, almost every project I’ve worked on invariably involved the design of cards. One of my very early projects was a redesign of a “post” card for an e-learning forum. Not to mention, I spent the majority of the past year solely focused on bringing various types of cards to life on the GoIbibo app home screen.

I’ve come to realise that cards are one of the basics to master when it comes to interaction design and visual design.

Cards are the building blocks of a web-based product, be it an app or site. They’re like little Lego pieces for a user interface.

When it comes to presenting a heterogeneous collection of data, there are very few sites or apps which I’ve encountered which doesn’t use some form of card layout.

Basic Anatomy of a Card

Image for post
Note: The placement or arrangement of the various elements may vary

1. Title Text

This is your card summary. At a glance, a user must know what the card is about. Titles should be short and to-the-point.

Determine whether your title requires one line or two lines, and what happens in case of text-overflow (e.g. truncation, ellipsis, etc).

2. Secondary Text / Sub-title

Use this to provide more information. Secondary text may get ignored when the user is scanning, so keep the copy crisp.

Image for post
Pro tip: Adjust the width of your text field such that there are no orphaned or hanging words in the last line.

3. Tertiary Text (Optional)

If more information needs to be conveyed to the user, a tertiary line of text can be added. This should be non-essential data.

Make sure to maintain a visible hierarchy between all thee tiers of text.

4. Media

This could be an image, illustration or video. The media could span the entire container, be part of the background, or be confined to shape within the card. In most cases, a card contains a single hero image.

5. Call to Action

This could be an explicit button, or a link, inviting the user to interact with the card. The card itself may be clickable in some cases, or an affordance is provided in the form of icons e.g. chevrons and arrows.

6. Tags / Labels / Status Indicator

Cards may require a tag or indicator to make it stand out in a crowd.

Examples of these are:

  • Tags like “New” / “Updated”
  • Status indicators like “Live” or “Expired”
  • Labels like “Most Rated” or “Exclusive”
Image for post
Commonly used tags in consumer apps

Tips to design your cards

Finally, coming to some things to keep in mind while dealing with various types of cards. Of course, there could be many more, and the rules are in no way limited to only this list.

1. Is it absolutely required? If not, discard it

Don’t get carried away and stuff your cards with excess information. Card complexity varies with context — they can be simple or very detailed. Make a list of all the data points you have, and for each list item, ask: is this necessary or can I remove it?

Image for post
The same sellable item (KFC) but the card changes based on the use case

2. Identify ‘hooks’ in your card

Depending on the use case, your card should have one or more ‘hooks’. These are the hero elements of the card. Users will scan these during their decision-making process.

Image for post
If I’m browsing hotels, my hooks are the price, and then the picture. But if I’m ordering food, I’d rather go by the image and the restaurant name.

3. Make your cards scannable

The overall structure of the card must not change. Familiarity and repetition is key — your card should be easily scannable by the users’ eye.

A user should be able to predict where the Title of the 100th card would appear by simply looking at 2–3 cards.

4. Ensure your card scales

While designing, consider all edge cases e.g. text overflows, truncation and image scaling factors. Your card template should look good for both the best and the worst case — if a card has very little data, if the content is not available or if images are of low-quality.

5. At the same time, keep things interesting

When things on your page start to look the same, the user loses focus. That’s when you break the pattern and grab their attention.

Cards withina set must be uniform, however, there need not be uniformity across different sets.

Play with visuals — Some cards may have rounded corners; some may have a shadow. Use differently shaped cards. Some commonly used shapes are circles and rectangles: don’t hesitate to experiment.

Image for post
Different shapes of card elements used on GoIbibo & CRED

6. Define behaviour and limits

Before handing off your design for implementation, ask yourself:

  • How would this look if there were only one or two cards?
  • How many cards go in a line?
  • In what order will these cards be sorted?
  • Which part(s) of the card are clickable? Is the whole card clickable?
  • What happens on-hover?

Ask the questions, and define the rules.

Image for post
Hovering on a Netflix card plays a video preview, and brings up additional buttons

7. Don’t forget Accessibility and Localisation

When a visually challenged user interacts with your card, they must be able to make sense of the information in an orderly fashion.

  • Define alt text for media elements and links, and a tab order for the elements within your cards.
  • Make sure user is able to jump between cards in a set, and is not forced to tab through each and every individual card element to proceed.
  • Ensure clickable areas are fat-finger friendly.

Apple recommends a minimum target size of 44 px by 44 px, while for Android it is 48dp by 48dp

If your card will be localised into other languages, then keep character count and legibility in mind. e.g. Chinese characters take up more space than Latin scripts.

Image for post
Pro tip: Avoid the card design on the left. Converting to languages which read right-to-left (e.g. Arabic) will be a nightmare. Try to follow the card design on the right.

In order to innovate, we must think out of the box. But, before breaking or bending rules, we must first learn and master them. Once you’ve got most of the basics right, designing cards will be a piece of cake. Good luck!

References:

  1. https://www.nngroup.com/articles/cards-component/
  2. https://material.io/components/cards
  3. More about accessibility: https://webaim.org/
  4. More about localisationhttps://www.interaction-design.org/literature/article/localizing-the-user-experience
This article was first posted on this link.

What Are 10 Things You Should NOT Do While Creating a Website Layout

0
Photo by UX Indonesia on Unsplash.

One of the most challenging things to do when it comes to the website is creating a website layout. Many companies struggle to generate a website that attracts enormous conversions and a lot of revenue. Your website should be visually appealing, but it loses its point if it fails to make money. Many businesses think that they should focus on the design to make it look good. But they fail to understand that the design should be such that it will offer you maximum conversions. Such mistakes damage your business in the long run. Such problems tend to chase the website visitors away and may cost your business tens or hundreds of thousands in lost revenue.

To increase your visitors and revenue, you need to stop making some of the most common mistakes made by business owners today. It is a little challenging to find errors and fix them, but it is not an impossible task. If you apply consistent efforts, you can increase your lead generation, website traffic, and conversions. This blog takes you over the things that you should not do while designing a website. Let us take a look.

1. Unresponsive Design:

Unresponsive Design

One of the most important traits your website should have is responsive design. Responsive design is one where your website design adjusts itself according to the device or the screen that the user is using. And responsive design is listed as one of the most significant features of the website layout. The responsive design of a website makes sure that every user on the planet can access your website, irrelevant of the device, or the location of the user.

It would be best if you had your website design optimized for various devices. These devices can range from a laptop, desktop, mobile phones to PS4 device. And this is something that Google insists on having, as far as your website is concerned. Your website should have the kind of optimization where the same URL is used, even if the devices change. And the layout of the website varies according to the CSS file code.

2. Absence of Favicon:

Absence of Favicon

Favicons are the icons on the top left corner of the browser tab that tells the user about which website is open in that tab. It would be best if you used favicons while you design the website so that it is easy to identify the website by merely looking at the favicon. So many users prefer to have a lot of tabs open in their browser while they read something on another tab. In such cases, you can take a look at the favicon and see which website is accessible in that specific tab. These favicons are not only useful when you are browsing a website while multiple websites are available in other tabs. When you are going through the bookmarks or browsing history, favicons help you see which websites are those.

It is necessary to have a favicon through an SEO perspective because it suggests that the site is usable and leads to a high rank in the search engine results page. It saves the user a lot of time while they are browsing and going through multiple websites. Hence, if your website has no favicon, there are chances that the user may or may not consider your website worthy of visiting.

3. Generic 404 pages:

Generic 404 pages

404 pages are the error pages that your website should show when there is an error finding the page that the user is looking for. The error 404 is generally translated to page not found in the world of website design and development. 404 pages silently kill the traffic of your website. And users who hit this page almost always choose to bounce off your website. Moreover, these users don’t take any initiative to resolve the problem.

Hence, if you have 404 pages on your website, you should give an action that a user can take. For instance, you can tell the user to report the broken link or take the user to the page from where he landed on this page. You can also choose to have the user reach back to the home page from the 404 pages. If you are including 404 pages on your website, make sure to include proper CTA to direct the user.

4. Using Carousels on your home page:

Using Carousels on your home page

A revolving slider is called a carousel, which a website uses to display its top-selling products or professional portfolio. You can choose to use a carousel on your website, but it is necessary to show relevant information in the carousel. When you go through the things in a carousel, you can choose to revolve the carousel when you want to see something on the other side of the carousel. As far as you can move the items in the carousel, things look good.

But the trouble starts when the carousel starts moving automatically. This doesn’t give your user a chance to see the products or items correctly. Moreover, these days ads also look a lot similar to carousels that revolve. This causes banner blindness, and the user may think that the carousel is an advertisement. Hence, the most important thing that a user should notice often goes unnoticed. A carousel is known to distract or irk the user, and this may result in a customer going without converting on your website. Therefore, you should use the carousel only if it is necessary.

5. A slow website:

A slow website

Nothing turns a user off than a website that takes ages to load the web pages and the web page elements. In the fast-paced Internet, if a website takes more than 4 seconds to load, it is considered slow. In a study, Google found that a maximum of websites took seven or more seconds to load. What do you do when you encounter a slow website? You leave the website and go to another website that seems comparatively faster.

If you want to keep your visitor on your website, you should develop a website that takes 3 to 4 seconds maximum to load everything that you have. If you don’t serve the user in this window, your user may consider your website slow. He may choose to leave your website. This is called the Bounce rate. Like the bounce rate of your website increases, the traffic of your website decreases. Moreover, if your website has a high bounce rate, it can hurt your ranking on the search engine. With an increased bounce rate, the search engine thinks that your website is too slow and may rank your website lower than it should be.

6. Low server response time:

Low server response time

A server is a place where the browser requests or summons a web page of which the user has asked for the URL. The time is taken to render the browser’s web page when the user requests the web page is the server response time. As the server response time increases, the website generates slowly. A slow server response time is indicative of an underlying problem related to the performance.

Ideally, the response time should be 200 ms or lesser when the website is requested from the server. There can one or more following issues that lead to slow server response time:

  • Slower application logic working behind the website
  • Database queries are slower.
  • Issues with frameworks and libraries.
  • CPU resource starvation issues.
  • Issues where memory starves.

Faster response time is the key to increased website speed and improved website performance. It would be best if you always looked at the above-given issues before hosting your website on the server. If these issues are ignored, your website can lose traffic, and in turn, you may lose the conversion.

7. Using too many different fonts:

Using too many different fonts

The selection of the fonts is essential when it comes to putting textual content on your website. The fonts should be such that the text should be readable. They should neither be too small nor too large for the user’s reading preference. It is common sense to use similar fonts for similar purposes. For instance, all the headers should be written in Times New Roman fonts. But subheaders can be in Arial fonts. The textual content on the website should be restricted to a few font variations.

Using a lot of variations in the fonts can confuse the user when he is on your website for reading the content. If you use a lot of fonts, the user may be distracted and may lose the understanding of the hierarchy of the content. Moreover, it reduces or weakens the cognitive fluency of the user. Using different fonts may break the user’s focus while reading the content of the website. Hence, avoid using too many different types of fonts on your website.

8. The content is not focused on the visitor:

The content is not focused on the visitor

Content is the heart of the website. The readers prefer reading the textual content on the website rather than focusing on the images on the web pages. A piece of content is the small part of the text that explains the user about the website. For instance, if your website deals with the coffee products, it is imperative to write down about the coffee types that your business can offer to the customer.

Hence, the textual content should be visitor-centric, where you take care of what the visitor needs to understand about the product. If the visitor understands perfectly what you have to offer, it gives him an opportunity to convert. Through word of mouth, you can have the possibility of having more traffic on your website. You should always have the kind of content that explains how your website can benefit the user.

9. Using whitespace poorly:

Using white space poorly

White space is the space between the different pieces of content and the images on any web page. It allows the user to focus on the textual content because of the existence of white spaces. White space increases readability, comprehension of the text, improves user’s attention, and increases clarity. With white space, you offer a separation between the different types of content.

If your website doesn’t have enough white space, it means that your content is taking up too much space on the web page. With a lack of sufficient white space, your web page may look cluttered. And no one likes to look at things that have been poorly organized. You should pay attention to managing the content wisely. Moreover, if you sardine the page with too many elements on the page, the user may not be able to find the piece that he is looking for. Hence, with a good amount of white space, there are so many benefits to your website’s user.

10. Poor Grammar:

Poor Grammar

The most significant part of any text is the grammar. If your text contains grammatical errors, it turns a user off instantly. And nothing can revive the wrong impression once it is created. Poor grammar destroys the image of your business as soon as it is made. Moreover, good English is always required when you are targeting the global business sector.

It is imperative to have the textual content in good English that has correct spellings without any grammatical errors. Hence, you should always make sure that the content you write on your website is free from grammar issues.

Conclusion:

The design of the website is as important as the back-end that you use to retrieve the information from the database. A website is an extension of your business and helps you to create a digital footprint. You can extend or enlarge the digital print with the way you design and develop your website. A website is only successful if it is made using specific standards during its creation. As a web designer, you have to understand the website design from the user’s point of view. And designing after understanding the user’s mental model helps you in creating a website that resonates with the user. This can benefit your business mainly in the long run and can bring you a lot of conversions.

This post was first posted at here.

2,482FansLike
637FollowersFollow
1,189FollowersFollow
202,000SubscribersSubscribe

Most Popular Articles

Entrepreneur Corner