Improving the visibility of system status and user feedback

Improving the visibility of system status and user feedback

As an Artificial Intelligence software, Archie needs to relayed system status as it generating, saving, and propagating information. With a lead designer, I worked on the UI and motion design to improve the transparency and visibility of system and user feedback.

Timeline

1 MONTH (April 2024-May 2024)

Product Info

Archie by 8base: AI software that transforms application ideas into comprehensive project plans. It generates detailed requirements, implementation strategies, etc.

PRODUCT

Archie is an AI Companion That Designs and Plans Your Digital Product in Minutes

Archie's VP of Product asked the design team to troubleshoot user feedback on Blueprint (free) and Requirements (paid). The existing system status updates were insufficient and unclear, with either no visible updates or updates easily confused with other functions. This resulted in higher bounce rates, negative user impressions, financial impacts due to delayed business plan loading, and increased support inquiries.


[Users] need to look at Archie and think "“I’m waiting for AI to work” and not "this is taking too long to load."


We entered the design process with few goals in mind:

  • increase the number of propagations in Blueprint to encourage upgrades from free plan to paid

  • collaborate with development to decrease generation time as well look and feel to raise number of generations in Requirements

  • Satisfy existing customer base to increase in project purchases in the latter

Archie's VP of Product asked the design team to troubleshoot user feedback on Blueprint (free) and Requirements (paid). The existing system status updates were insufficient and unclear, with either no visible updates or updates easily confused with other functions. This resulted in higher bounce rates, negative user impressions, financial impacts due to delayed business plan loading, and increased support inquiries.


[Users] need to look at Archie and think "“I’m waiting for AI to work” and not "this is taking too long to load."


We entered the design process with few goals in mind:

  • increase the number of propagations in Blueprint to encourage upgrades from free plan to paid

  • collaborate with development to decrease generation time as well look and feel to raise number of generations in Requirements

  • Satisfy existing customer base to increase in project purchases in the latter

Archie's VP of Product asked the design team to troubleshoot user feedback on Blueprint (free) and Requirements (paid). The existing system status updates were insufficient and unclear, with either no visible updates or updates easily confused with other functions. This resulted in higher bounce rates, negative user impressions, financial impacts due to delayed business plan loading, and increased support inquiries.


[Users] need to look at Archie and think "“I’m waiting for AI to work” and not "this is taking too long to load."


We entered the design process with few goals in mind:

  • increase the number of propagations in Blueprint to encourage upgrades from free plan to paid

  • collaborate with development to decrease generation time as well look and feel to raise number of generations in Requirements

  • Satisfy existing customer base to increase in project purchases in the latter

RESEARCH

What does this look like in Blueprint and Requirements

Improving the visibility of system status meant different things as the Blueprint and Requirement pages functioned differently. To understand in more detail at what points users needed feedback, I:

  • Analyzed Hotjar data on user activity (specifically refreshes and wait times)

  • Watched unmoderated user recording of what they were seeing and saying as they modified content in Blueprints and Requirement

  • Collaborated with the lead designer to identify areas of improvement in the flow

Improving the visibility of system status meant different things as the Blueprint and Requirement pages functioned differently. To understand in more detail at what points users needed feedback, I:

  • Analyzed Hotjar data on user activity (specifically refreshes and wait times)

  • Watched unmoderated user recording of what they were seeing and saying as they modified content in Blueprints and Requirement

  • Collaborated with the lead designer to identify areas of improvement in the flow

01

In Blueprint

  • Users need to be made aware that content auto-saves earlier

  • Differentiate saving and propagating

  • Make obvious the option to propagate and change all other impacted sections based on edits made

02

In Requirements

  • Users need to be able to differentiate between skeleton content loads and AI generating

  • Improve clarity and communication of system status

  • Users need to be able to differentiate between skeleton content loads and AI generating

  • They need to look at Archie and think "“I’m waiting for AI to work” and not data is taking too long

  • Improve clarity and Communication of system status

  • Users need to be able to differentiate between skeleton content loads and AI generating

  • They need to look at Archie and think

  • Improve clarity and Communication of system status

Solution:

With reviews by leadership and some refinements, we landed on our solution.

The navigation rail updates users on generation progress, even if they leave the page.

spinners around the generate button & status message that follows generation

progress bar to visually indicate how far along the process is

CHALLENGES

Thinking beyond simple skeleton screens.

Originally I designed progress bars with real-time updates, but this approach proved unfeasible because we couldn't provide users with accurate time estimates due to the unknown variability in the generation process.

Additionally, the product team sought a design that clearly distinguished between content loading time and generation time. This challenge required us to move beyond simple skeleton screens and develop a more sophisticated solution.

My initial instinct was fancy animations that would distract users from wait times, but empirical research shows they actually increase perceived wait time. We moved away from elaborate loaders and instead incorporated a subtle spinner around the existing generate button. This design choice reinforces to users that AI generation is loading, not general content.

To the iterations graveyard

Final selection

To go with the new loader I began iterating designs based on our branding and icon library complimented with the growing recognizable AI start motif.

Icon Iterations

Archie is generating...

Final Version

Blueprint

Step-Based Progress to encourage propagation

This was more straightforward simpler task to tackle as the pain points were more glaringly obvious-with the exception of a delayed button state change, there were no visible system updates. This led to significant consequences, as many users navigated away from the section and/or page, resulting in failed task propagation.

To address the issue, the process was broken down into distinguishable steps, each signified by a change in system state to to keep users informed as they modified tasks.

User interaction states

Final Designs

Blueprint Saving

  • As user begins to type and modify the text, Propagate button becomes active.

  • Once they move away to another field/defocus from the edited text field, the edited field automatically saves (message clearly stated informing users).

  • A confirmation message flashes (should remain for ~3 seconds) that the field has finished saving and reminds the user that they should propagate

Requirements

Generate entire section

With developers, we talked speeding up both generation and content load time. Beyond the lag, we collaborated to provide progressive disclosure of generated text.

Generate an element

With developers, we talked speeding up both generation and content load time. Beyond the lag, we collaborated to provide progressive disclosure of generated text.

Next steps

Following the launch, the Product team will monitor key metrics like successful propagations and generations, and reduced bounce rate. We anticipate more free users upgrading from Blueprint to Requirements, and existing paying customers increasing project purchases due to improved satisfaction with Archie generation.