Taking an Enterprise App to the Web
The Opportunity
I was hired by iRise to work on the iRise Editor, helping to take an enterprise desktop program to a purely browser based experience. Much of the initial work was based on getting a snapshot of the competitive landscape, more specifically — looking at what some of the newer startups were doing and seeing what we could envision for our web based experience.
The Approach
We started with market research & began using contextual inquiry, getting exposed to core set of customers given to us by the product team. These “power users” who lived in the enterprise / prototyping space had varied opinions. We began to gather feedback from them diligently. This was instrumental in creating workflows and solutions that addressed their specific needs.
The existing “Studio” product being replaced, was a locally installed, and our goal was to enhance the new “Editor” — a web based experience that differentiated itself by primarily working in the cloud through a standard web browser.
In the illustration above, we needed to move the position of the “Editor” further to the right as a goal. This would ensure we had product coverage that would satisfy the needs the needs of enterprise level designers across the board.
“Getting the landscape down was key to elevating the experience. In the beginning, we needed to know what we didn’t know. ”
Research JonDelina, Designer Alain Somphone (and I) made a research “war room” at iRise.
“My team members, veteran researcher JD Buckley & online art director Alain Somphone were key to uncovering numerous customer insights using affinity mapping and contextual inquiry results.”
Here is a marked up design that I provided to help engineering really understand my thoughts in a clear and concise way. I had a great relationship with all of the engineers, and was able to help lead projects to success.
“Establishing tool-tips was a project in itself when it came to designing such an interactive interface, since it had so many states, modal windows, and layers to it.”
You see these some of these interactions in Webflow and Figma today…
We needed a way to bridge the local software to the cloud, so this was an illustration to help all teams see the relevant components.
“This product boasts a drag-and-drop interface which lets you nests visual containers within each other, so the logic had to be specified very clearly for engineering to execute this project at a level that would satisfy our needs.”
Above are shape and connector mapping tools for those that need to architect their projects prior to making pages or components.
“Complex diagramming tools were also added to help users architect their software needs by planning out all the connection types. I designed most of the new UI myself, up until Alain Somphone inherited this work.”
We designed our color picker using standard patterns.
Building anchor points into visual elements onto a screen was key to helping users move, scale and resize their visual images and elements.
“Building a color picker and a scalable selection box (with anchors) were both key initiatives that took a great deal of thinking and detail to accomplish, due to the logic that both required.”
At the time we produced this feature, it was very difficult to engineer true drag and drop of image types (jpgs, pngs, svgs) into an active web “canvas” so we developed these modal communicators to help the users use techniques that achieved the same results.
“Pasting content onto the canvas was also key. We needed a way to explicitly tell the users that there were keyboard shortcuts to accomplish this task, based on browser focus (at the time). ”
Here I designed a “table insert / maker” for designs requiring tabled based data or layouts.
“The creation of tables to hold data is extremely important for prototyping enterprise applications. Here you can see we took an existing pattern and applied it to our product. Using “hover” and ending with the “enter” key, you could select as many table cells needed to build your table.”
I created all of the custom icons and states seen here to express the movement, alignment and distribution of graphical objects selected on your web canvas.
“I worked on all of these tabs, but the ‘Arrange’ tab had to be the most graphical since it had to express all of the graphical movements, settings and arrangements that are possible.”
I also made “blank” product shots for folks to incorporate their design work on top of a “base layer” …
“We had to produce a series of defacto Apple watches, to support the iRise Watch kit, for prototyping on this device when it first came out. ”
The orange glow signified a selectable item while hovering over an object, thus telling the user it is selectable.
Ensuring users could select (or group select) visual objects amongst sea of other objects important, so the orange glow would say “hey, I’m selectable” to the user.
The Product Design Process
The process included taking the data from the contextual inquiries and creating personas, while the Product team proposed upcoming features to address backlogged issues. We then mapped each “approved” feature into a KanBan board (Trello) to process and track its progress as each features went from ideation, validation, design and then to development and QA.
Lessons Learned
Building complex authoring tools is very challenging, but also really rewarding. A lot of communication must take place amongst all teams, in order to create a product and experience that is both useful and memorable. Taking detailed notes, actively listening to users as well as staff, is key to building something functional, great and delightful.
Final Thoughts
The iRise team was amazing, there was a fluidity that their Product Team had which established the working dynamics between the founder, product leads, engineering and design. Prioritizing features and tasks when working on a drawing/prototyping tool is both exhilarating and challenging. I’m grateful we had the resources in place to bring iRise to the web.