Design Notes

2025-02-02

I’ve been taking a look at the competitive landscape and I believe that we can make a few small edits that provide a more dynamic user experience.

User Experience/Design

While it looks good, there are a number of issues that scream that this isn’t an enterprise-grade platform. We need to make a number of edits to the platform to offer users with a more consistent user experience.
[Cellstrat] The “thinking” process should be default closed. If you don’t know what I mean by that, ask questions to clarify. While it was nice to have it open, the consistent issue of opening and closing and re-trying make it look like the platform is broken most of the time. Closing with make is seem like it’s taking longer, but at least it won’t look broken.
[Cellstrat] The thinking process needs to have a clear visual clue to communicate that something is going on in the back end. I’ve provided examples of the text shimmer. If you don’t think you have the required information to proceed, ask. See OpenAI’s shimmer process for o3-mini
[Cellstrat] The initial comments I received about the platform included a concern about the ‘loading’. To the user, this seems that every new question includes a load step. To the user it seem repetitive since this might have been the 5th task. “Why does anything need to load again? Didn’t it load last time”. Please suggest language that is more in line with the backend process that doesn’t make it seem like the app is broken.
[Cellstrat] Do not continue to share with the users when there is an issue and you need to take another approach. Again, this looks like this is an error to the user. Every other platform keeps these reworks more private. Please think like a user. Retrys should not have their own “thinking” section.
[Cellstrat] The initial welcome messages are not left aligned with the other text and operate at a much slower pace. This is supposed to be exactly like the agent response so the typewriter speed should approximate the response speed and the text should be aligned.
[Cellstrat] The right panel need to follow the requested design.
[Cellstrat] The right panel should include the data file(s) used for the data set.
[Cellstrat] Please provide a rough style-guide outline so that we know what everything should be ahead of time and if we create new section, we have a common style guide for instructions.
[Cellstrat] If you have any questions about the users flow, follow what you see in sana.ai.\
[Cellstrat] Fix the broken process for whenever the users asks for an Edit. It current throws an error and crashed the app.

Design Changes


Chat Focus - Home Page

I think that we need to put the idea of “intent to action” more forward on the home page by re-arranging the way we present. I’m trying to do a blend of Sana.ai, Gemini, ChatGPT, and Clause with the following.
WireframePro-Lia-Listings-New-Home-02-03-2025_09_39_PM.png
It is cleaner and more focus to feel like a model’s chat.
Notes,
See how the top navigation is persistent on every page. This is a current expectation for AI interfaces now.
Just like ChatGPT and others, we are moving the idea of navigation underneath the chat bar.
The coloring of the icons should match the coloring of the cards (generally) - see below. We will have a set if colors for the cards based on the topic. Listings is going to be orange (see the Tasks below - this is going to be the background of the Listing Cards.
The icons in the example are not correct. We need to find ones that make sense. The labels are correct. These should serve to replace the buttons from the current design.
The cards are the tasks from the home page but we are now switching the small versus large cards. The home page gets the small cards without the description and the Tasks page gets the cards with the descriptions.
There will NOT be icons in the upper left of each card. Instead, we will use the same content as our current cards, just with a different size and a more colorful background. See the color cards from Design notes of 2025-01-18.
The entire card section can be collapsed (see Clause as the example). The View all takes the user to the Task main page.
In the top navigation you will see the ‘Focus’. This is the drop down selection that matches the same as the current navigation items of “Listings, Reviews, Explore Lia, Local SEO”


Focus Template

This would be the landing page for one of the Focus selections, ‘Listings”
We may change this to put the cards underneath like the home page. I don’t yet know. Maybe we go with the tasks above but we collapse by default (sample below).
Max number of Tasks is 12.
We need to try to vertically center the page so that when the Tasks are collapsed we get the look at feel of a typical chat welcome that it generally in the center of the page.
WireframePro-Lia-Listings-Manage-Listings-02-03-2025_09_58_PM.png
WireframePro-Lia-Listings-Manage-Reviews-Collapse-02-03-2025_09_55_PM.png
WireframePro-Lia-Listings-Manage-Reviews-02-03-2025_09_59_PM.png

Chat Experience

I’m looking for something a bit cleaner. Closer to Gemini and ChatGPT. You will see from the image below that are are trying to combine the thought process and the output.
WireframePro-Lia-Listings-Chat-Version-02-03-2025_10_02_PM.png
The font of the “thinking” label is the same and the normal text, not the code.
While thinking, I like the shimmer effect in color shared before. Do you still have this link?
I’ll provide a simple icon - again think something like ChatGPT.
The alignment of the thinking and the output should be the same. See above and ChatGPT.
The code part is great, we just want it default closed for now. Unless the user chooses to open up the code section, it will shimmer until complete and then revert to the normal text color.

Task Template Page

Let go with what we have but the cards should include the description on this page since with the large size from the current home page design. ​
orange.avif
For review tasks ​
Loading…
The card backgrounds (on all pages) should be a little more of a color sweep that corresponds with the color of the Focus. I’m working to provide exact samples to use.
For all cards (large & medium), include the 3-dot drop down menu in the upper right to edit or delete.
For all cards, include the timer icon in the lower right if scheduled.
All-Tasks-Schedule-Edit.png
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.