Clear Story helps companies tell their best stories through user experience, visual design, copywriting and motion.
visuals | copywriting | animation
thumb-nails-400x520-irise.png

iRise Editor

Taking iRise 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.

The Approach

We started with deep UX research & contextual inquiry. We assembled a team of existing power users in the enterprise/prototyping space and began to gather feedback from them diligently. This was instrumental in creating workflows and solutions that addressed their specific needs.

editor-studio-overlap-diagram.png
 
Getting the landscape down was key to elevating the experience. In the beginning, we needed to know what we didn’t know.
 
ir-1.jpg
 
My team members JD & Alain were key to uncovering numerous customer insights with affinity mapping and cross-referencing data points after many rounds of contextual inquiry.
 
where-to-place-tooltips.v3.png
Establishing tool-tips was a project in itself when it came to designing such an interactive interface, since it had so many states, modals, and layers to it.
canvas-style-drop-into-steps.v1.png
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.

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 contianers within each other, so the logic had to be specified.
 
 
Complex diagraming tools were also added to help users architect their software needs.
 
s54-color-picker.png
inset-value-handles.png
 
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 they both required.
 
paste-image-from-external-new-pass-v4.png
 
Pasting content onto the canvas was also key. We needed a way to explicitly tell the users that they were a keyboard shortcut away from accomplishing this task. These are two treatments above.
 
ir-3.png
 
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 the Editor interface.
 
ir-2-arrange.png
 
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.
 
Bezel_42mm_black.png
Bezel_42mm_brown_leather.png
 
We had to produce a series of defacto Apple watches, to support the iRise Watch kit for prototyping on this device.
 
s54-show-actions-outer-glow.png

The orange glow signified a selectable item while hovering over an object, thus telling the user it is selectable.

 

The Product Design Process

The product design process included taking all of 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 system to process and track its progress as each feature went from ideation, validation, design and them 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 and segments of the company, 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

I’d love to get the chance to work with iRise again, there was a fluidity that their Product Team estblished that really made the work enjoyable. Prioritizing features and tasks when working on a drawing tool is both exhilarating and challenging. I was very glad the we had the right team in place.