Skip to content

Two User Experience Tools We Love

When the Atlantic BT User Experience team gets involved in a project, we’re presented with a great opportunity to tell a website’s story.  With the help of our clients, we tell it with outlines, content maps, user stories, wireframes and more. By telling most of the story up front, we allow the designers and developers to understand what the target is and who the users really are.

We’re strive to make this User Experience process part of each and every project we work on.

An example of sketching out a series of ideas.
With markers and paper, we can rapidly sketch through several layout possibilities.

Why Wireframe?

One critical user experience technique is wireframes. We make wireframe mockups of our sites before our designers lay color to pixel because it allows us to explore ideas quickly, keeping the good ones and leaving behind those that won’t work. These wireframes act like blueprints for the complex interactions and flows for the website users.

This idea exploration leads to our client’s customers finding what they’re looking for, or looking to do, as quickly as is possible.  This speed for the user is very important.  In fact, our client’s customers demand it.

There are two wireframing tools we’re very fond of here.

1. Markers

Simple sketching with paper, markers and highlighters.  It’s a method that can’t be beat for its speed and efficiency at communicating ideas.  Think of it like the first draft of a great story — rough around the edges, but you have a fair idea as to what’s going on.

Sketch of the modal dialog boxes.
With a little labeling, the sketch becomes a powerful tool.

Several AtlanticBT staffers recently attended a day-long seminar put on by the Triangle Usability Professionals Association where the techniques of interface sketching were explored. We learned about using different marker shades, along with highlighters, to imply depth, focus, and interactivity.

It was great for all involved, and we knew we had to make it a formal part of our project process.

As an exercise, we took a look at our own Portfolio page and sketched out some possible upgrades to it.  The sketching allowed us to explore several ideas without spending any unnecessary development time.

2. Balsamiq Mockups

Screenshot from Balsamiq Mockups
Wireframing with Balsamiq Mockups quickly provides clear direction.

Sketching is great – but at some point it becomes necessary to get those ideas onto screen so we can share them with our clients and internal team.  That’s where we turn to a prototyping tool like Balsamiq Mockups.

Balsamiq Mockups maintains the sort of low-detail “focus-on-the-feature” feel of sketching, but in a digital format.  It’s easy to use and easy to make changes when client and user feedback starts rolling in.  Balsamiq’s interface allows the user to add common website elements like text, links, buttons, and layout elements to the page with drag-n-drop ease.

Balsamiq allows us to take our sketches, refine and annotate them, and then share them with our clients to ensure that they’re getting exactly what they’re looking for as far with their site’s features navigation.

An Ounce of Prevention

The wireframing process provides three great benefits:

  1. It saves everyone time and effort by answering a lot of project questions before designers and developers get started on their work.
  2. It prevents unnecessary rework later in the project.
  3. It lets us explore how the user will interact with the website beforehand in a way that non-visual methods sometimes miss, and does it in a way that is fast and easy for everyone involved to give feedback on.

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project


Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

Are there differences in application architecture that are important for the cloud?
It is important to build applications and workloads specifically for the cloud. You will want to carefully consider what services the cloud provider of your choice has to offer and how your application leverages those services.
Learn More about Are there differences in application architecture that are important for the cloud?
Are there any drawbacks to cloud hosting?
Yes, there will always be some risks associated with any hosting option. You are relying on the resiliency and engineering of infrastructure that has scaled at an astounding rate.
Learn More about Are there any drawbacks to cloud hosting?
What’s the benefit of hosting in the cloud vs. traditional options?
Reasons not to host in the cloud are few and far between. If you don't host in the cloud, you will spend more in both CapEx and OpEx to manage your applications or websites in a traditional environment.
Learn More about What’s the benefit of hosting in the cloud vs. traditional options?
How can I improve the performance of my application?
There are several primary reasons that applications perform poorly, and in some cases it’s a combination of several. 1) Data latency: If your application is making calls to a data source (whether it’s an API or a direct call) and there is latency at the data provider, your application performance will suffer.
Learn More about How can I improve the performance of my application?
Should I move my application to the cloud?
The answer is ‘probably yes’. There aren’t many reasons for an application to be hosted elsewhere, aside from occasional compliance standards, or requirements to integrate with local services that would require large amounts of data to move from on-premise to cloud.
Learn More about Should I move my application to the cloud?
Where should my application be hosted?

There are many different options for hosting, but most applications would do well with one of the cloud providers -- Amazon Web Services, Google Cloud Platform, Microsoft Azure.

Learn More about Where should my application be hosted?