Category: User Interface Design

Why Prototypes are Better Than Business Plans

About twice a week I find myself explaining to startups why it’s better to invest your time in building a prototype of your web application than wasting hundreds of hours on a 50 page business plan no-one is going to read.

Below is a one page explanation of the advantages of creating prototypes:

Kick-off Meeting Checklist for Web App Designers

I’ve been asked several times to share our checklists with clients and other designers. This checklist is used in the kick-off meeting. We’re constantly editing and improving it so if you’d like to add comments of your own:

  1. Do we have all the client domains?
  2. Will this domain name change during the project or before launch?
  3. Do we have access to the domain registration?
  4. Do we have FTP and database access?
  5. Will we providing this client with a hosting solution?
  6. Do we have an end user or persona description from the client?
  7. Do we know the business objectives of this project?
  8. Has the client provided a site map for the project?
  9. Where is the content for the site or application?
  10. Does the content need to be edited or created?
  11. Who at FTS will manage the content creation?
  12. If we are providing content, do we have a signed content creation contract for this project?
  13. Will the client be providing any wireframes?
  14. Will the client provide any stock images or original photography for this project?
  15. Has the client provided any marketing or positioning information?
  16. Does the client have branding or identity work they want to share with us before we start?
  17. Who at the client will be responsible for content updates and edits?
  18. Do we have a list of at least 5 primary keywords or phrases?
  19. Has the client provided a list of competitors?
  20. Does the client have any historical SEO or marketing information?
  21. Has the client provided us with their Google Analytics login information?
  22. Has the client provided us with a list of their social marketing websites and accounts?
  23. Has a Product Vision been created by the client?
  24. Does the client have a developer or development group available to help with clients side development issues?
  25. Will multiple states be required in the app or website design (sample, error, etc)?
  26. How many core templates will be required to meet the deliverable?
  27. Has Subversion been installed and the client updated with necessary access?
  28. What research will be required for this project?
  29. Has the research required been built into the proposal or Scope of Work?
  30. Has a full list of stories been created and prioritized?
  31. Will this web application project require any public facing marketing or registration pages?
  32. Will this project require any blog installations and styling?

Designing Web Applications: UI vs. UX

User interface design and user experience engineering are used interchangeably and that’s both incorrect and misleading. So what is the big difference?

User experience engineering (UX) is the big strategic thinking that you wrap around your entire web product or business. User interface design (UI) is what you create from those big strategic ideas to visually steward your customers through their daily interactions with the web application.


If you have the luxury of starting a project from scratch then you would start with the UX before you considered the UI. The design of the product is then based on the UX you have decided to create. Think of it metaphorically like building a new family house. Before the architect starts to draw up the plans you have to decide on the user (home owner) experience. You need to make decisions on how the building will support and enhance your lifestyle. How will the house accommodate your kids and their activities? How will the house design deal with the changing seasons and the changing requirements as your family gets older? Each of these ideas will determine the dimensions, layout and aesthetics of the house.

Not defining the UX fist can result in the design becoming the informer of the user experience. Going back to our home metaphor, imagine for a moment that the designer or architect of the house didn’t know you had kids or assumed you preferred traditional styles to contemporary styles? The final house design would disappoint you and the experience of living there would be less than optimal.

When you are looking for a web designer for an application it’s essential that the designer or design team knows these subtle differences. The must make sure they understand the UX before you start to design the web application or product. Ideally they should also have deep knowledge of Agile and/or LEAN development practices so they can build an application interface that be used as the platform for the development team.

How a Redesign Reduced Our Bounce Rates by 45%

We recently updated our own home page design with some very positive results. As you can see below the redesign wasn’t significantly different but there were some key improvements. Our goal with this redesign was to reduce the “drop-off” or bounce rate from the site.

From the Google Analytics charts below you can see that we had a massive improvement in bounce rates. The new design reduced bounce rates from an average of around 50% to around 5%.

Here are the specific changes we made:

  1. Remove the search bar from the navigation
  2. Make the positioning statement clearer and more focused
  3. Increase the size of the portfolio area to give more attention to the design work we do for your clients
  4. Make the contact form more accessible and give it a friendly face to make it feel more personal
  5. Reduce the complexity of the blog and twitter feeds so the content is not overwhelming

You’re No Stranger to the Power of UI

As I wait for my mobile carrier to come out with the iPhone, I manage to appease myself by giving my (slightly) outdated cell phone occasional “makeovers,” as I call it.  My most recent cell phone makeover consisted of a new plastic case and touch-screen protector.  Compared to my previous case and screen protector, scratched, broken, and smudged from its two-year stint, I was really pleased with my little upgrade.

The new screen protector I got is supposed to make the phone screen quality “HD,” reduce glare, and improve visual clarity.  Plus, when I’m not using it, the dimmer surface makes the screen reflective, like a mirror— an added bonus.  The new case I picked out online is practical; it will protect my phone from falls, water exposure, and other perils. Plus, it looks pretty cool (in my favorite color, hot green,) while it serves its purpose.  My cell phone makeover seems to have satisfied my desire for improved functionality, aesthetics, and even usability, without having traded it in for a smart phone.  It almost made it feel new; in fact, I was much more satisfied with it than usual.

After showing off my phone’s makeover to others, waving the mirrored screen in the faces of my unimpressed friends and family, I had an epiphany.  My self-satisfaction with my “made over” cell phone was a direct result of the new enhancements that it presented to me, the user.  I felt a dramatic appreciation for these two minor features because somehow they changed my perspective and improved my experience in using the same old cell phone.

This is a perfect example of the how an improved user interface elicits a positive emotional reaction from the user. When a product’s interface caters to our natural human instincts and desires, it reaches a whole new level of user appeal. The aesthetics, functionality, and usability of a product are all considerations taken into account in user interface design.

When we talk about “user interface design,” “UI,” or “UX,” (specifically with regards to technology and software,) this technical terminology tends relay an empty, flat connotation.  This is ironic because user interface design is actually inseparably linked to our own human attachments and experiences with relation to the products and technologies that we use.

The hugest example of this is probably on your person right now. The iPhone uses an incredibly simple interface, one even a young child could operate, to control and maneuver groundbreaking features and functionality.  The user interface design of the iPhone plays a gargantuan role in our entire society’s obsession with this product.

So next time you find yourself enthralled in a website, application, or a new high tech product, think about the degree to which the user interface is impacting your reaction; chances are, it’s defining your overall experience.

Increasing Landing Page Conversions Just Got Easier with Performable

At Fresh Tilled Soil we are always on the look-out for online tools that make our lives a little easier. If you need to design landing pages for your site and/or want to conduct AB testing on specific landing page templates with ease, Performable.com gives you a seamless interface to do just that.

Not only is the Performable website extremely simple to use and from a usability standpoint we like, it even allows you to use pre-loaded templates or upload your own custom designs. So whether your a web designer or not, you don’t need much of a design background to get some simple landing pages created for your site. Performable definitely takes the cake when it comes to landing page design and testing.

Check out some of the landing pages we just recently created and uploaded to Performable:

(Performable UI Landing Page: Version A)

Landing page variation for WordPress design services

Landing page variation for WordPress design services

We will be testing out these landing pages over the next couple of weeks and are excited to see the results. With minimal effort on our end, Performable will automatically run AB testing for each of the two variations of landing pages we created for both UI and Custom WordPress CMS projects. It really is a great online program and we encourage all of you to give it a try so that you can increase your landing page conversions.

Learn more about Performable at: Performable.com/overview

Office Space & Sensibility: How Web-based Technology Makes Us Better at What We Do

There was a time not too long ago when all office work was always done in the office.  Today those times seem antediluvian, a relic of a business model that no longer exists.  The technology, software, and applications readily available to the masses today have released work from its traditionally confined realm; now the office is omnipresent, given an internet connection and access to a mobile electronic device.

I’m a huge fan of being able to do office work outside of the office.  Those of you who have  visited our Fresh Tilled Soil office will understand why this is surprising– our office is pretty  much spectacular.  It is full of sunlit windows overlooking the Charles, and happy, creative  people that set an ideal vibe for working. Despite our accommodations, in my opinion, being able to take my work outside of our designated workspace makes me a better employee.  Working in new and different environments inspires me to come up with dynamic new approaches to what I do.  Moving into a new physical location is often the catalyst for a genius new idea or perfect solution to an obstacle.  This is a real-life metaphor for the importance of user interface (how the user interacts with and functions in a given space,) in any successful process.

The web-based technologies available to us today safeguard us from the entrapment and isolation associated with long work hours.  Skype, Gmail, Basecamp, Twitter, Facebook, and Gowalla are just a few of the treasured tools that I rely on daily to keep me connected to and focused on my work, in or out of the office.  These technologies keep work pursuits and interactions constantly moving and progressing; that in turn keeps me continually enthralled and on-task.

All of us at Fresh Tilled Soil share my love of these technological web-based business tools that allow us to do work outside of the office (not to mention all the apps that make them even more convenient to use.)  For us, the convenience and ease of working from wherever, whenever has intertwined our personal lives with our work lives.  I’ve noticed the positive impact of this for our team: it brings a realness, dedication, and sense of humor to everything we do, which is something that our clients really respond well to.  It also cultivates, in all of us, a vested interested in the vitality and success of the company at large.

So as the summer rolls in and other companies’ employees feign illness to get out of the office, we at Fresh Tilled Soil take our work wherever we go.  We’ve become addicted to these technologies that let us connect our personal lives with our careers; we can barely hold back the tweets, blog posts, and geo-location check ins no matter what the time or the place.  We challenge you to keep up with our pursuits as our team travels in different directions this summer chasing the sun and working our usual genius just the same.

Eating Your Own Dogfood

Less than a year since our last site overhaul, we began another site redesign late this past winter.  This is not because our last site wasn’t good— it was.  But as designers, (and perfectionists at heart,) FTS always has an eye for improvement.  I think it’s safe to say that we‘ll never be entirely satisfied, leading us to continually to make changes and revisions.

The process that we follow in enhancing our site is the same process that we use to help our clients; we make changes based on user feedback to refine and improve our on-site experience.   We wanted to simplify our site to highlight our strengths; this involved some spring cleaning on our part, eliminating everything that wasn’t intrinsically valuable.

A lot of what we eliminated was content.  We had committed a common mistake— blabbering unnecessarily with too much text unsupported by images. Our challenge, then, was to use less content to tell more.

This was our specific goal for site pages that displayed and discussed client projects.  Upon assessment, we realized that a lot of the content focused too much on the nature of our clients’ companies and not enough on what we did to help and improve their businesses.   The site copy reflected our internal voices, our understanding of our own clients, but this voice wasn’t one that was successful in terms of communicating with our site visitors.   We needed to cater our site content to our target audience—this meant skipping the technical jargon and infinite project details that naturally consume our attention.

Perhaps the greatest realization we came to was that clients want to know about and be engaged in our process.  Finding entertaining, dynamic ways to showcase what happens behind the scenes was our new mission; we needed to spend some quality show and tell time with our clients.  Showing people what you do, (wowing them a little never hurts, either) is the first step to building continued and reciprocal client engagement.

If you think about it, it’s the how that defines and distinguishes one product from the next.  Sharing your process helps clients to better understand your business, and have an appreciation for the time and consideration that is put into the product they receive.  Process tells a lot about the level of quality and functionality of a given product.  Think about watches, or chocolate: what’s the difference between a Godiva Truffle and a Cadbury Egg?  The way it’s made, since this is what shapes its ultimate output.  Showing your process allows your product to speak for itself.

Registration Forms for Web Apps – Dedicated Page or Modal Treatment?

In meeting with a Web App UI client this afternoon, we were asked the following question:

Is it better to have your Registration/Join page:

  • Exist on a dedicated page with the full site navigation in place;
  • stay on a dedicated page without the site navigation;
  • or, have the registration form exist in a modal?

Surprisingly, after searching a bit I was unable to find any data or metrics that offered hard proof suggesting any of the options above. So we’re proposing an open forum on the merits of each treatment while we find an opportunity to A/B test it for ourselves.

A Case for Each Option:

1. Dedicated Page with Full Navigation:
The most obvious or traditional choice for a registration form is to exist within a dedicated page – either in the sidebar or as its own page accessible from the site’s main navigation. Indicating that you’re actively on the registration page but keeping the other navigation options allows the user to further research your application’s offering. For ex: if they’re unconvinced about joining, they can check out the Tour, review the Features or find out who the Team is behind the application. Why not allow them that freedom?

2. Dedicated Page without Navigation Options:
Recent research based around the higher conversion rates of tightly-focused landing pages suggests that once the user has navigated to the Join page, they’re ready to make the decision to sign up and offering them extraneous links that might result in them navigating away is bad practice. Chances are, they haven’t gone directly from a Google search or link from a referring website to your “Join” page, but rather arrive at the Homepage, a Tour, a Features page or a targeted landing page from an AdWords campaign. If that holds true, then perhaps stripping out the navigation and making the user focus on registration makes sense. It may be that this streamlined approach increases the user’s focus on completing the form and beginning the process of getting started with your app. Does increased focus equal higher conversion rates?

3. Modal Treatment for Registration:
If the user is willing to click Join or Register in either the navigation, sidebar or in the form of a button on any of your site’s pages and you want them to focus on completing the form without offering navigation options, then why not simply open a Modal window with the registration form? Modals are notoriously well-known for getting users to focus on 1 simple task while keeping the parent page loaded in the background, often shaded out with a background color/image. Several well-known sites I’ve reviewed in the last few weeks use this treatment for not only Registration but also for Sign In forms. Certainly doesn’t seem like a bad treatment.

So now it’s up to you…

What do you consider the most effective way to design and develop a Registration treatment for a web application? What solution would you choose if it was your task to maximize conversions?

The Menu of the Future

I just got back from a trip to Argentina, where culturally people spend a lot more time dining than we typically do in the states. Since I was on vacation, I enjoyed this slower change of pace but it got me thinking about alternatives to the traditional table service concept. I had heard that in Japan they have a small kiosk fixed to the tables at certain restaurants and cafes where you can order and pay on your own. Imagining that, I wondered what the UI might look like for an actual touch-screen system that might be part of the dining table itself, protected with some type of food and beverage guard and started whipping up some concepts on the flight home.

Here are some designs that show the interaction between engaging the system all the way through adding items to your order. If anyone else has other ideas, thoughts or designs to share just send them along to alex(at)freshtilledsoil.com.

Twitter Updates

@freshtilledsoil is talking about...

Latest from the Blog

    We Love Entrepreneurial Events in Boston (August 23-27, 2010)

  • Boston entrepreneurs and entrepreneurial events! Don’t let the rain get you down this week. There’s still a lot happening in and around Boston and if you care to venture out you’ll find some pretty interesting events that are geared toward start-ups and entrepreneurs. Again, these events come from Boston StartUp [...]

Let's Talk

VP of Business Development, Dan AllardHi, I'm Dan and I'd love to hear from you to explore the possibilities of your project.

Get Started

Connect with us

Follow FreshTilledSoil on Facebook! View photos from FreshTilledSoil's Photostream Visit FreshTilledSoil's LinkedIn page Read FreshTilledSoil's tweets