How to Interpret the Wireframes

By in Community Stories October 1, 2018

A couple of years ago, most of the design challenges used to be provided with wireframes as the input. The wireframes were coming from previously ran challenges on Topcoder and were very good as they were conceptualized by our great wireframers. One of the main problems when using wireframes, back then, was that the majority of designers, and all new ones especially, were copying the wireframes.

Fast forward to present, we can notice that nowadays, we have fewer challenges that come with wireframes designed in previous challenges. More often we have the concept challenges, which ask the designers to come up with solutions to a client’s problem, starting from the user story and specific requirements. Some of the challenges have sketches, screenshots, or wireframes from the customer.

Although things have changed from a couple of years ago and we have more clients with more diverse problems in different industries, many designers still have issues on how to interpret wireframes and how far away they can get from them.

From my experience, when given a concept challenge with specific fields to use and data to add, it leaves a lot of place for interpretation in my mind so various layouts, scenarios and optimization ideas come to me. I still remember as a new member that when I was reading the specifications of a challenge with wireframes provided,  the more I looked at the wireframes, the more locked I felt in following them too close. It was always tricky to find the middle ground between the 100% freedom in interpretation and following the wireframes precisely.

But not anymore. Now I know.

It’s always important to understand what the client’s wishes are. Rather than make assumptions, better ask on forums so the copilot can help clarify.

Scenario 1: The client provides the “wireframes”

When the client is providing wireframes, which can be either screenshots, hand sketches or rough wireframes, then usually there is a lot of place for improvement and interpretation. The clients appreciates the creativity and the new ideas that could improve their application and to make things easier for their user.

How much can you improve? A lot.

A couple of examples that apply in general.

  1. Tables can be displayed as list or grid items
  2. Navigation: it can be top navigation or side navigation. Also, think if you need all actions in the navigation or if some can be moved into the footer. Sometimes, less is more.
  3. Display lots of information in one page: it can be grouped in collapsible sections to reduce its height.
  4. Reduce number of clicks: show more information on one page and simplify
  5. Complete lots of fields with data: it can be grouped in different sections and/ or hidden under a progress tracker.
  6. Form completion: top to bottom fields arrangement on a single column usually works the best, rather than 2 columns.
  7. Chat bot: if you have to ask the user to complete a lot of fields or answer a lot of questions, perhaps use a chat bot instead to make the communication easier and more entertaining (audio is possible as well). It’s important to keep in mind that not all clients are willing to take on the technical debt of developing a chatbot experience.
  8. Grid:  do you need a 1 column or maybe 2 or 3 columns layout ?
  9. Multiple actions for an item: if you have to show a panel with multiple actions for it, you could also hide them under a 3 dots, “More” button rather than have all actions listed.
  10. Filters: many times they are displayed at top, but sometimes they can also be hidden and also depending on the case, they can be shown opened on the left column.

Keep in mind these are just some general recommendations, and should be used only where applicable. Each design problem is different so think about what’s the best decision in each case. Considering the context, the client’s preference, and target user is very important.

Besides the above mentioned items, it’s always a good idea to research the competitors websites and see if there’s any of value worth adding. A critical mind and great analytics skills are helpful in this case.

Scenario 2: The wireframe comes from a Topcoder challenge

Nowadays, we have few Topcoder wireframes challenges, but when we do, they have great results. At this point, the client has 2 chances to evaluate the direction their application will go in the wireframe challenge: at the checkpoint and the final deadline, with small refinements in final fix phase. This means that when the design challenge is launched, with these wireframes as input files, the customer knows pretty well what they want, the layout it should follow, the features it should have, and how it should function. Hence any attempt in big updates or changes of these items in the design will be disapproved. Small improvements are still welcomed, but nothing major.

Below is a case study to show an example of how a wireframe can be reinterpreted based on the examples mentioned above.

Case Study

One of our clients wanted to generate reports and charts about the activity and performance of his employees, based on various criterias and filters. They already had a tool to do that, but they were not happy with it as the user had to perform too many clicks and the navigation was crowded. The target users were managers, CEOs, COOs, etc., which were using the application on their laptops. They were looking for a solution from Topcoder.

The customer provided us some wireframes designed by their internal team, based on the existing application.

We ran a design concept challenge where we provided the designers with the client’s wireframes and the designers did an awesome job. The client was very happy with the results.

Things to notice that were improved:

  • Navigation was moved to the left side to provide more vertical space for the laptop
  • “Settings” and “Languages” options were moved to the footer to declutter the navigation
  • Instead of showing multiple steps in a progress tracker, they were condensed into two pages to reduce the number of clicks: the first page, which will show options for customizing data in the report and the second which will preview and download it.
  • Options to “Save” and “Delete” a report creation were added

It’s up to your best judgement on how to analyze each challenge, but most important is to understand what clients want to achieve and always ask questions in the forums so the copilot can help you.