Design Update Recommendations

[s-small]

@AquiGorka per your request for review of the current state. Adding some screenshots and comments below

Landing Page

Loading Glitch
When the page loads after a hard refresh or clearing of cache, there's a slight glitch before the landing page appears. Fixes itself after a couple of refreshes and caching or content, but figured you'd want to be aware.
Screenshot of the issue:

Layout and centering
Wasn't sure here if this layout was the end goal. I think the horizontal offset of the "Create and share GIFs..." from the "What's the big deal?" copy is a little odd. If this was the desired outcome, all good. Just looking at it on desktop vs. mobile, I think I like the mobile view better when it is more centered.

vs.

BG Interactive elements?
Will this landing have interactive background elements like we discussed? Could make the page more interesting but also may be too overwhelming. May need to test and have options to stop motion.

Text Hierarchy
In this copy with the bullets about "the big deal", I think each topic could use some more hierarchy on the title (ex. Decentralized, Community-Hosted, etc.) Right now being the same size/weight blends in a little bit for me. Could solve this by making the a bolder weight OR making it slightly larger for some variation.

Could also use some vertical padding between each topic.

Overall page vertical padding
I think in general on this page, there could be a bit more vertical padding between sections. I think a little more breathing space would help the experience. Especially in the bottom section between the gradient and the "how it works" text and between the "start a new community" button and the bottom of the page.

Slider controllable with key arrows?
Could be a nice update to have the slider at the bottom controllable by key arrows to scroll left or right. I find myself trying to do this on a lot of horizontal sliders on the web.

Footer?
Will there be a footer of any kind on this page? Credits, FAQ, linking to Citrusbyte, etc.? Feels a little odd to scroll to the bottom of the page and just hit nothing. That bottom bottom feels as impactful when it is literally almost touching the bottom of the page. Again with padding, but I think some kind of footer would help as well.

Start a New Community

Page Loader Location
When I clicked the Start New Community button from the landing page, the loader appears at the top of the screen then switches to the center right as the page is about loaded

Read More top bar linking
When I click the "read more" prompt in the top bar, it doesn't take me to the landing page like the footer about link does. Takes to a 404.

Also, I would even propose this "peer 2 peer gif app...read more" copy could be centered in the top bar. Right now, I feel like it is part of the logo almost. Like a tagline or something. May look better centered as more of an informational point?

To be continued...

[AquiGorka]

• New Community Page Loader Location
• Read More top bar linking
• Center about text

[s-small]

@AquiGorka picking back up on design/usability issues I'm seeing here (2.8.18)

Your Communities Screen

Page Layout
I think that the content in the center could be bumped down vertically on the page so it is centered vertically. This also sort of applies universally to all content on desktop once in the core flows

(Screenshot)

Header Element Layout
The elements in the header (Thicket logo/logotype on the left and username on the right) could use a little more padding from the top of the page and from either side. So the logo could probably bump in a little to the right and username could bump in a little to the left. I think the header bar in general could get slightly taller to give those elements some vertical spacing as well. Use best judgement on mobile as I know this space is valuable.
One other note here... Any other elements on screen like the Your Communities text or the new GIF button should align with the updated padding from the header elements. Same goes for the footer element alignment if/when that is added back.

Your Communities text/ New GIF button
Same thing here on padding. I think the Your Communities text could use a little padding on the left. I know this New GIF button is changing to the button with text, but same goes here. I think it could use some padding and bump in to the left a little from the edge of the screen on desktop.
Same goes here: Use best judgement on mobile as I know this space is valuable.

Change Thicket username screen
Same as mentioned above about centering content vertically. Could move down to vertical center of screen on desktop.

Footer on Your Communities/Core flow screens?
I noticed there is not a footer on these screens anymore. I know we discussed the "hidden footer" that appears when you pull up on mobile. Will it be executed like that on desktop as well where it takes an extra scroll? Or just normal footer. Regardless, could be a good addition to just have the About and Created by Citruslabs links available universally. Maybe you just removed temporarily.

Community Card Alignment
Again just mentioning the padding to the left. Could bump in some to give breathing room. Same goes here regarding alignment to wherever padding updates to with header/Your Community/footer elements. All should align horizontally.

Inside Community View
Same padding considerations as mentioned above apply here on left/right sides of screen. Also think the "This Community doesn't have any content yet!" copy and all content below could bump to center of screen on desktop.

Also think the Community link bar could take up less horizontal space. Think it could also use some vertical padding from the Your Communities/Name this Community/Leave elements above. And I think in general all of the elements below the header on this screen could use some vertical padding.

To be continued...

[AquiGorka]

• Header Element Layout
• Your Communities text/ New GIF button
• Footer on Your Communities/Core flow screens?
• Community Card Alignment
• Inside Community View

Missing:

• Vertical alignment
• Vertical padding
• Smaller link bar

[s-small]

@AquiGorka picking back up on design/usability issues I'm seeing here (2.20.18)

Home/Welcome

Reviewing this page again, I wasn't sure if updates had already been made. I think a lot of the comments from my first post in this issue still stand.. No need to reiterate comments. Just writing to mention.

Nav Bar

Nav Bar Height

I think the whole nav bar could use some vertical padding above and below the elements. Just more breathing room overall. I mentioned this and it may be on your list of things to do, but figured I'd mention.

Nav Bar Pencil Icon

For the username edit button, could we give that pencil icon the same hover/pressed treatment as elsewhere? Right now looks like it is just a single state.

Your Communities Screen

Vertical Spacing of Content on Screen

I think this page would look better with more vertical padding up top. From the bottom of the nav bar, I think the Your Communities text, the number of communities text and the Create Community button could use some more vertical padding. Also, I definitely think there could be quite a bit more padding from these elements down to the actual Community cards. Feels pretty tight.

Spacing of Card Grid

Right now, when enough communities are created to span the width of the page, the cards are almost touching the Create Community button. So as mentioned above, I think more spacing is better above the cards. Also, is there any way to make cards more responsive on this page? Right now, when I make enough communities for the cards to span the width, there is still some space left on the right side as seen in the screenshot.

Community Card Layout

Looking at the Community Cards, I think that in the hifi designs, there is some typographic hierarchy that is missing here. The community title should be larger and bolder and the Created by text should be smaller and less bold. I believe we ditched the MB amount on the community cards, so that's fine. I would just reference the type formatting and vertical spacing in the card from the designs.

Current view on site:

Reference from designs:

Pin/Unpin States
I like the updated icon on the community cards to unpin the community and leave. Wondering if we can add any hover/click state to that? Right now just feels like you're clicking the same thing as the rest of the card. Know the card itself has a hover state, so may be tough but could play around with interactions there as time allows.

Leave Community Modal from Your Communities
Overall this looks really good. Wondering if we can tie the visual design of this more in with the hifi design version. I like the gradient border, so I'd keep that, but just really focusing on the typographic hierarchy, styling, white space/padding. Biggest things are text size and color, hierarchy and vertical spacing.

Current version on site:

Hifi design version for reference:

Another small thing here may be just having the ability to click anywhere outside the modal to close/cancel and go back to the community view. Up to you on that but just a thought.

Scale of Community Number

I think the scale of the number of communities could get a little bit larger. Maybe even the same scale as the "Your Communities" text but a lighter type weight like in the designs:

Create Community Button

Do we want to use the "Create Community" button with the +? We have it designed out with states so figured why not? The + may also prompt users more visually.

Individual Community Screen

GIF Grid, Page Spacing, Element Location, etc.

A few thoughts on this area of the page...

• I think the link bar could use the same "copy link" functionality where you can press one button and get the copied link. I know this exists elsewhere on Thicket.

• For the Community title in the top left, I feel like that whole field could get a little wider. This way it allows for longer Community titles and gives a little more emphasis to this aspect. I think it's important to call this out more. Right now it doesn't have much impact in my opinion. Maybe the title of the community could even be the same size as the "your communities" text and line up vertically. The text would still be slightly dimmed opacity until clicking on the pen to edit and once it's saved, it would go back to this color. Just an idea.

• Something about the location of the "Leave" and "Report" buttons feels a little off.. Maybe those bump over to the left closer to the Community Title field. This way, it's visually associated with the community. Right now it feels like it's floating sort of off centered and feels out of place. The other option is bumping it over to the right just above the "Create GIF Button". This direction may require everything surround this area to bump down some (x MB, Create GIF Button, Devices Online). If you went this route, I could imagine the Community Title editable field could get bigger and center in the middle of the screen. This would give some balance to the page. Happy to explain any of these options further.

Vertical Padding on Elements

I think everything on this page could use some vertical padding. In general, I think more breathing room is better. Including:

• Padding from header for all elements below (Your Communities, Community title field, leave/report buttons, devices online

• Also think the link bar, X MB amount, Create GIF button, etc. Could use some vertical padding from the top elements on this page

• And lastly, I think the GIF cards themselves could use some vertical spacing from the elements above them.

GIF Card Layout

Some considerations on the GIF Cards. Overall I think these look really good. Just a couple of thoughts.

• On the GIF title on the card, could we center that between the top of the white space and the divider line? Small tweak I think would help.

• Could we bump the Title (in this case "Thicket") and the time uploaded up a little bit vertically to center in the white space between the above divider line and the bottom of the GIF card? Just a small thing I think would clean this up some.

Just for reference, I'm dropping the hifi design layout of the GIF cards here. I think the typographic formatting and layout of text should reflect this more:

Also are we including a user icon on each GIF card similar to the "devices online" colored circle with the letter of the user's name?

Not a big deal if not, just noticed it in the hifis and didn't know if that was killed.

GIF Grid Considerations

I'm wondering how far horizontally the GIF grid extends? How many GIFs wide does it go? 5? Just hard to tell in this view where the GIFs land on the right side and how close they are to the Devices online side bar. Once I see some examples of this, I may have further feedback. Just want to ensure nothing is budding up against the side bar on the right.

Create GIF Button

Do we want to use the "Create GIF" button with the +? We have it designed out with states so figured why not? The + may also prompt users more visually.
Reference from Hifis:

To be continued...

[s-small]

@AquiGorka picking back up on design/usability issues I'm seeing here (2.21.18)

Home/Welcome

Another thing I noticed on the Home/Welcome screen is the "Start a New Community" Button.
Do we want to use the button with the + as mentioned for other locations?
Example: (obviously would need text adapted there as well for "start new" rather than just "create")

Nav Bar

Centered Text Link

I know this "read more" link is probably following the design styles, but I think the "read more" link gets lost in the text. I think it could use more of a prompt. Maybe different color or type weight...Or even underlined? Just a thought. Happy to discuss options

Edit nickname from nav

Change Nickname Modal
Few considerations here...

• This is close to the original design, but I would update the type size, weights and spacing to be closer to the hifi designs shown here:

• Also would center this content vertically on the page as shown in the hifis. Right now it's sitting high up on the screen.

• Also not sure if it is my eyes playing tricks on me or not, but the pencil icon looks super small on the live version vs. the hifi version.

• I think just generally syncing up the styling with the hifis will help this area a lot

Leave Community Modal

Leave Community Modal Styling
Another recommendation on text and modal styling

Live version:

vs.

HiFi design version:

• I don't mind the gradient background border here. More focused on scaling of the modal, text styles, text color variation, text scaling, spacing, etc. For example, all of the text on the live version is the blueish/purple color. In the Hifi version, it has color variation for different areas of text. There is also variation in scale of text on the hifi version. Like the title is much larger, main text its own size and note text much smaller and darker color.

Report Malicious Content Modal

Report Malicious Content Modal Styling
Another recommendation on text and modal styling

Live version:

vs.

HiFi design version:

• Again, I don't mind the gradient background border here.

• More focused on scaling of the modal, text styles, text color variation, text scaling, spacing, etc. For example, all of the text on the live version is the blueish/purple color. In the Hifi version, it has color variation for different areas of text. There is also variation in scale of text on the hifi version. Like the title is much larger, main text its own size and note text much smaller and darker color.

• Also there is some variation in titles on the live version. Like instead of asking for the "thicket nickname" it just asks for "name"

• Another consideration here is vertical spacing. The space between "Incident Details" and the text box is very close. Same with the text in the text field. Could use padding from the boundaries of the field.

• Lastly, I don't think this needs to be so wide horizontally. Reference the width of the hifi version. Just feels really wide in the live version

Thank you for reporting Malicious Content Response

Thank you for reporting malicious content response styling
Small thing, but the response after reporting malicious content could use some styling updates

Live version:

vs.

Hifi Design version:

• Think this obviously use some text styling updates to scaling and spacing and weights

• Also this needs to bump down to center of the page rather than at the top

Individual GIF View

Individual GIF View styling and layout
Just some comments about the individual GIF view in the modal

I think this area could use some styling and layout updates based on the hifi designs

Current live version:

vs.

Hifi design version:

Focuses:

• Biggest thing is text styling (scaling, colors, weights should be more in line with hifi version)

• I think this could use more vertical spacing to be more in line with hifi designs as well.. For instance, in the live version, all of the text, share icons and buttons are pushed up vertically. These should be spaced and aligned like the hifis

• Horizontal padding needs some updating in the live version. The text titles feel too close to the sides of the white box they're in.

• This is a small thing, but I might even beef up the gradient border a little bit just to give some breathing room around the content

• I think the "Save Changes" button should be much wider to be the primary CTA here. See the designs for reference. And I don't mind the delete button here rather than text link shown in the hifis, so maintain that.

• I would either evenly space out the social media icons from left to right starting under the "Save & Share GIF" text or left align them to align under this text. Right now they're centered which feels sort of off balance from the rest of the left aligned content.

• I noticed the pencil icon to edit the gif created by or gif caption has no hover or pressed states as outlined in the design syles

• I noticed that the right half of the modal is white in the live version. In the hifis, it's slightly gray in color. #F6F9FD to be exact.

• When viewing a GIF in a Community with multiple other GIFs, did we ditch the functionality of left/right arrows to browse next/previous GIFs? I think that could be a nice addition back.. Reference:

Individual Community - No GIFs

Individual Community - No GIFs - styling and layout
Just some comments about the empty Individual Community state styling/layout

Again an area to compare with the hifis

Live version:

vs.

Hifi Design version:

• Obviously the vertical spacing is off. The live version, the :( and text content is too far up on screen and should be centered

• The text styling and layout of the content about no content needs updating to reflect hifis. (title should be larger scale and lighter weight) (more vertical spacing between elements and text)

• Also if you're switching out all of the other Create GIF buttons with the version with the + that should be updated here as well.

Your Communities View

Your Communities - Card thumbnail?
Wasn't sure on this screen what the end decision was on what would be displayed in the cards for the community overview. Know we discussed a collage of GIFs or some cycling through. Figured I would drop a note here as a reminder to resolve somehow. Happy to discuss options.

Create a GIF Screen

Create a GIF! screen - text, formatting, layout
This screen needs some updates based on hifis.

Live version:

vs.

Hifi design version:

Points of focus:

• The live version, everything is much smaller including the text and the button to create the GIF.. Text should get a lot larger to reflect designs and button could get bigger too because it is the primary CTA here.

• Also just general spacing on the live version... I think the text could move up higher and the button could go lower. All still centered, but just vertically spaced out like the designs more.

Recording GIF bar

Recording GIF scale and formatting
I think that in the hifi design version, the thicket recording gif bar with larger text that has some spacing between letters and is a little bolder looks better.

Also it isn't shown in my screenshot, but I think we decided to not display the nav bar when it says "Recording GIF" and just have the screen be the webcam view with no branding then branding appears back after the GIF loads up. Right now, the nav bar still appears when the Recording GIF bar is up.

Live version:

vs.

Hifi design version:

Just a moment, we're putting your GIF together

Just a moment, we're putting your GIF together - scale and formatting
I think that in the hifi design version, the loader and Just one moment... text and supporting text all are formatted better. I would follow that as reference.

Also noticed that the loader doesn't show a % anymore. Might be a nice addition if not too difficult.

Generally I think this screen just needs updated scaling of the loader to be larger, scaling of the text and updated text weights like the hifis.

Live version:

vs.

Hifi design version:

Save your GIF! Modal

Save your GIF! Modal - scale and formatting
Lots of the same comments here on text styles, layout and overall formatting.

Live version:

vs.

Hifi design version:

Some points on this screen:

• I think the gradient border could be beefed up some around the content. Just some breathing room like the hifi shows

• Obviously text scaling, weight and color updates should reflect the hifis. Same with the spacing between text

• The right side of the modal is much smaller in the live version which sort of makes the content within feel very compressed horizontally. I think this area could be wider horizontally like the hifi to allow for breathing room and let these sections be wider.

• I noticed we ditched the screen before this screen where you could view your GIF and decide if you wanted to retake from there
  (reference from hifis:
  )
  I don't mind removing this screen and going straight to the Save your GIF! modal. However, I think that the way the buttons are displayed in the live version now could use some work. I think that once the right side of this modal (white section) is wider and allows for wider text fields and buttons, we should make the Save button wider to be the primary CTA. Then have the Retake button directly below but a not as wide as the Save button. Then I think that the Cancel button could just be a text button rather than one with a button box. This way the two primary functions are called out with buttons and if the user wants to cancel, it has the least dominance as a text button.
  Current live version referenced:

• I noticed that the right half of the modal is white in the live version. In the hifis, it's slightly gray in color. #F6F9FD to be exact.

• Lastly I would just space content in the white box vertically as shown in the hifis. Right now everything is more pushed to the top.

Modal Background Colors

All Modal "white" backgrounds
Just wanted to note that the backgrounds of modals are supposed to be #F6F9FD
I think in most cases you have this covered, but I noticed on those individual GIF views the backgrounds of half were white rather than the light gray.
So just for consistency wanted to call out across the board.

To be continued...

[AquiGorka]

Work in Progress

Ready:

• Vertical align content. Note: aligning to the center seemed off for some screens, with Sarah we ent for 30% down (rather than 50% for centering)
• Nav Bar Height. Note gave it a 1em padding (2x top & bottom), I think it is too much. It was at 0.5em before and you thought it was too little. Let me know if this feels right.
• Communities: Vertical Spacing of Content on Screen
• Community Card Layout
• Leave Community Modal from Your Communities
• Change Nickname Modal
• Leave Community Modal
• Individual Community - No GIFs - styling and layout
• Scale of Community Number
• GIF Grid, Page Spacing, Element Location, etc.

Pending:

• All of the landing page because there is a new landing page in the works
• Nav Bar Pencil Icon states
• Communities: Spacing of Card Grid to fill available width
• Pin/Unpin States
• Leave Community Modal from Your Communities
• Scale of Community Number
• Create Community Button
• Individual Community Screen
• Close leave modal on click outside
• All Modal "white" backgrounds
• Create Community Button
  ... wip

Up for discussion:

• wip

[s-small]

@AquiGorka

I'm still seeing some inconsistencies in the live version of Thicket vs. the hifi designs, even in the issues you marked "Ready" above in the checklist.. Maybe I am just not seeing a current version?

Specifically:

• Community Card Layout - This feels better with alignment, but text styling is still not quite consistent with the hifi designs I don't think. It looks like in the live version the community title text is 16pt and the hifi version its 20pt. And the Created by text is 1pt too small (live version is 13pt. hifi version is 14pt.) Lastly the mb text is 13pt in the live version and 12pt in the hifis

• Leave Community Modal from Your Communities - Think this looks better, but again some inconsistencies in typography styling from the hifis... Live version:
  vs. hifi version:
  

• Change Nickname Modal - Styling and formatting here still is a little off from the hifis. The header text should be larger and lighter weight, spacing between the header and copy is inconsistent, body copy is a couple pts too small, and the whole thing is still appearing pretty high on my screen compared to designs... Live:
  vs. hifi:
  

• Leave Community Modal - same comments here as the other leave community modal above

• Individual Community - No GIFs - styling and layout - **Still not showing up centered for me, but lots better. Also it this content seems to be slightly off center horizontally. And also styling between live version and hifi is still off some (header text too small and not right weight. body copy couple pts too small, overall vertical spacing between these elements of the content should be a little more once text gets larger)

**

• Scale of Community Number - Think this looks better. Wondering if it makes sense to have it so far away horitzontally on the page from the title "Your Communities" and wondering if the Your Communities text should be the same size as the number of communities...

• GIF Grid, Page Spacing, Element Location, etc. - Think overall the spacing and location of things is looking better. The GIF cards still have some styling inconsistencies and the title of the user is pushed way down in the card. Still some considerations to look at on where things are located on the page, but we can discuss further once other things are updated

Additional Comments:

• Vertical align content. Note: aligning to the center seemed off for some screens, with Sarah we ent for 30% down (rather than 50% for centering) - I think this sounds fine. Looking at the screens now, things seem to be in a much better place
• Nav Bar Height. Note gave it a 1em padding (2x top & bottom), I think it is too much. It was at 0.5em before and you thought it was too little. Let me know if this feels right. - I think this feels better in my opinion, but open to reducing a bit if you don't like it
• Communities: Vertical Spacing of Content on Screen - I think this does feel better overall

Status Question

I think a lot of the checklist items you have listed cover most of the big recommendations I had, but noticed some of the things I mentioned further up in this issue weren't mentioned. Is your checklist holistic or just your first priorities? Just wanted to check to make sure all was noted. Not trying to be a pest or overbearing. Just trying to make things as consistent as possible with hifis and make Thicket super clean design wise ;)