Website Prototyping: Concept and Iteration

Prototyping has become an essential part of web development process in the last couple of years. There are now hundreds of prototyping apps and services out there to choose from. Some of them are very easy to use and allow you to have a quick prototype within an hour. Others require a bit of learning but are however providing solutions to more complex problems.

There are 3 main benefits to prototyping in the first place:

  • Testing the idea in the earlier stage allows to correct the direction if needed
  • Promotes collaboration by making designers, UX designers and developers work together
  • Helps selling an idea or a product to a client.

In this article I will be using Axure, one of the most used wireframing and prototyping software. It’s known to have a steeper learning curve compared to other software but it can do a lot, once you get the hang of it.

 

Let’s concept

For the purpose of this article, I created a concept for a virtual app that lists all the nearby national parks. When developing an app, it’s very important to have a clear goal of the product and create a user scenario.

The idea of this virtual app is that it detects user’s location and lists all the national parks nearby, and then you can also search by the activities you are interested in. It also allows you to save your search settings and your favourite destinations. It would be very useful for my summer!

Before making the visual design, I made an old-fashioned-hand-drawn-wireframe. Yeah it’s messy but it does the job. It doesn’t have to be fancy, but never ever skip this process though! This step is essential to turn your ideas into real life application.

sketch

Wireframes allow you to quickly visualize the user interface and user flow. It’s kind of like a map, in a way that it shows the relations between the pages and their content. In the wireframe, the links between all key elements should be explained.

So in this prototype, I’m making 3 pages and the menu. It lists the elements on the page and what it does when the user clicks on each element.

First page lists all the nearby parks. When you click on one park, it will send you to the specific page of the park selected. On this second page, you can view

  1. Available activities,
  2. Photos
  3. Reviews
  4. Direction to the park (link to mapping app such as google maps, with the destination set to the selected national park)

Since the scenario is all thought out, let’s start making the visual elements based on this wireframe.

nomad_1nomad_2

 

Voila! Since this article is about prototyping, I will not talk too much about design but just keep in mind that you want everything to be as simple and self-explanatory as possible. Don’t try to be crazy creative when it comes to designing navigations, just make it as dummy proof as possible. People just want their apps to work without having to think further.

Once you got the visuals, you can import them in Axure, and start adding interactions.

 

Changes ahead!

In the process of making wireframes, I already changed several elements. I added the favourite star icon on the listing and individual park pages, as bookmarking their favourite parks is the main feature people want to use in this app. You can always google national parks and find the information online, but this app allows you to make a list of your favourite parks which can be handy. I also removed the login process which was present as a first screen, as you don’t need users to create an account, until they wish to use the same app on other devices.

And that is how it’s supposed to go; be light weight and flexible to necessary changes. Iteration is one of the most important factors in UX design. The whole point of making a prototype is to actually test your ideas, and allow you to correct quickly if something you thought was a great idea turns out to be not so practical after all (happens more often than you’d think).

By prototyping, you can save a lot of time and energy. It is a lot more costly to find problems after you already started the development process, since you have to review the design and even the concept depending on the issue, than finding out a problem in the prototyping phase and correcting it right away. The truth is, prototyping is an easy and quick way to test the user workflow and design, to optimize time spent in development.