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

Conversations on Development and Design Evolution

A Blog Entry from the Concepts Team

A discussion with the Concepts team about the app's development process.

“Design is the process of going from an existing condition to a preferred one,” said Milton Glaser, the legendary graphic designer behind the I ❤ NY logo, whose purpose is to communicate bold ideas through his iconic art.

This process might be called evolution, and the evolution of design is exactly what TopHatch is about. We imagined and created the Concepts app to solve the modern day design tool dilemma — to transform the expensive, clunky, high learning curve of digital design into a low-cost, fluid engine as natural as your brain with a pencil.

Have we been successful?

Concepts is growing, both in functionality and in popularity. A week ago, we were awarded Apple’s Best of 2016 status in four countries (to add to Best of 2013 in the US and 11 others). Our latest release, Concepts 4.4, came out at the same time. It featured PDF import and export — a huge request by our users, and a complete Layers redesign.

The feedback we’ve received has been overwhelmingly positive. With the occasional dart of why another paid feature toward PDF, the majority of our users have been thrilled with the power we’ve given them to accomplish their design work with the least amount of friction. Some of our favs? “Badassapp” (Austrian painter), “Brilliant app, PDF support is INCREDIBLE” (.E.T.), and “The future of design, here now” (fingersitchy). Thanks for the love, guys!

The future is definitely where we’re headed. But “future” is a big word, full of promise and uncertainty. How do you balance innovation with continuity and familiarity of existing design tools, while empathizing with a wide array of designers who use the app for all types of professional ends?

This is the line we walk. The design of our “ultimate design app” is constantly up for debate, and in a recent chat about our latest release, our development team discussed the evolution of Concepts design from the inside out. The overwhelming consensus? It’s all about our users.

1. New feature design is about the user.

Our Design & Development team is widespread — Ben and Santtu live in Finland, Dave lives in California, Alcides in Spain, and Valentin is contracted from Romania. Ben, developer turned designer, takes product vision seriously and sets a high bar for design efficiency. Dave, with his PhD in maths, translates Ben’s vision into architecture and steers the development process. We recruited Valentin externally to develop back end code. Alcides works on the front end of UI. And Santtu is our empathic design brain who represents the end designer, with the satisfying job of trying to break everything we’ve made.

And while each of our team members has a particular skill set, they all work together inside the wave of back-and-forth that is the development process.

“Design and development is really a circular process,” Ben said. “We push a release, we listen to the feedback, and we start working on plans 3 to 6 months in advance.

“I listen to everything. I interview our users, ask them what they’re looking for and how they’d ideally use it in their workflow. I stew on how to make the new features fit into our current UI, discuss with Dave who is also doing interviews, and make mockups. Then we run it by our users again. Every feature is because our users are telling us they want it.”

For example, PDF.

“PDF was the number one ask by our users,” Dave said. “They’ve asked for a long time, and we’ve tried to figure out how to give it to them. And not just give it to them, but give it to them well. We hired Valentin — whose brilliance at math gives him insight into our engine — to work on this problem.”

Valentin shook his head. “It isn’t really about the math. That fades into the background.”

“That’s because you already know the math,” Dave laughed.

“So do you,” Alcides pointed out to Dave.

Dave grinned. “That’s the bad part about knowing so much — we might be in the top .1% but from my vantage point, I only see how much I don’t know. That’s where it is for us, we only see the problems and wonder how in the world we can solve them.”

Valentin smiled. “That’s what I mean. The focus is about what the user wants and creating an experience that is good for him. The math is just a means to an end.”

“We write code that produces good experiences for the user regardless of whether it makes the code ugly,” Dave agreed. “But not in Valentin’s case, he did a brilliant job adding PDF support to our engine. Tell them, Valentin.”

Valentin nodded. “There were two parts to solving the PDF problem: rendering and exports.

“Concepts is a vector-based program, which allows your drawings to remain sharp at any scale. It’s one of the benefits of vector. PDFs can be vector or raster, and we wanted to ensure that imports maintained this standard and looked crisp no matter what.

“It takes a lot of memory to handle the large amount of data required, so we custom built a tiled renderer to guarantee the best possible image quality and a smooth experience even at huge zoom levels. Our rendering is now pixel-perfect, even in multi-page documents. This was very difficult to achieve and is one of our most distinguishing features.“

Dave smiled. “One of the happy side benefits is that it’s allowed us to handle huge, high-resolution images and fonts. We’ve already released high-res image import and international text. Custom fonts — another giant request — are now on their way.”

“Right,” Valentin replied. “And check out our emoji support 🌲.

“The other problem was Exports. One of our challenges was that Concepts is actually too powerful for PDF. Like SVG, PDF does not support textured vector stroke (think of the patterns in airbrush, pencil and marker), so is a huge challenge. We decided on two types of export: Flattened, and Simplified Vector Path.

“Flattened export acts like it sounds — it presses the layers into a flat yet high-resolution image. The advantage of this type is that all your textures are reproduced accurately in the final image. On the other hand, Simplified Vector Path export keeps the outline of each stroke but eliminates textures, so you can import the data into Adobe Illustrator and modify it further.

“We support not just exporting a drawing to PDF, but also annotating existing PDF documents. Anything is possible, from simply signing a document to complex exports across multiple PDF documents.”

2. Improvements to current features are about the user.

“Our goal was to improve Layers according to our users’ feedback,” Alcides said. “One of the problems was that in previous iterations, we had feedback on making layers a faster part of your workflow. But the end result didn’t mesh with the rest of the app. Where else do you pull something sideways to change it? Consistency is an important part of UI design, and this was confusing a lot of people.

“When we added our object library — a tap, hold and drag interface — to our selection and adjustment abilities (also accessed via tap-and-hold), we saw we needed to make Layers the same. Layers now features tap-and-hold reordering, and in the same spirit, you can move strokes to new or different layers simply by dragging it there.

“In addition, our users wanted to be able to see the Layer they’re working on while drawing on it. We allowed Layers to be always on. We gave them actively updating thumbnails. And we provided a Focus Mode that allows you to see only one layer at a time.

“And, there’s a new popup in the Layers menu that gives you better control over editing and layer opacity. Opacity has been a huge question on Helpshift — our Ask Us Anything software,” Alcides laughed. “Now it’s the easiest thing to do.

“Lesson learned: continuity helps the learning curve on new features. Improve your design by simplifying your gestures, and keep it consistent.”

3. Performance is about the user.

“Our whole performance process is user-centered,” Santtu said. “It focuses on getting the best possible experience for the user, and the most logical one.”

Santtu is our pathological design expert. With his double-degree design background, he puts himself into the shoes of every type of designer who might use our app and mimics them.

“A lot of my time goes into testing the application in as many ways as I see it could be used,” Santtu said. “Different combinations of tasks someone might do, different choreographies designers might have… I see if it causes a crash. I write an issue on each crash and toss the ball back to the coding side.”

“There’s a lot of back and forth between us,” Alcides said. “And since Santtu is behind the input of the app, he has a great perspective of how the features work. It’s part of why he’s so good at catching the bugs.”

“A good word for Santtu is empathy,” Dave said. “It’s really hard to put yourself into the shoes of a designer and then logically write out the steps. Sometimes we ask a user what they did before the app crashed, and they only remember they were in the middle of drawing a tree. But it isn’t the tree that’s the problem.”

“No more trees,” Santtu nodded.

“Then you circle back to the design side of performance,” Ben said. “There are always changes you have to make at the end. Sometimes an idea that seemed sound theoretically doesn’t work, but you don’t know until you try it. You have to check the in-context stuff — feel it, play with it, watch other people use it. If you’re tuned in, you’ll notice others have similar problems, notice something that you missed. These tweaks have to be accomplished in the final days.”

“At last,” Dave said, “there comes a point where what we’ve done is good enough. It might not be quite right yet but it doesn’t matter, you have to get it into the hands of the users. We have to test what we think with what the users think.”

“This is a very thin line,” Alcides added. “Ship a beta too early, you don’t get useful feedback. They point out things we already know don’t work. You have to make it good enough that you don’t waste their time or your time.”

“We read it pretty well this time,” Dave said. “We’ve learned to read the wave. One late change that resulted from this was the need to reposition the Layers menu. Kevin, one of our beta testers, was the first to point this out. This was not planned but it was immediately clear that it needed to be addressed.”

The Big Question

The moment of release comes. You send your offering off, it gets approved by Apple, and the Release becomes live. You hold your breath as the feedback comes in.

“Were we successful?”

Dave laughed. “As the developer, you always know the limitations and what you haven’t managed to do. You’re always five steps ahead in the future. Valentin finished PDF and now he’s working on what comes next — we have a ton more things we’ll bring to PDF like eraser stroke improvements, and imports with accurate size and scale. It’s hard as a designer to remember what you succeeded at because you’re listening again. You’re already looking at the next thing to solve.”

“Where it comes to the team, though, I give my thumbs up,” Ben smiled. “We have such a rapid development cycle. Our goal is to have a new release every 4 to 6 weeks. This is very ambitious, no one else does it in the industry. Why do we do it? Not only is our team incredibly capable, but this is for our users. They love to see our updates. People can see the value being added to the app on a consistent basis — a point reflected by our five-star average in the App Store.

“This is where the actual magic of success lies. Design evolution, ideas, approval… they’re all in the hands of our users.”

Huge thanks to Ben, Dave, Valentin, Alcides, Santtu, our beta testers and our community for sharing your time and insights. You are making the Concepts world a better place.

Conversation recorded by Erica Christensen

Conversations on Development and Design Evolution

Recommended