Categories
Entrepreneurship Software

From Idea to Working Prototype: Startup App Development Guide Initial Stage

A new app is born every minute. Sometimes it is a gaming app, >or a social network, >or a business app developed to meet certain objectives. However, all these apps have one thing in common: the initial development stage. It all starts with an idea, which moves on to a strategy, and eventually it reaches the stage of a prototype, where the idea is fleshed out for the first time. In this article, we’re going to take a look at these first few steps of the app development process.

The idea

Calibrating with the development team

The first step of the app development process involves relaying information regarding your company, business objectives, target market and competition to your development team. This means that you will have to go through an initial calibrating stage, where you will provide the development team with relevant business documentation such as your business plan, pitch deck and business model canvas. A request-for-proposal is also very useful at this stage. We’ve covered this area of the development process in depth in this article.

Strategy

The previously mentioned documentation should cover the competition, but it would be useful to dig a little deeper. There are three main factors that should be taken into account when checking out a competing app: the number of installs, the ratings/reviews, and the history of the company behind the app. Most of this information can be accessed for free at the app store, and on the company website (where you will find case studies, white papers, and announcements on their blog).

Once you’ve found the top competitors within the market, you want to study their apps and see how well they address customer needs. This will help you find new niches and angles of attack, where you can provide more value through your app.


Next, you want to consider monetization. You will sometimes develop internal apps, which are meant to improve business processes such as HR, or they may be meant to mobilize the sales force. In other cases, you might want an e-commerce app, or a client-facing app meant to augment business services and act as a marketing tool. You also have a third kind of app which directly targets a segment of the market and which benefits from direct monetization.

Depending on the type of app that you end up developing, you have several monetization methods at your disposal, including in-app purchases, advertising, premium features, subscriptions, and selling user data.

You then want to take marketing into account. You will have to figure out a marketing strategy, preferably an iterative one that will allow you to increase app adoption, user retention, conversion rates, and other relevant metrics. This could mean adding an on-boarding process, push notifications and a variety of other features.
Finally, at this stage you want to consider the Minimum Viable Product (MVP). The main idea is to determine and understand your app’s key functionalities, and prioritize a list of features that will go into the MVP first.

This article presents a linear approach to executing the strategy. There’s also another way where the whole application scope doesn’t have to be tackled at once. The process is followed only for the functionalities within the scope of the MVP, then the app development starts immediately and further functionalities are iteratively added to the sketches, wireframes and prototype while the MVP may already be monetized.

From Idea to Working Prototype: Startup App Development Guide Initial Stage

Prototyping

Between the idea, and the MVP, you have the prototype. A prototype is a fleshed out version of the app’s UI, meant to test for functionality and user experience issues at a very low cost. Prototypes are perfect for iterative design and development, being less complex than an MVP.

Identify key functionality features

The first step of prototyping is to identify the key features of your app. If you’ve gone through your strategy in the previous development stage, you already have a prioritized list of features written for your MVP. This list will work here as well. Take the top 3-4 features from your list, and consider how they would be accessed and where they’d be in your UI.

Create user personas

User personas are a powerful design and marketing tool, and they are meant to represent the major user groups for your app. Your app can target many different user segments, but it’s important to categorize these segments in a way that translates into UI and functionality decisions.

For example, you’re building a productivity app that targets both 20-something young adults in college, and 40-something soccer moms looking to set a schedule for their children. The key differentiating factor between these two user groups may be the level of technological competence, or it may be the desired functionality features. By understanding your user personas, you are able to make important design decisions early on, where you have very low costs of implementation.

Sketch out the primary screens

Once the conceptual work is out of the way, it’s time to put something on paper (digital or otherwise). This is where the sketch comes in. The sketch is a perfect tool if you want to understand how elements will be positioned on the screen. Sketches are dirt cheap to create, and they can be used to get buy-ins from stakeholders, before moving forward with the app.

Turn the sketches into wireframes

Once the sketches have been approved by the stakeholders, it’s time to start the wireframing process. Wireframing is a low-fidelity representation of the UI, but it still lacks functionality. Some companies will skip the sketches and dive straight into the wireframe. However, fixing a wireframe is slightly more time consuming than fixing a sketch.

Create the prototype

Wireframes can be easily transformed into a prototype by adding basic functionality and interactivity. A prototype will help you calibrate the UI and improve the user journey. The main advantage of taking this route, instead of jumping straight into the MVP is cost saving. Each step of the way allows you to calibrate the fundamental elements of your app for a very low cost, a process which could otherwise be very expensive if complex code and design is added to the app ahead of time.

User testing and recalibrating the prototype

From Idea to Working Prototype: Startup App Development Guide Initial Stage
Apps concept drawn on a notepad placed on a desk

Once the prototype is up and running, it can be shared with stakeholders, users and investors. This is also the point where you can start the initial user testing, and calibrate the prototype to perfection. Based on user feedback, you will be able to go into the MVP with a market tested UI and UX, and start adding core functionality to your app.

Prototyping tools

There are several prototyping tools out there, which allow your team of designers to create prototypes in an expedient manner. In some cases, some of these tools are so accessible that they eliminate the need to use sketches before designing the actual prototype. Here are 5 of the most popular tools today:

Balsamiq

Balsamiq is a tool designed to build wireframes, but it has a feature which allows you to create interactive prototypes that can be used for testing and demos. The main strength of Balsamiq comes from the community, which generates a ton of content that can be used to speed up the design process. You will find assets, templates and other elements online for Android, iOS and BlackBerry.

Justinmind

Justinmind also works with wireframes, and the great thing is that any change you make on the wireframe is reflected on the prototype immediately. This tool also includes simulations for various gestures such as swipe, tap and hold, and others. To top it all off, you have access to a large library of user-generated pre-built widgets to speed up the design process.

Moqups

A free to use tool, Moqups is one of the most accessible items on this list. It has an easy-to-use interface that comes with a lot of pre-built materials such as image placeholders, sliders, and others. You will also have access to numerous templates that come with platform-specific UI elements. The only downside to this tool is that it only produces wireframes, which then have to be transferred to another tool, in order to add functionality.

Proto.io

Proto.io is a prototyping tool designed specifically for mobile applications. This tool allows you to create prototypes without any code, and it has a great feature that allows testers to add feedback as they are using the prototype. It is also very accessible. The entire prototype can be developed from a single screen, where designers add the various elements of the app and determine the interaction between them.

UXPin

UXPin is available for multiple platforms, and a wide range of resolutions. The main advantage of this tool is that it has strong version control, which makes iterative work easy. On top of that, it has useful features such as real-time commenting and editing. UXPin is the tool to use if you want an emphasis on rapid UX development.

Conclusion

In order to ensure maximum cost efficiency, and a perfect market fit, it’s best to have an initial development stage that includes prototyping and an MVP. If the development process starts with a laser focus on the target market and its needs, augmented by iterative development, the resulting app will be much cheaper to develop, and it will be much more effective at achieving business objectives.

Categories
Entrepreneurship Finance Financial Services Software

Micropayments: How your Business Can Benefit From Them

To understand ‘Micropayment’ is to understand the technology connected to it. Technology is constantly improving, affecting every aspect of our lives. One of the biggest challenges in life is simplifying our finances and the best way to do this is via Fintech (financial technology)- a developing area that brings together the best financial products worldwide at the lowest possible price. A crucial part of this is the processing of very small fees that cannot be handled by traditional credit card companies.

This has energized micropayment systems and the whole infrastructure connected with it. While earlier sending small amounts of money was seen as costly, because you still had to pay transaction fees, there were some indicators that micropayments could work:

The popularity of mobile devices

Access to financial services was limited by a lack of technology and the appropriate devices. As a result many transactions were completed on a cash only basis when they occurred outside of the normal banking system. However, the huge popularity of mobile services created an opportunity to provide financial services over its wireless network. Research showed a significant and growing market demand that was particularly important for all GSM (Eng. Global System for Mobile Communications) players. This demand intimated that it was technically feasible and profitable to deploy financial services over mobile networks. The big picture showed that mCommerce might fill a major service gap in developing countries that is critical to their social and economic evolution. Practice shows that the range of features accessible in particular environments can be applied elsewhere if the target markets are similar. With only minor variations from the main stream, the features of all systems need to include:

  • Over-the-air prepaid top-ups using the cash already in the account (like ‘blik).
  • The ability to transfer any amount of money between users’ accounts.
  • Provision for cash deposits and withdrawals.
  • The ability for a third party to make deposits into a customer account (employer, family member or a microfinance organization).
  • The ability to charge for bill payments.
  • The ability to make retail purchases at selected economic outlets.
  • The ability to transfer airtime credits between users.

Since all the above points are now achievable, micropayment has recently been reconsidered as a viable technology, largely due to the development of cellular networks. The main reason for this is not technological but more down to simple economics. Independent online service providers receive much revenue from mobile users. Mobile networks often charge users for admission to low-cost services on a fixed network. Alongside this many applications require a solution for the commissions placed on small transactions containing mass data storage and message exchange.

Insomuch as micropayment systems are designed to purchase exceptionally low-cost items, it is crucial that the value of each individual process remains very small.

online micropayments

Ad blockers plague

As ad blockers have gained popularity there has been renewed interest in micropayments. Originally the main focus in design was on content but emerging technologies using block chain have created amazing opportunities for artists, journalists, etc., as the content no longer has to be ad-friendly. Micropayment has allowed the author to be in absolute control of content distribution and its economic worth. Simply put micropayments drive browsers, empowering creators and the audience that follows them.

Closer examination reveals that when ads are kept out of the way, micropayments allow the author to more easily control their own income. They help reveal the true value of content which assists in ascertaining the authors’ economic sustainability. It is expected that micropayments will continue to evolve just as it did from paid for ads into its current form.

Technicalities – the protocol

As was previously established, the main issue with low-value transactions has been that processing and transaction fees diminish the final settlement amount. Payment processors place additional costs for a multiplicity of reasons including infrastructure costs, administrative costs, and paid mechanisms for fraud prevention and dispute resolution. In the past two decades much research has been undertaken on using digital communications and cryptography to reduce or erase these costs. For banking facilities these fees ideally need to be down to the fraction-of-a-cent range.

It can be expected that content servers for the global information infrastructure will soon operate billions of these low value transactions that are computationally complex. Whilst costly cryptographic protocols are now impractical and obsolete the micro-payment process can be bootstrapped with already well-known payment protocols for larger amounts, but does not depend on them for each micro-transaction. Special attention is given to its integration into IBM’s Internet Keyed Payment Systems (iKP) at its most basic level.
The product itself allows for the possibility of a payment protocol in wireless networks. The protocol usually assumes two techniques of transaction execution:

  • In on-line mode with the participation of a trusted website – for macropayments,
  • In off-line mode using electronic money, mainly for small value transactions – for micropayments.

The main purpose is to predict scenarios of various events and transactions in the protocol – and to be able to analyze any part of it. Paramount within this are the aspects of payment security such as asymmetric cryptography techniques, public key infrastructures and many more. Needless to say that for the evaluation of any protocol, performance must perfectly blend with the criteria specific to the wireless environment.

micropayments platforms

In summary

In summary micropayment platform schemes that are dedicated for processing small transactions work in two main ways.One is that a seller or service provider establishes an account with a third-party micropayment provider who accumulates, stores and distributes the monies accrued. Both seller and user/buyer are required to establish an account with the same micropayment provider for easier and safer implementation. The provider manages a digital wallet where all the payments are stored until they get to to a larger amount and can then be sent to the recipient.As an example let’s say a site called ‘The Freelance’ is a market workplace for freelancers to connect with companies to develop small projects. A company hires a developer from ‘The Freelance’ to make few changes on their website for $1/hr. If the developer works on it for 8 hours, the task giver – the company – pays ‘The Freelance’. In this case ‘The Freelance’ collects all the fees. It also stores the remainder in a developers’ digital wallet. If a developer is good and garners many fees, ‘The Freelance’ accumulates IOUs to the point where the wallet contains a significant sum, say $500, which is then sufficient to be withdrawn. ‘The Freelance’ then pays the developer directly into his account.

The second is that micropayment systems can operate as a system for prepaid transactions. A user/buyer makes use of a micropayment processor account by depositing in advance a certain amount of money in it. As long as the seller (the other side of the primary transaction) uses the same account provider everything works smoothly as the user’s account with the provider is easily debited for the amount of the purchase. Simply put the payment is made by using a micropayment processing account. Let’s illustrate this with the most common example: PayPal. PayPal is a very popular micropayment provider who has its own requirements for micropayments regarding the maximum amount of the transaction. According to PayPal a micropayment transaction is less than $10. So let’s imagine that a PayPal user decides to deposit $200 in their account. From that point user can become a buyer by purchasing an item for $5 from a webstore. The purchase price is debited from the PayPal account and used to cover the payment. On completion the balance in the buyers’ PayPal account will be $195 minus PayPal’s fees for micropayment transactions, the webstore’s balance account is plus $5, and PayPal gains the provision fee.

In all these scenarios, commercial organizations have much more to gain by addressing the problem of fiscal cash transactions by micropayments. Cash is not only more difficult to use, but you waste a lot of time moving it outside the banking sector.

In the 21st century no country exists beyond the scope of the banking sector and so for their own economic progress they should be encouraged to move away from cash. The extra motivation here is that the resulting low cost solutions and mechanisms that work in these environments can then be efficiently applied in all types of developed economies.

Want to know more about Online Payment Solutions and our recommendations?! Read this post:

How to Choose Online Payment Solution!

[contact-form-7 id=”13387″ title=”Contact download_8_reasons”]
Categories
Design Software

7 Tips for Good UI Design

A good UI design increases conversion rates. That’s simple. But how does human-oriented design play into it? The mobile revolution, as well as the web revolution before it, constantly forced us to keep restructuring and reconsidering what simplicity means for human-centered design and practically every experience we create. In the UI user community, we’ve launched a trend called “human-centered” that helps you focus and lead every design project in a particular way.

There are numerous human experiences associated with using an application. They allow you to take a different perspective towards various projects to see how one solution is better than the other. The best ways of solving problems should be based on human needs. Ideally, you should fulfil those needs in a way that involves best practices and technological innovations.

Our team at ESPEO is working daily to accelerate UX performance at the user interface level, understand how to integrate the project with the UX toolbar and make sure that we create our products in a comprehensive way.

user interface design

Tip one: Let yourself be direct – and stay honest

The rule of thumb is to be direct instead of indecisive. This way, you convey your message with certainty and confidence. Your design presents ideas or products determined to contribute to a user’s success. Leaders don’t end their messages with question marks, using hedging expressions such as “perhaps”, “maybe”, “interested?” and “want to?”. Your UI can be bit more authoritative.

Honesty with a user pays off, so in the whole narrative consider social proof instead of just talking about qualities. Nothing will increase your conversion as seriously as being sincere with the users. Showing endorsements and talking about your offering gives a significant performance for a call to action. Therefore, point towards proof of customer satisfaction via references or testimonials. If numbers are large – consider visualization of the data, as it validates your point in a clear way.
 

Tip two: Conversion – ease of use

A good way of achieving that is simply trying out a one-column layout instead of multicolumn. A one-column layout gives clarity and a more consistent narrative. Users have an easy path to move into a predictable scenario, whereas a multi-column approach moves the users’ attention onto other features. Therefore, there’s a great risk of being distracted from the core purpose of a page. Lead people with plain content and a smooth experience, and, at the end, a visible call to action.

Features of your own design style such as color, depth, and contrast may be deployed as a reliable tool to build communication with a user. With basic elements of specific design, users may be able to follow the fundamental language of navigating in any interface: what can I do, how can I do it? This needs a specific road map containing styles of clickable actions (links, buttons), selected elements (chosen items), and views of plain text. Each style should be easy to differentiate from the other in order to be applied consistently across an interface. This rule, if applied properly, keeps users happy and eager to interact further.

Looking for more Conversion tips? Check out our article: How to optimize your ecommerce page for better conversion.

UI web app

Tip three: Uniting similar functions (merging!)

With every design, it’s easy to repeatedly create similar sections, elements and features which all have the same purpose. It’s the same force for the whole universe: entropy – the disorder and chaos of matter – increases with the volume of information. Uniting similar functions instead of fragmenting the UI will clear out some design complications: remove duplicated functions labelled in various ways, so it doesn’t clutter the content. In a few words, the more UI fragmentation there is, the higher the learning curve is for your users to catch up with. To prevent UI refactoring, the key competence is to merge similar functions together.

Repeating your call to action is a completely different case. Repeating the CTA is a strategy that is more applicable to longer (or wider) content. It can be also repeated across numerous pages. Naturally, users will be frustrated with one item persistently displayed a few times on one view. The wise choice in all the noise is to have one soft actionable element at the top, and second prominent one at the bottom. This is because users reaching the bottom of page seem to pause and consider their next step. So, that division has a great potential to repeat a solid offer or close a deal.

Tip four: Expose the options (have a clear view)

The revolution of pull down menus hides a set of actions which are the proper goal of every page or app. It also introduces the unnecessary effort of searching and discovering functions. All those actions are supposed to be centralized, almost like an app’s ‘spine’, so the scenario of user’s path keeps all the goals in the right order. Clarity and space for content is needed to bring attention to the right places. Possible actions should be visible upfront in an obvious way. On the other hand, the options that don’t need prediction or don’t require learning (as in sets of date and time references), can be placed in menus.

Maintaining the focus on goals is a demanding task for designers. It’s much easier to drown the user with links. It’s easy to create a page with lots of links going left and right in the hope of meeting as many customer needs as possible. If, however, the designer is a true artist, he or she is capable of creating a page with a wide content volume built towards a specific call to action at the bottom. Caution is required at every step, because any link above the primary CTA increases the danger of taking the users’ attention away from established purposes. Users then simply veer into directions they weren’t primarily intended to follow. The mission of lowering the number of distractions like the number of links on a page, and possibly toning down the discovery style pages (a bit heavier on the links) can be achieved with tunnel style pages (with fewer links and higher conversions).
 

Tip five: Showing state and benefit (give the users the tips and feedback they need!)

A nice way of building an understanding between users and designers is an UI with different states of displayed elements (read or unread emails, sent or packed orders). The customer feels secure with the knowledge of an item’s condition. The message about its state must provide the kind of feedback which is expected. It also brings satisfaction for users, as they can establish if their actions were successfully carried out, or if it’s time for the next step.

And here we have another piece of truth: buttons which reinforce a benefit might lead to higher conversions. Users simply know what they want. The designer is supposed to know the action from which the user benefits and put it right on the CTA. It’s all about looking at the ‘transaction’ from the right perspective. The benefit can also be placed next to the CTA, as a reminder why they are about to take that action.

Tip five: Showing state and benefit (give the users the tips and feedback they need!)

Tip six: Gradual engagement

To build interest and gradual engagement, some subtlety is required. Instead of a pushy signup form, there must be some ease of use. The expectation that clients sign up immediately may scare them off. A page or app can be an opportunity to show them the product’s capabilities or a chance for them to perform a task through which something of value is demonstrated. It can build excitement and curiosity alongside initializing interactions.

These actions lead to a personalization of experiences. At the end, the user interacts with your product and sees its internal values. Gradual engagement is really a way of building an understanding of the product or service without conscious acknowledgment. It is a great way to postpone the signup process and prolong the user’s attention through using and customizing the application.

Tip six: Gradual engagement

Tip seven: Recognition to recall

This principle of design is grounded in psychology. Psychologists suggest that when people have a choice, it’s easier for them to identify with something already known and immediately recognizable. To make an experience easier, recognition should rely on hints which help us consider our past experience. Recall requires us to probe the depths of memory all on our own, alternatively, it requires some guidance. This is similar to multiple choice questions on exams – they can be faster to complete than open-ended ones. The challenge with recognition is to give users recognizable items which they have been exposed to before, instead of expecting them to have an idea of their own.

Tip seven: Recognition to recall
Looking for more tips for UX and good UI design – read about UX Desing Trends to watch in 2018!