Do It Live: Realtime Design for Realtime Results

By: Suleiman Ali Shakir

UX Expert AJ Polanco shows you how to design on the fly in this workshop

On October 12th, a design workshop titled “Do It Live” was conducted by AJ Polanco. He demonstrated how to perform design changes in real-time, based on stakeholder and other business-leaders’ inputs.

 

Event Speaker


The event was a peek into the mindset of a designer. How they think and approach a problem. How they gather requirements and question every approach. How they back design decisions with rationale and facts. 

The goal of the workshop was that designers and non-designers will have a design-oriented approach towards problem-solving.

AJ Polanco kicks off the workshop with some words of wisdom.

“I’ve recognized that in this profession, having a good rapport with your BA is crucial to be successful as a designer. Especially in large corporations. They are the ones who will write your many-page functional requirement documents and get things through the door to be approved by your product owners.“
— AJ Polanco

In the workshop, AJ Polanco demonstrated his superpower to ‘design in realtime’. The word realtime wasn’t very clear until people got to see AJ in action. Putting it simply, Designers are familiar with taking requirements, brainstorming ideas and then coming with designs. This happens over a span of several days. But when AJ said ‘realtime’, he meant designing a product (app) right then and there, while the product owner shoots their requirements to him. Yes, simultaneously!

For this exercise, AJ’s software of choice was Axure RP. A very popular, rapid wireframing and prototyping software. However, there are other tools you can use.

Some of them include:

  • Adobe Photoshop
  • Adobe Illustrator
  • Balsamiq
  • Sketch

Designing your Idea

In this workshop, Casey, a volunteer from the audience, role-plays as a product owner while AJ is the designer. It is now when AJ demonstrates his ‘superpower’. The product owner shoots their requirements while AJ designs the app based on them!

A word of caution
UX purists might argue that this is not a typical UX oriented approach. But the aim of this workshop was never to do that. It is simply an exercise that encourages critical thinking aimed at problem solving.

You can follow along with this article and attempt to build your own app too. The goal of this workshop is for you to learn something new by the end. Start by taking a concept, idea or product to freeform design for this exercise.

For this exercise, AJ Polanco finalized on Casey’s idea of providing charge for electric car users. The apps helps find drivers who can provide charging as a service, whenever they need it.

Once you have an idea, the features and requirements will start coming to you. AJ suggests you immediately start taking notes about the problem you’re trying to solve, who the users are and the requirements.

quick notes
AJ Polanco makes quick notes while the product owner shoots their requirements.
 

The 8 Up Grid

Consider using the 8 up grid method. Put up many concepts as you can in 15 minutes to represent what you’re trying to solve.


Using the 8 Up Grid method to sketch out your ideas

 The 8-Up Grid and other design techniques are taught in the Intro to UXD Course at Rutgers.

Building Your Idea

Intentionally start by designing in low-fidelity. Any way that helps you ideate fast. You can even do whiteboard or pen and paper!

Low-fidelity prototypes are rough representations of concepts that help us to validate those concepts early on in the design process.
 — Laura Busche, Smashing Magazine

AJ takes a holistic approach to the app and starts designing with a question. What is the first thing you see on a mobile app? A splash screen.

A Splash Screen is a user’s first experience with your application. It is a marketing placeholder and an opportunity for branding.

A lot of apps use this screen so it would be a no-brainer to include the same in your app. But AJ Polanco pauses and asks a pertinent question.

“Who are the people who might be using this app? Would these people be those who are in a crunch or those who have planned everything out?”

With this asked, suddenly there is no Splash screen. Instead, the screen consists of the primary user action (CTA) — I Need to Charge Now.

AJ envisions the app to be like Uber, where you’re requesting nearby drivers to provide a charging for your electric car. With that in mind, he starts off by designing the first few screens.

uber

When designing your app, AJ urges that you question every design decision and think rationally. To give you a better idea, here’s some of the Q&A between the designer (AJ Polanco) and product owner (Casey).

Q: What do you want users to find?
A: Drivers who can come to them and provide wireless charging

Q: What incentive is there for them to go out and help someone?
A: They would be compensated for their time by being paid for the service. That’s the main motivation.

Q: How can the driver identify what kind of customer they’re approaching?
A: Users can register their vehicle with the app.

The Importance of Empathy

According to IDEO, empathy is a deep understanding of the problems and realities of the people you are designing for. AJ stresses that it is fundamental to decision making.

Listen and identify what is to be solved. It is a precursor to User Experience Design, backed by psychology.

The Design Process

AJ Polanco then talks about what a design process typically looks like in an organization.

  1. BA (Business Analyst) comes early in the process and speaks with product owner to gathers requirements
  2. The designer takes functional requirements, processes them and identifies opportunities for moving forward
  3. Come up with design; discuss in meeting with the product owner, managers etc.

People are pertinent to the process. Always prefer to talk to people in person as it’s easier to convey what you want to say. Even email is not as effective.
 — AJ Polanco

Final App 

The product owner and designer could keep going back and forth to build the app. But the workshop has a limited time and hence the design came to a halt.

Towards the end, some of the screen designs for the app looked like this.

final app

However, you are encouraged to go on designing your app until you are satisfied with it. In the end, remember that this is simply a design exercise. In the real-world, ideas must be validated and user tested to understand its feasibility.

Future Ideas

Given the limited time the workshop had, not every aspect of the app idea could be explored. However, AJ encouraged brainstorming future ideas we could explore for the app. Some of them include:

  • Gamification — incentives for drivers providing charging services
  • Allow users to play their day ahead — tell drivers in advance if you might need a charge based on route
  • Apply tried and true Heuristic principles — example: displaying self-explanatory error messages

Takeaways

The workshop proved to be very insightful for product design. Moreover, it offered a peek into AJ Polanco’s experience over the years as a UX Designer.

aj

Lastly, he leaves us with some very useful tips to remember:

  • The BA creates a 200-page requirement document. But its never clear until you see a clear visual representation of the idea. That will give you additional thoughts and ideas. That will help form a solid idea in your mind about the product.
  • Always talk to people. That way you will get to know ideas and solutions over which might have pondered over for a week, yet never have thought about it!
  • Make sure you have the right licenses for the assets you use in your designs. Otherwise, it could kill any product. If someone down the line finds out, you may face lawsuits and lose credibility.
  • As a UX Designer, you need to have some technical expertise (know your tools) and stay updated with current trends. 
  • Above all, listen to the Product Owner and figure out solutions. That is key.

Finally, the event lasted for roughly an hour. Within just an hour, AJ Polanco showed us how its possible to take an idea and design a product based on it.


Watch the Event