.png)
<aside> đź’ˇ Framer, Figma, FigJam
</aside>
During my summer internship I completed an end-to-end UX project: synthesizing, researching, ideating and prototyping to resolve customer pain points. Some notable wins from this project came from improving customer orientation, as user degree of lostness re: element zoom went down 100% and the time to zoom improved by 10 seconds (AVG 00:14 -> 00:05)
Honeycode is an AWS product for business users with little to no coding experience. Honeycode builds off of the tools and behavior patterns that spreadsheet power users are familiar with. It models an app’s data with relationally linked spreadsheets. Tables (aka the spreadsheet) can be related via rowlink or columnlink, similar to how other database abstractions show relationships.
The value proposition of Honeycode is the ability to create extremely customized, powerful apps without any coding knowledge.
I came onto the product in the middle of a large product pivot. Honeycode wanted to replace a spreadsheet-forward building experience with a more visual experience. They found that users became too focused on inputting their data and did not understand the data model powering their app. As a result, they were unable to fully understand how their app was constructed and could not create their own customized apps for their use cases. They complained that the app was difficult to use,
The new experience used a node and connector model, dropping the user directly onto a visual canvas on startup instead of a spreadsheet for data entry. The team abstracted app screens as white boxes with, with orange lines showing the flow of data from the data node (spreadsheet/data abstraction) to the screens and blue lines showing the navigation flow of the app.
On default view, none of the lines were visible. However, after an element was selected, its relevant relationships appeared. This meant that lines were constantly disappearing and reappearing as users explored the interface.
The canvas was navigated by zooming in and out, as well as click + drag to pan. The interaction model and gestures used with the canvas were similar to how one navigates Google Maps. Other similar interactions include whiteboarding products like FigJam, Miro, Invision and Canvas.
My internship started shortly after the product pivot was completed and a large external user research effort. As a result, I had about fifty hours of recorded user sessions to analyze with the goal of discovering why users continued to struggle with the new interface. The ultimate end goal of my project was to resolve the customer problems I identified, allowing users to successfully and confidently create a custom app.
.png)
To pinpoint my customer problems I needed to break down all of the testing session recordings. I rewatched every session, taking minute by minute notes whenever users struggled. I began noticing common areas where users struggled significantly. To further develop my ideas, I selected a few tester flows from each theme and mapped them out in a journey map. Visualizing the testing session allowed me to identify where and why the tester’s struggle began.
I realized that the customer problems could be simplified into two tracks or categories:
I wanted to familiarize myself with no-code and node/connector data visualization spaces. Prior to my internship I did not have a lot of experience with data modeling, abstractions or visualizations, so I spent the beginning weeks asking a lot of questions.
One of the advantages of coming from a broad major such as Interactive Media Arts is being able to pull my research from a variety of sources, including those not traditionally used my UX designers. I completed:
Main learnings were:
Based on my research, the team’s existing user persona and my problem statements, I began working on ideating and iterating my solutions. I decided to focus on the two tracks that I identified in my problem statements in order to improve the user navigation and subsequent understanding of the data model.
Mini-maps
Improve zoom user flow
Teachable moment
I also redid the canvas gestures to be more in line with established behavior patterns.
Focus Mode
Progressive reveal
Flowchart mini-map
Stand out ideas post UX and PM shareout
At this point in the project the UX team shifted our focus to displaying screens, or as they are called to from now on, bundles.
Packs are formed when screens are related to each other via navigation. In the above example, a screen with a list of tasks and the selected task’s details are related via navigation, therefore they are grouped together and considered a pack.
Goal: Show the relationship between bundles and the data source while cleaning up the canvas
Goal: Illustrate the flow of data and screens
I combined three of my ideations to create the prototype: highlighted zoom area on a mini-map, auto-zoom on click and progressive reveal based on zoom level.
There were three zoom levels:
General overview
Detailed overview
Focused view
Each level allowed a user to focus on only relevant tasks and options, eliminating the customer problem of getting lost on a cluttered canvas. For example, adding a new screen would have to happen in either the general or detailed overview mode, as you would need to see the entire app to place a new screen into the data and navigation flows. However, you would not need to see specific screen copy.
The auto-zoom on click refines the zoom interaction to one click, adressing the customer issues with navigating effectively.
Instead of manually adjusting their zoom level by scrolling on their mouse wheel or pinch to zoom, the user can use labeled jumplinks (also providing spatial awareness on the canvas) to move around with confidence and ease.