Monthly Archives: August 2016

How to protect your Apple devices

This is where a Mobile Device Management (MDM) solution can greatly reduce the time it takes to set up and deliver ongoing management. Bushel is a cloud-based MDM solution, which means that, after quickly setting up your devices, you can inventory and manage all of them quickly and consistently at anytime from anywhere. Pushing out settings to devices is simple. For instance, you can configure company email accounts or enter Wi-Fi passwords one time, and Bushel will push them out to all of your devices with a single click.

Enrolling devices in a management solution may sound like a lot of work, but Bushel makes it simple. When you sign up with Bushel, you are given a unique web address that you or your users can visit on a device that you would like to manage. The user provides answers to a few, simple questions and within a couple clicks, the device is enrolled and you are managing that device with Bushel.

For the ultimate enrollment experience, sign up for Apple’s Device Enrollment Program (DEP). When devices are purchased through this program it allows them to automatically enroll and apply specified settings when they are turned on. That way your employees and colleagues can receive managed devices that are still in the shrink-wrap… you don’t even have to touch them.

At the end of the day, security is king. With Bushel, you can ensure that sensitive company information on all Apple devices remains secure. You can enforce passcodes and encryption and even remotely lock or wipe a device over the air. Being a part of Apple’s DEP also unlocks advanced, supervised security settings that take your device management to the next level.

Apps are the key to a great mobile experience, but it can take some work for everyone to get the apps they need. Bushel allows you to centrally select and send apps over the air and even reassign them as your workforce changes. Apple has another program called the Volume Purchase Program (VPP) that allows you to purchase apps in bulk and own them as a company, rather than tying them to a specific person and Apple ID. This makes sending out and reassigning applications quick and easy.

Bushel makes device management simple and affordable for everyone, so businesses can support their users without help from IT. Manage your first 3 devices for free, and add more for just $2/device/month. Start managing your devices with Bushel today!

Whats the Difference of Prototyping and Wireframing

’m very happy to welcome you all to the first part of this online course on wireframing and creating design documentation. I hope you’ll all have fun and learn useful, applicable techniques that will make your everyday work life much easier.

I’m Marcin Treder and I currently serve as CEO of the popular User Experience Design Application – UXPin, but I’m also a seasoned User Experience Designer and a manager of User Experience teams.

In a series of 7 articles I’ll discuss, in detail, methods of wireframing and, in general, creating design documentation. I’ll guide you through tips and tricks that helped me in my practice and I sincerely hope you avoid some of my painful mistakes.

Articles are meant to be highly practical so expect just a little bit of design philosophy and a lot of real life stories.

All the examples of design documentation are created in UXPin – the first ever User Experience Design application.

Wireframe, prototype, mockup – what’s the difference?

A couple of years ago I realised that a lot of my IT, non-designer, friends were using the names of my beloved design deliverables synonymously. They assumed that a wireframe, prototype and mockup are exactly the same thing – a kind of greyish, boxy, sketch representing an ingenious idea.

The problem with their simplified view is that they never know what to expect from the work of User Experience designers and they often get confused. ”Why the hell is this not clickable?”, ”Well, I didn’t know that I was supposed to click here…” – these kind of comments are annoyingly common in UX design projects.

Confusing wireframes with prototypes is like assuming that an architectural blueprint (a detailed plan of a building-to-be) and a display house, are the same thing.

Though you may certainly try to live in a display house (you know – its beauty is supposed to demonstrate how cool other houses in the area are), you can’t count on a comfortable stay in a blueprint – it’s just a sheet of paper.

A display house and a blueprint are different means of communication in architecture:

–  a blueprint serves as a building plan and should specify how the building should be built

–  a display house provides a test drive for future residents

The same differentiation can be applied to wireframes, prototypes and mockups. They  look different, they communicate something different and they serve different purposes.

A display house and blueprint do have something in common though – they both represent the final product – actual house. And again exactly the same common trait can be applied to wireframes, prototypes and mockups – all these documents are forms of representation of the final product.

Believe it or not, the difference between a prototype, wireframe and mockup was always one of the first things I tried to teach members of my User Experience Design team.

Yes, it’s really that important.

Let’s discuss wireframes, prototypes and mockups in detail, so you’ll grasp the idea of what to use in specific situations.


1. What is a wireframe?

A wireframe is a low fidelity representation of a design. It should clearly show:

– the main groups of content (what?)

– the structure of information (where?)

– a description and basic visualisation of the user – interface interaction (how?)

Wireframes are not just meaningless sets of grey boxes, though they may look exactly like that. Consider them as the backbone of your design and remember that wireframes should contain a representation of every important piece of the final product.

„Representation” is a crucial term here, which will help you find the right fidelity – speed balance. You can’t go into too many details, but on the other hand you need to create a solid representation of the final design that won’t miss out any important piece of it. You’re setting a path for the whole project and for the people that are working with you (developers, visual designers, copy writers, project managers – they all need well-created wireframes). In fact you’re creating a map of a city. Every street is represented on a map, but it’s vastly simplified. You can sense the architecture of the city if you look on a map, but you can’t perceive its beauty.

Wireframes should be created quickly and almost the whole time should be spent communicating with team members and…thinking. The mere activity of wireframe-creation should be really quick.

Visualisation should be aesthetic, but this is vastly simplified. Black-grey-white are the typical colours you’ll use (you may add blue to specify links).

If something takes too much time to prepare (e.g. choice of icons, uploading images), you have to represent it in a simplified way (e.g. using placeholders – crossed rectangles for images, plus an appropriate description). We tend to call wireframes low-fidelity deliverables (lo-fi).

Remember – a well-created wireframe communicates design in a crystal clear way and sets a path for the whole team.

2. When to use wireframes.

Wireframes are typically used as the documentation of the project. Since they are static and fix interaction with an interface at a specific point in time, they should be accompanied by the written word (from short notes explaining interaction to, when needed, complex technical documentation).

However they might be also used in a less formal way. Since they are quick and simple in form, they serve well as clear sketches for inner communication in the team. If developers ask how something should be done – the answer can be provided as a rapidly created wireframe.

Consider this: UXPin is a start-up with really rapid development cycles (releases every couple of days). We use wireframes to quickly visualise tasks (even small ones!). It eliminates misunderstandings and is really cheap.

Wireframes are hardly used as a testing material, although they may help to gather feedback in initial, guerrilla-style, research, in which you don’t care about methodological purity, but rather try to get some quick insights.

Wireframes placed in the context of the whole design story can be surprisingly effective and, though in recent years they’ve received some bad press, are still indispensable as an initial stage of complex projects.


 1. What is a prototype?

A prototype, often confused with a wireframe, is a middle to high fidelity representation of the final product, which simulates user interface interaction. It should allow the user to:

–  experience content and interactions with the interface

–  test the main interactions in a way similar to the final product

A prototype is a simulation of the final interaction between the user and the interface. It might not look exactly like the final product, but should be vastly similar (it’s definitely not a greyish, sketchy thing). Interactions should be modelled with care and have a significant resemblance to the final experience. Interdependence between the interface and backend mechanisms is often omitted to reduce costs and speed up development cycles.

2. When to use a prototype.

Prototypes are used to their full potential in user testing. Such a simulation of the final interactions forms great material to check the usability of the interface, before the development actually begins.

Prototypes usually aren’t the best documentation you can imagine, since they force the „reader” to take some effort to understand the interface. On the other hand, a prototype is the most engaging form of design documentation as the interface is tangible and straightforward.

Beware that prototyping is rather an expensive and time-consuming form of design communication. I’d suggest rather creating prototypes that can be reused in development (yep, it means that you need to code some HTML, CSS and probably IS on your own). It’s especially effective in relatively simple projects.

Done right and combined with user testing, prototyping can pay for itself.

Interactive Mockup Exercise

When you think of a good website design, what comes to mind?

For me, it’s Airbnb. I like its design not just because it has a pretty color palette or an eye-catching video on the front page, but because it was built with good user experience in mind.

But how do you define good user experience for a website?

For one, it has to be both easy to navigate and easy to search. Websites for businesses, by and large, provide information for customers and potential customers. If your customers don’t understand the information or can’t find the information that they’re looking for, then your website will have failed.

To design a great website, both the structure and the content need to work together to present valuable information at the right time and the right place. There’s a lot of coordination involved, and often times things go wrong. You can’t rush it. You have to build your website to fit the content from the ground up.

How do you start designing a great website? Build a wireframe, then iterate into an interactive mockup.

Why Wireframe?

Wireframing is a great way to quickly communicate concepts and experiment with multiple iterations of any design.

Wireframes are not full-blown coded prototypes with actual visual design. They are just low-fidelity static designs that allow you to test iterations quickly and get feedback. The best wireframes are also interactive, allowing for more insightful testing of how the design actually works.

For example, Airbnb is a travel website.

Its singular purpose is to help people travel by finding great places to visit and great places to stay. That’s how they make money. Everything on their website is optimized for that goal, from the style of their header to the way they display their listings.

Content is the heart of design. People use products and visit websites for the content not because they want the design. And when you wireframe, you allow yourself freedom to experiment, fail, and improve the structure of your most important design asset.

Timeless UI Design Principles

Before we dive into the wireframe and mockup design exercise, let’s first deconstruct how Airbnb’s website works.

1. Bring Attention to Stunning Imagery

When you’re thinking of a place to travel, you’re probably not thinking of your travel itinerary or your rental car information.

Whatever you’re thinking of, it’s likely visual. Pictures of where you’ll be staying. Images of all of the cool sights to see. When you want to travel, you’ll want to see pictures.

That’s exactly what Airbnb did on their website. Every element is highly visual.

All of the content, meaning the house listings and suggestions for places to travel, prioritize images over text. The picture frames take up most of the space, leaving a couple of bold words and a button aside for the user to act on.

The entire header is a video of Airbnb travellers experiencing different cultures and environments around the world. That’s what people want to see in a travel website. They don’t want to just fill out some plain text forms and book a home. They want to travel while they’re planning to travel.

Purposeful imagery is always more powerful than mere words.

2. Simplify Your Content

Unfortunately for people wanting to travel, the process is often very complicated.

You have to scout out the places you want to visit, decide on your trip’s location(s), find a place to live, plan at least some of your time there, buy plane tickets or plan a driving route, and so much more. It’s just a big hassle.

The last thing anyone wants to add to their travel experience is more complication.

Airbnb’s website cuts out all other distractions from their page, leaving only the most relevant pieces intact. There’s a simple bar for very simple travel data inputs, a button for hosts, and a clean, neat-looking list of listings for you to browse. There’s white space on either side of the listings, not ads or any other unnecessary information.

The fonts stand out against their backgrounds and the words and sentences are relatively simple language. Rather than endless descriptions of each site in the feed of listings on the front page of the website, each content block is a simple picture and a bold name.

3. Emphasize the Most Important Functions

Above all, you want the most commonly used functions of your website to be the most easily accessible.

What do people come to your site for?

For Airbnb, people mainly come to find housing for travel. That’s why the biggest, most noticeable call to action element on the website is the booking details bar in the center of the front page. The “search” button is colored pink-red to stand out, and a black transparent bar crosses the background behind the call to action to emphasize the call to action element.