Create a blueprint with wireframes – interview with Jenny Hsu

wireframe_small
Here are the highlights of my discussion with Jenny Hsu, Business Analyst at GPY&R, about wireframes. A wireframe for apps is like the blueprint to building a house. In this interview, Jenny walks us through the process of starting a product, then creating its blueprint through wireframing.

This interview also showed a good comparison of working with the waterfall model versus working with the Agile method as mentioned in our last podcast, episode 9*.

Jenny and I worked at the same time for Asia Pacific Digital Group (formerly called Next Digital). She has been instrumental in the development of many products, including OfficeMax, Jenny Craig and White Lady Funerals.

Jenny works at GPY&R, an advertising agency that produces mobile apps & websites. In an agency environment, the business analyst is the bridge between client and production team (comprised of designers, developers, testers, etc.). Clients may know what they want, but often cannot explicitly explain what is needed to the production team. The business analyst gathers the complete information and works with the production team to devise potential solutions for the client. It is a process of going back and forth between the client and the production team to arrive at a solution.

A digital producer is similar to a project manager but a project manager is focused only on running projects. The project manager works on a larger scale projects, such as eCommerce websites and mobile apps. A digital producer, on the other hand, usually works on campaigns or smaller projects, and does pretty much everything, from business analyst tasks to project manager tasks. However, the digital producer’s projects tend to be on smaller to medium scale. It is also for a shorter duration of time.

A crucial step to building the product is wireframing. Wireframes are the plans that show how your product will look like, and what functions will happen. It is an important step since, unlike the actual code, wireframes can be easily changed. Time and resources have not been heavily invested yet. It can either be the plan to implement or a throw away document.

Steps for clients that want to build a new app

Create a blueprint with wireframes
1. Conducts workshop to identify client needs

The business analyst / producer usually gathers the following information to form a business perspective on the client. This is the information they wouldgather:

  • what they do
  • what they offer
  • what are their products
  • who is their customer
  • what are they looking for
  • what are their processes


2. Initial ideas are proposed to the client

After studying the information, Business Analyst brings some initial ideas, and ask client if this is what they want.

The analyst then talks to the production team, and they come up with solution to help the client. After the requirements are gathered, a wireframe is initially made. The Business Analyst then goes back and forth to the client to figure out a solution, and to the production team to determine what is doable and feasible.


3. Wireframing stage

When the things needed for a website / mobile app has been thoroughly studied and understood, the analyst may now go to drawing board and start wireframing.

There is no set procedure whether the document requirements must be completed first, or whether the wireframe should be done first. It will all be on a case to case basis. It will depend on the project and timeline.

For larger projects, sometimes it is easier to complete the documentation first before any code is written. Client usually needs to circulate the documents first for clearance with stakeholders. For smaller projects, one can start wireframing after chatting with the client.

Wireframing for websites
website wireframe

With websites, Jenny usually wireframes the home page first, as it sets the tone and manner of the rest of the pages. Working on the home page enables one to clarify navigation and calls to action, and to clearly plot how to take users down the path the client wants them to go.

Wireframing for mobile apps

Mobile App Wireframes

 

Wireframing for a mobile app is quite different from wireframing for a website. Firstly, the use case for a mobile app is not the same as a website. Secondly, the user flow is completely different from website.

There are also different solutions available. A mobile website is very different from a mobile app and also different to a responsive website. If you are thinking app, is it for a smart phone or a tablet?

Plus Android and iOs are different platforms with distinct gestures. Importantly, one has to consider how scalable the design is. If future functionality is added, will the product still work?

One of the important elements to consider for mobile is to consider gestures (such as pinch and zoom, swipe up and down). How can gestures make user experience much more fun and engaging?

Communicating wireframes and functional requirements to the product team

If time allows, involve team early on in project.

Jenny usually presents requirements in a Word document form, or might have already produced a prototype and consults the team. It is then determined whether the concept is doable. Some improvements are then done and shown to client for approval.

Recommended wireframing tools

Choose a tool depending on the purpose of prototype. The tools that Jenny uses are:

  • Visio – allows simple wireframe
  • Axure – both a wireframing tool and a prototyping tool. Axure can demonstrate what the user journey will be. It can create different scenarios and transitions. The document is linkable and shareable to cloud, easily sent to clients and the team.

Jenny does not use the wireframing apps that are too detailed and simulate real websites. Emphasis should be more about getting the concept across to client.

A wireframe is now usually a deliverable and has to be done professionally. Wireframe apps are handy in that that changes can be easily done. It can also be easily shared to clients and the team.

Jenny prefers black and white wireframe, as colour adds noise. During wireframing stage, it’s all about user journey, feasibility, functionality rather than what color a button should be.

Find a wireframing tool you’re comfortable with. For personal or internal use, feel free to use lots of sketches, to convey freeform ideas.

Testing during wireframing stage

Testing is highly encouraged, since it gives the chance to find the little things that make the user experience much better. However, not all clients allot time and budget for this though. One workaround is to get feedback about the wireframe from your team and friends, preferable those who are not as web savvy and work in a different industry. This process works too, even if it’s informal and there’s no lab to record results.

My personal opinion is that initial user testing saves money in the long run. You can find out problems earlier on before moving ahead with fully fledged development.

Sometimes clients have previous studies / surveys that gathered feedback from their customers. The insights from these studies are also valuable to working on the wireframe. Clients may also have deep insight into how their end users think and would interact with the website. The key is to abstract client’s personal opinion with how the end users will use it and data.


4. After agreeing on the wireframe and business requirements, what’s next?

We create a functional specification document to explain in more detail for what each screen does and what exactly is being delivered to client. Since Jenny works in an agency, she works with the Waterfall model. She agrees on what exactly will be delivered before coding is started.

For a small team using Agile, the team could go directly to coding phase, get some input on the initial product, then work on it some more. For a bigger agency, more clarification on the documentation is required to make sure everyone is on the same page. Otherwise, everyone could be doing different things and that can be an issue.

Initial documents are usually written in Word. Sometimes it’s a high level document that states “This is what we’ll try to achieve, the website has a, b, c features” including sections. After the high level document is approved, more details are filled in, such as how to get from page A to page B, especially for an eCommerce website. Logic has to be documented, otherwise incorrect processes might be implemented that does not match how the business works.

Artifacts or themes for projects:

  • Proposal
  • High level requirements
  • Wireframes
  • Technical documentation – functional specification
  • Project plan – when the steps will be delivered, tasks that need to be completed. Enables analyst and client to track where progress is.

This is split into different phases:

  • Planning phase
  • Design phase
  • Development phase
  • QA / Testing phase
  • Deployment/ launch

In an agile environment, the phases are much smaller and faster.

Do you need to have a tech background to do wireframes?

Wireframing is technical but anyone can learn it. Having a technical background is helpful, but not necessary, to make wireframes or functional specifications. Wireframes should be understandable even by those with no tech background.

Those who have technical background can think in advance, “If I am a developer, what would I need to know to make this happen?” and can communicate questions to clients before meeting with the team. The analyst can also add other notes to developers.

For those who have no tech background, if you keep on doing it, it all becomes easier with experience. You learn to note next time what has to be included. If you’ve made a lot of projects, you can refer to old projects’ wireframes and compare and extract information that are applicable for the product. You will also notice common questions asked by the client and development team. So you know questions that have to be included, clarified right from the start. If you know the basics you will be able talk to clients and developers easily. Also, with experience, you develop the gut feel on making new wireframes.

Recommended resources to learn more about wireframing

Read through usability books, learn from designers, build experience working on projects. Just open tools, sketch on paper, start thinking, dreaming and work with designers.

Last tips

Don’t think too much about it. Get a blank canvas, drop everything you need, post everything there. Then think about where you want to place things, how to approach it.

If you would like to learn more, listen to the complete information in this podcast here:

References

This Mobile Life, Episode 9
Asia Pacific Digital Group
GPY&R
Axure
Graffletopia
Moqups
Invision
Pop app

If you like the episode, please rate it 5 stars on the iTunes app store, or like it on soundcloud!

I’m out like the British Prime Minister,

Matt Ho.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA * Time limit is exhausted. Please reload CAPTCHA.