Mockup Builder Blog

Five Ecommerce Website Design Mistakes You Should Avoid

Fri, 03 Apr 2015 09:25:06 +0000

There is no need saying that design is the main attraction of any web-based store. Consequently, if you want to attract more visitors and increase sales level, having a properly designed ecommerce website is an absolute must.

Here are 5 common ecommerce site design mistakes to avoid:

1. Poor Quality Images

Quality of images is undoubtedly crucial when it comes to online shopping. When buying goods online, the only way to take a good look at something you want to buy is to look at the picture. Poor quality images do not allow doing this, so without getting a decent visual information about the product, your customers will simply look for more quality images at the web stores of your competitors. The latest research shows that about 67% of online shoppers pay attention to the quality of product images, as it helps make the right choice. So, do your best to provide customers with quality product images.

2. Improper Product Information

Unlike brick-and-mortar stores customers, online shoppers are not able to touch the product or read label information. Thus, your task is to provide them with all necessary information. It is highly important to provide a detailed information about each product you sell, as customers make their purchasing decisions basing on the product information only. You will hardly buy a product without getting a detailed information about it, so give your customers a chance to make a deliberate choice.

3. Absence of Contact Information

Customers want to know what company they are dealing with. Before making an order and providing credit card information, you customers will want to make sure they are dealing with a real and reliable store. They need to know whom to contact in case of any questions or problems. Do not hide your contact information and post it in a prominent place. The best place for contact information (phone numbers and email address) is your footer or the top of the sidebar.

4. Complicated Sign up Process

Too long or complicated sign up process is one of the biggest mistakes an ecommerce website can make. When designing the sign up, make it as simple as possible. All you really need to know is a customer’s name and email address, so do not ask too much.

5. Improper Website Search Engine

The latest researches show that ecommerce websites owners lose about 50% of sales only because buyers are not able to find what they need. By providing your customers with a decent search engine and making website navigation straightforward, you have excellent chances to increase your sales level and revenue.

[jetpack_subscription_form]

Using Prototypes for the Site Conversion rates improvements

Fri, 03 Apr 2015 09:21:01 +0000

One of the most important success indicators of any ecommerce business is conversion. Conversion - is the number of orders (or other actions on the site) per 100 site visitors.

Measuring conversion is possible with Google Analytics, by configuring goals, or with ecommerce tracking, if you have an online store.

To test website conversion it is necessary to configure A/B testing, which can be done for free in Google Analytics.

Step-by-Step Testing Process

Create 3-4 prototypes of a certain webpage. Let it be a product page.
Send the prototypes to a designer for a page makeup. Post all variants at the website.
Evenly redirect the traffic to these pages (Google Analytics will do this for you).
Identify the page with the highest page and move to step 1.

Please note, that to get accurate results, using this experiment, it is necessary having at least 1000 units of traffic.

If you cannot afford hiring a designer, creating 3-4 layout options of the same web page and repeating the same steps in a circle, you can create 3-4 simple prototypes at mockupbuilder.com. By visiting this page and using PDF editor you will create a clickable multipage prototype.

You will need and a target group of testers, about 5 people for each prototype. Testers get assignments that they perform on the prototypes and you assess what task are done properly and what are not clearly comprehended by the testers.

The main drawback of this approach is that prototypes are usually uncoloured and do not include real site images, which may introduce an error. Thus, when creating a prototype, try making it as similar to the tested page as possible.

[jetpack_subscription_form]

Mockup Builder is back

Sat, 21 Mar 2015 20:54:22 +0000

Dear Mockup Builder blog visitors, application and website users.

We would like to share great news with you. We got an investor!It's exciting time when we are moving towards to our goals and mission.

Following are action items coming soon:

The outcome of investment is that Mockup Builder team will be releasing new platform and version of our application with cross platform support, we expect release in several months(due to early planning cannot disclose exact date).
Current version will be supported for quite long period of time, till the last paid customer.
We are back with blogging, we will tell more about mockup building best practices, mobile wireframes and tools
Other blogging subjects we will cover are startups, technical aspects of website building and hosting solutions, mobile development practices and approaches, trends in growth hacking and marketing.

Have a nice weekend!

CEO at Mockup Builder, Oleh Mykhaylovych.

[jetpack_subscription_form]

Effective product creation within corporation jungle

Tue, 21 Oct 2014 14:58:23 +0000

Corporation means an abundance of communication and collaboration. Internal communication within every big enterprise is often complex and can be really frustrating. The bigger the corporation is, the more difficulties you are likely to encounter conveying your message, especially when it relates to creative process.

Once being in the role of product owner I recall the weird feeling, as if I am in the middle of a game, something between a quest and hidden treasures hunt. The quest starts with the idea itself and the more interest it evokes, the bigger the crowd of managers and top-managers, involved in the process of getting final approval of the product, becomes.

Meeting by meeting we spend company’s money to do the best for it, but, weird thing happened, the product gets worse.

The situation described above happened years ago, before wireframes and prototyping era started. After almost half a year of frustrating meetings where we showed the designs and discussed the colors of various panels and buttons many times, me and the designers involved decided to picture the product in simple, black and white images. To my own astonishment it was not that easy. It appeared that the whole management team concentrated on not important details, while the real problem was neither in the colors nor in the button or panel size, it lay in the way users exploit our product. The evening we sat down with the designer to make my first ever prototype showed me a big picture, the one we all failed to notice during several months.

Simple black and white user interface was easy to grasp and it did not overload you with the unnecessary details, which seemed important to us for such a long time.

Product Creation

To be honest it was not that easy to convince the managers to meet one another. Everyone was already depressed with the result of work, many were sure we did everything we could, etc. It took me some nerves but the outcome was worth it. We indeed had our first ever productive meeting. Within a month we finished all the wireframes and, based on the previous experience, developed design which was approved in only a week of discussions. By the end of the year the Alfa version was completed and I consider it to be a big success.

To sum up, prototype is the most convenient and visually appealing way to present your ideas. Black and white design eliminates the colors discussions, where everyone wants to do the best in the designer job.

Good prototype helps you attract the whole attention and concentrate it on the really important stuff, it also helps you to overcome the obstacles of misunderstanding which happened a lot in the big and not that big companies.

The time described above did not have the software to do the prototypes. Now we have several tools worth buying but my own practice shows that the easier the learning curve for the tool is , the more attractive it will be for you and your colleagues, and, of course for your customers. So what to consider while choosing such a tool? The ease of learning and use, the collaboration and export possibilities and, the reasonable prices, of course. Make your choice and stay with us!

[jetpack_subscription_form]

Smart Startup

Tue, 19 Aug 2014 12:23:47 +0000

We, the Mockup Builder team, decided to share some personal experience with you, and we hope to read your comments with your stories and discoveries. We’ll start with the one about Smart startup.

I believe everyone in the industry did dream of building their own start-ups. Why not, it’s cool, it’s trendy, and after all it’s freedom. But what stops you? Time? Lack of knowledge? Week design or programming skills? Money? Whatever the reason is, forget it and simply start!

Open the browser, find out the trends and competitors, analyze them and do better! Are there no competitors at all? Cool! Actually there is no significant difference to your creative mind, whether your idea is already developed by someone or not. The right moment to start prototyping comes with the insight into the product you want to build. Don't hesitate, open your favorite super easy prototyping tool and go ahead! Create!

Smart Startup

As soon as you are done with the first ever mockup, ask your trusted friend to comment on it. You’d better not explain the purpose of the software or the difference between your idea and already-existing-someone-else one. Gather reviews and feedback, make improvements to your mockup, get better and better. Read press and follow the trends related to your product. Work with your prototypes and with some time you will definitely understand your product viability and potential or, what is even more, you are likely to find the much more interesting idea. Nonetheless, never forget to prototype and collaborate! The chances to get angel investment are really high with a thoroughly built prototype! Check out the articles below and... do start with your own product!

FORBES

Build a prototype product. Many entrepreneurs need capital to build a prototype product, yet most angels expect to see a prototype before they invest. Do what you can to demonstrate progress early.

http://www.forbes.com/2009/10/27/raising-angel-funding-entrepreneurs-finance-zwilling.html

Go 4Funding

In the start-up phase of an enterprise, a prototype of the business idea has been developed and the business plans and marketing strategies have been proposed.

http://www.go4funding.com/articles/when-do-angel-investors-usually-invest.aspx

Angel Investor Funding

You should accept the fact that having "a good idea" is often not enough to raise capital from private investors, and you should do your homework to provide "proof of concept" for your venture.

In the investing world it is well known that good ideas are abundant and well-done execution is rare. As such, you recognize that an idea alone does not create success.

The existence of a prototype or working model of your business' product or service can greatly increase your chances of attracting angel investors Ñ the prototype phase of your business should be financed by yourself, friends, and family.

http://www.angelinvestorfunding.com/tentips.htm

Stay tuned for more information . The upcoming posts will be about winning strategy for the corporations, winning processes for the outsources and the ways prototyping can help freelancers.

[jetpack_subscription_form]

Wireframe examples – James Rice

Tue, 15 Apr 2014 08:39:28 +0000

Today in out section "Inspiration for wireframing" we want to present for you work of the designer James Rice. Now he is working in the company Mudlark, experience design and multi-platform production company. Mostly he is working on the web projects creating visual styles, identities, UI design and wireframing. As James has great experience have great development skills.

Below you can find latest sketches done by James for one of his projects. We hope that they bring you some portion of the inspiration in future user experience experiments.

James personal site: http://itsjam.es/
James on Dribbble: http://dribbble.com/jamesarice
James on Twitter: https://twitter.com/jamesarice

Create your wireframe now!

[jetpack_subscription_form]

Wireframe Tutorial

Wed, 09 Apr 2014 15:54:19 +0000

Any good design process must start from wireframing. This stage allows you better understand information architecture and easier plan how the future web site will be look like. It also shows how the users will interact with the information on the site. If you haven’t use wireframe till now, it is the best time to start. We hope that information bellow will help you.

Import this template for free:
http://mockupbuilder.com/Gallery/881

In some point of view, wireframe resembles blueprint in the architecture. Before starting building the actual house you need to see how it will look like in two-dimensional space. Before starting creating design or even write a single line of code you need to know how the information in the future website of in the mobile application will be organized. For this purpose, you need to create wireframe.

Wireframing is not only showing how the future website will be look like. In many cases, it also provides useful information about the ways in which the user will interact with a website. For example, you can provide the menu behavior on your wireframe.

Import this template for free:
http://mockupbuilder.com/Gallery/882

The type in which information is presented in the wireframe is very helpful for the designers. They can plan the interaction and the layout of the future website without thinking about the typefaces and colors. If your users can’t understand what button they need to push when the design is in the black and white variant any color couldn’t help. Even if the button isn’t brightly colored, it must be eventually.

You can also think about the good wireframe as about good foundation in the building. Before you starting to choose the color of the paint for your bedroom, you need to know that your house will be safe.

Wireframe tutorial - Step #1: Catch Inspiration

Before starting wireframing look through some specific groups that contains examples of the wireframes that are done by other designers. In our blog, you can find inspiring samples of the wireframes in the section “Inspiration for wireframing”. Or you can look in the very popular group on Flickr I wireframes.

You also can look through some websites where you like how the information is organized. You can make the wireframes based on these websites and do some changes so the result will better ensure your purpose. The tool Wirify can help you understand information structure of the existed websites.

After you do this steps you can notice that in your heads appear understanding about your future website layout.

Wireframe Tutorial - Step #2: Process Design

Website creation can be done in different ways. Coding, different type of wireframing and visualizing can be done in a different arrangement. You need to find the way that will be most comfortable for you and most efficiency. Several examples of typical processes are provided below:

Well known company 37signals practices using the simplest scheme from the provided above. They use only to steps – sketching and coding, but a few of a theirs team also created mockups during the design process.

After you will do the design cycle for few times, you will understand what process flow will work for you best. Some of you maybe be very good at sketching, and do not want to do any wireframes at all, others maybe need to create online wireframe for simplifying communication process in the team. In other project, you need to do as much steps as possible to rise project efficiency.

Wireframe Tutorial - Step #3: Online Wireframing Tool

In our days there are a few wireframing tools that are available on the market. Mockup Builder is among them. What will wait for you if you choose to work in Mockup Builder:

More than 100 UI elements available for use
Ability to add reviewers and editors to any projects
Possibility to import any wireframe that you like from Gallery and modify it
Good tool for communication inside your team during design process
Ability to export obtained wireframe in different formats

And this is not all! If you have never use Mockup Builder you can start your full featured 30-days trial plan right now!

Working screen in Mockup Builder

Wireframe Tutorial - Step #4: Make Your Layout with Boxes

The first stage of the wireframe process is to created layout using simple boxes. Think about the information that you want to provide to our users, how it must be organized. Put on the bottom of the page and above the fold the most important part of the information that you want to communicate. Remember that visitors are “scanning” page from left to right. Below there is an example of the wireframe done by boxes. This is a wireframe of the existed company website:

Import this template for free:
http://mockupbuilder.com/Gallery/883

Sometimes you need to think about rearranging the information structure for better providing main ideas about company to the visitors. You can find below the wireframe example that has slightly different structure than typical company website:

Import this template for free:
http://mockupbuilder.com/Gallery/899

Below is a layout of the typical blog. It already includes spaces for the advertisement blocks and some specific information for a client.

Import this template for free:
http://mockupbuilder.com/Gallery/902

Wireframe Tutorial - Step #5: Working On Information Hierarchy Using Typography

When you find out how you want your information to be organized start dropping it to pieces. On this stage, you need to add content to you website. This will give you a better understanding is your information good organized or no. The rule is the same: information must as clear that a user understands your website even in black and white.

Using different font size will help you to show a hierarchy of the information on the site.

Import this template for free:
http://mockupbuilder.com/Gallery/901

Do experiments on this stage. You may notice that as you add information to the page the previous layout isn’t working anymore. It’s all about wireframing – to find the way in which information will be clearly presented. You can do as many iteration in the process as you need.

Wireframe Tutorial - Step #6: Greyscale wireframe

You can use all palette of the grey to show visual levels of the elements. This method of the wireframing was proposed by Niehaus (read more about Niehaus technique: http://blog.mockupbuilder.com/how-to-create-wireframe-using-niehaus-technique/). It helps you better understand how the website will be working still without adding any colors to your design.

Import this template for free:
http://mockupbuilder.com/Gallery/900

Wireframe Tutorial - Step #7: Hi-definition Wireframe

This step is not the default in the wireframing process, but we recommend you to try it a few times. Creating hi-definition wireframe (also known as high-fidelity wireframe) means adding as much details as possible to your wireframe. It can be used for example to define the best font size for your website:

Import this template for free:
http://mockupbuilder.com/Gallery/903

The hi-definition wireframe can include colorful elements.

The idea to include this stage in your process is that you do not want to make experiments when you will be doing the final design or on the coding stage. Ability to make all needed iteration in the mode wireframe-feedback helps you to avoid making changes in the final design done in Photoshop.

On the other hands, it is not possible to show everything that you want in the two-dimensional space. For example, especially in the mobile app development process you need to understand much more about the interaction user with the app then about the stable design of the separate screen. In this case? You need to make the interactive prototype in the earliest stage of the process.

Using the wireframes can give you an ability to make design and coding simultaneously. Just give you programmers the wireframes of the future website and this will help them to start creating main frameworks while you will make the design.

Conclusions

That’s all. I hope that all provided information is useful for you and you will start to create your own wireframes and experiment with them. Just not be afraid to iterate as many times as you need.

In addition, you can try to wireframe using different tools and different process flows. If you have any questions, please, feel free to ask in the comments!

[jetpack_subscription_form]

8 Free Samples of the Contact Form Wireframe Templates

Tue, 08 Apr 2014 09:43:34 +0000

Today we want to present for your attention the collection of the wireframes of the contact page. Almost in any web-site that you created you need to make this type of page. Look through following examples of the wireframes of the contact pages and catch some portion of the inspiration. All wireframes are available for free importing from your Gallery.

Contact Us Form Wireframe

Import this template for free:
http://mockupbuilder.com/Gallery/136

Contact Form Wireframe from Dashag

Import this template for free:
http://mockupbuilder.com/Gallery/826

Contact Page Wirframe from Buffalo

Import this template for free:
http://mockupbuilder.com/Gallery/827

Classical Contact Form Wireframe

Import this template for free:
http://mockupbuilder.com/Gallery/830

Contact Page Wireframe from MIXD

Import this template for free:
http://mockupbuilder.com/Gallery/831

Contact Form Wireframe on the Personal Web-site

Import this template for free:
http://mockupbuilder.com/Gallery/832

Simple Contact Form Wireframe from Portfolio Web-site

Import this template for free:
http://mockupbuilder.com/Gallery/895

UI Wireframes Contact Form

Import this template for free:
http://mockupbuilder.com/Gallery/896

Start wireframing right now!

[jetpack_subscription_form]

Win the annual Premium Light Plan from Mockup Builder

Wed, 19 Mar 2014 11:17:26 +0000

One of our partners - Tesla Theme - today announces a competition. One of the prize in it is free annual Premium Light plan from Mockup Builder. We invite you to participate in it and win one of those wonderful prizes.

To take part in Mega Giveaway you need to do three simple steps:

1) Go to the page of the competition: http://teslathemes.com/blog/giveaway-win-plugins-tools-and-themes-with-a-total-worth-of-751/
2) Log-in in the special form by you Facebook account or using your email address.
3) To rise your chances to win you can also like the facebook page of Tesla Theme, follow their twitter account or left the comment under the post about competition.

We wish you good luck!

[jetpack_subscription_form]

16 Free Effective Wireframes of Sign-up Forms

Tue, 11 Mar 2014 17:53:52 +0000

Many of the web sites and mobile application start from very important phase - user sign-up. The sufficiency of it depends on how it is build. Below we present you a collection of the sixteen sign-up forms. All of them are available in the wireframe form. You can freely import them from your Gallery. After importation you can make any changes in them and use them in your site development process. Let's make great web sites and mobile application together!

Create you sign-up page wireframe now!

[jetpack_subscription_form]