Concepts is an infinite, flexible creative tool for all your good ideas. Available on iOS, Windows and Android.

Converting Problems into User Experience Workflows

An Interview with Front End Engineer Aral Tasher

Front End Engineer Aral Tasher shares how he uses wireframing to turn complex applications into smooth UX workflows.

"Wireframes are the first building blocks in determining the visual form that an interface could take on the screen. They are a rough backbone to solidify the strategy, scope and structure of the project that was determined beforehand."

My name is Aral Tasher, and I'm a Front End Engineer based near Orlando, FL. I'm part of a fully distributed team at Rho AI working on a range of Artificial Intelligence focused projects.

I have a rather unorthodox background, starting with a Bachelors in Software Engineering followed by a Masters in Usable Security and Privacy. Having a technical background and doing research focused on Human-Computer Interaction allowed me to learn skills that have given me a pivotal role in both the early stage and development of products. This is exactly what I do at Rho AI - in short, I help my team bring projects from ideation all the way to a deliverable stage.

What are your goals as a front end developer?

I've always been passionate about solving complex problems, which is why I don't really define myself as a "designer" or a "developer", but rather a Problem Solver. I'm very interested in taking on large and complex design problems and turning them into usable and accessible workflows - not necessarily just designing pretty or appealing interfaces.

I work on multiple web-based applications that utilize customized implementations of modern data science and machine learning techniques. One of the recent projects I've worked on is CRANE. CRANE allows potential investors to assess the emissions reduction potential of climate technologies - for instance, how much a new Tesla battery would reduce our current Carbon release in the next 50 years.

What are user biases and how do they affect your designs?

The basic idea behind user bias is the fact that each person goes through unique experiences in their lives. These experiences consequently affect their cognitive processes that underlie the behavior - for instance, how a person perceives and interprets visually displayed information, also how they acquire skills over time.

A very non-technical example I like to give is to have a group of people draw a tree on a piece of paper. In the end, when everyone shows off their work, you'll get 10 different styles of trees. Some might draw a Pine tree since they're from a tropical place, while some might draw an Oak. What each person draws depends on the personal experience they had.

Now take that and apply it to a UX project, such as a very complex web application that uses an AI. You get a lot of people having a lot of different biases of what the application should do. As a front end developer, you have to take those biases or inputs and create an interface that works for everyone (or as many people as possible) to maximize user understanding and satisfaction of the application.

Working on a sample user registration wireframe.

What are your preferred tools for development? How does Concepts fit into your workflow?

I mainly start off with pen and paper or Concepts sketches, then convert my shabby drawings to hi-fi mockups in Sketch on macOS. Then, depending on the project, I either build interactive prototypes in Flinto or take the mockups straight to my dev team and kick off the development sprint.

I tried a couple options on my iPad before Concepts, but they weren't suitable for my process, which is why I kept going back to using a ruler with pen and paper instead. Ever since finding Concepts, I've moved all my wireframing process to digital. This makes it way more convenient to share with my remote team.

The app has also been a time-saver for me, as it has a lot of tools that make wireframing a breeze and I can just export and share them with no issues. Features like having guides and lock options, an extended brush variety, and being able to bring in my custom assets simply sets Concepts apart from all the other apps I've tried.

Using Concepts to take notes during a stakeholder interview.

What is your creative process like as you tackle user-oriented design projects and ideate, then plan them into life?

My team and I prefer to follow a Lean UX process. We usually start off with an initial planning / design sprint where we try to understand the problem at hand and begin defining the scope. Most of our projects kick off with methodology meetings by our data science teams, so I am usually brought in once we have a proven hypothesis already, and we have somewhat of an abstract concept to build an application out of.

The planning stage is then followed by a wireframing process on Concepts, then hi-fi mockups on Sketch. Once we have a somewhat presentable prototype, we move on to conducting stakeholder interviews for collecting feedback, which are then used to iterate on the existing wireframes. This cycle continues on a two week sprint as we iterate through and pass on the findings to our Engineering team. Since I am also involved with the development of the applications, it’s a fairly smooth process.

How does sketching wireframes help you to detangle User End experiences? What are you trying to accomplish with your wireframes? What does your process look like visually?

Wireframes are the first building blocks in determining the visual form that an interface could take on the screen. They are a rough backbone to solidify the strategy, scope and structure of the project that was determined beforehand.

The goal of wireframes is to make sure everyone on the team is on the same page for how the fundamentals of the application will work, without focusing too much on the visual elements. They’re quick and messy, so we can iterate on them quickly and not feel the need to commit to any of them.

The wireframe below, for instance, shows different layout options for a sign up page. The lines represent textual content, the empty boxes represent titles, and the crossed squares represent filler images. As you can see, there’s minimal real information there, which allows me to produce multiple iterations very quickly. We can pick and choose which aspects are preferred without getting lost in the details. Once the overall layout is decided, we can then focus more on the visual aspects and details of the interface.

Wireframe for a sign up page.

Wireframes for filling out inputs to generate a report.

Do you have any advice for designers looking to create and share thoughtful user-end solutions?

Stay curious. The learning never stops. And if you are conducting user research, don’t be afraid to ask those “stupid questions”. Behind every “stupid question” is an answer with a lot of underlying assumptions, and in order to fully understand one’s perspective, you have to figure out where those assumptions or biases are coming from.

Check out Aral's YouTube channel and his list of top iPad productivity apps.

Aral Tasher - Programmer, photographer, communicator, connector and creator. Working at the sweet spot between beauty and elegance to answer complex design problems with honest solutions. I prefer clear logic to decoration. You can find me on LinkedIn, Dribbble, CodePen, Instagram and YouTube under @araltasher.

Interview by Erica Christensen

Converting Problems into User Experience Workflows

Recommended