Design team summaries

[KubaMikolajczyk]

This is a long-living issue for the Atlas design team to post summaries of their work to share with the community

[KubaMikolajczyk]

14.06 - 18.06

1. What was achieved:

• Set up atom components and flows for the new Player
• Discovering available options for setting up a new Figma structure for JS/Atlas
• Sync design-tech over the progress made during last two sprints
• Explore possible "discover videos" patterns & brainstorm
• Set up atom components for Discover videos
• Rendering test pattern animations and discussing interactions in the new Discover videos flow
• Setting up design components architecture for the new Player
• Player flows: next/prev video; toggling CC/ subtitles; toggling cinema / default mode; casting, additionally: scrubbing
• new icon design for Player (Cast, settings, captions, low volume, previous, link, share, cinema / default mode)
• Setting up discover videos prototype & define interactions
• Design the new proposed searchbar experience & show it on prototype
• Exploration of motion patterns which will show while hovering category card

2. Departures

• There were no blockers
• Half of Friday we were attending company's event

3.Github

• Player : https://github.com/Joystream/atlas/issues/785

[KubaMikolajczyk]

21.06 - 25.06

1. What was achieved:

• Player flows: finish states, error states, loading states and their responsiveness

• Creating separate video player-related GitHub issues

• Player flows: settings

• Github structure

• Analyze of all past design Issues

• Developing a new pattern for labeling issues & label all existing design issues

• Discover videos category page 2 versions

• Search autocomplete & new searchbar proposition

• Player flows: settings, keyboard shortcut indicators

• Additional icons and variants for Player

• cyclic wednesdays sync with tech team

• & a lot of meetings around figma structure, github structure, motion in prototypes and feedback sessions

2. Departures

• It took some time to analyze existing issues on GH and define a way of labeling new issues - but I think we are now a lot more proficient with the tool

3. Opens

• Discover & Search prototype: https://github.com/Joystream/atlas/issues/874
• Progress made on player
• Misleading interaction https://github.com/Joystream/atlas/issues/795
• Surface Studio better https://github.com/Joystream/atlas/issues/538
• To discuss - avatar clear : https://github.com/Joystream/atlas/issues/737

[KubaMikolajczyk]

28.06 - 02.07

1. What was achieved:

• Finalized designs and prototype for all player flows, except for sharing options
• Documented player flows for MVP implementation
• Documented player components for MVP implementation
• Met with with Bartosz to discuss player implementation details
• Recorded video walkthrough of the player prototype
• Partially updated player-related GitHub issues to reflect the progress (to be finished on Monday)
• Consultation & feedback sessions
• Icon Design for Player: +5s, +10s, -5s, -10s, Share, Replay, Pip, CC on, CC off, Compact view, Cinema view, Subtitles on,Subtitles off, Settings on, Settings off
• Icon Design for Side menu: Explore/Discover
• Quick logo exploration for Studio, applied on the Publisher screens for review
• Implemented feedback to video content pages
• Divided all screens & components of video content pages into separate pages
• Reworked video tile component
• RWD for viewer channel
• Recheck the channel cover scaling solution & propose alternatives

2. Departures

   • There were no blockers

3. Opens To review: https://github.com/Joystream/atlas/issues/878#issuecomment-872097425 Progress made on player

[KubaMikolajczyk]

05.07 - 09.07

1. What was achieved:

• Finished working on #2506
• Updating player component related GitHub issues
• Define rules for scalling video tile rows
• Finish video tile
• Rework the grid system
• Continuous catch ups with Bartosz regarding player implementation, taking care of minor adjustments,
• Figma migration: files and organization set up,
• Player component: documentation and design adjustments,
• Player flows: sharing.
• New title area component
• Viewer channel prototype
• Viewer channel RWD

2. Departures

• There were no blockers
• Next week 10-17.07 - Kuba is on vacation

3. Opens

• Are we ok with random people with viewer access in the file? [Adam]
• 🎥 Video update for issues below : Video tiles + Title area + Channel ☝️ Issues from update for review:
• https://github.com/Joystream/atlas/issues/928
• https://github.com/Joystream/atlas/issues/908
• https://github.com/Joystream/atlas/issues/894
• https://github.com/Joystream/atlas/issues/864

[bedeho]

Feedback

Overall, phenomenal work, and really impressive how detailed you have been on all the interactions on those seemingly simple components, its really easy to forget how many different states and input types one has to cover.

Details

• If I understood you correctly, you have opted to stop doing continuous scaling of title area on videos, and instead doing step wise scaling? It was a bit confusing, because in the beginning you say that there is no scaling, in order to avoid breaking the hierarchy with section headers that are fixed size, but then later you mention step-wise scaling. To me it seems like some kind of scaling is def. needed, and if section headers are not scaled - and this creates a conflict, then the proper remedy is probably to scale them also. Now whether continuous scaling or step-wise scaling is best, I would actually say the former, but its not that critical I guess. The core issue is that step-wise scaling does not actually solve the problem you initially describe w.r.t. section headers?
• One thing which is not entirely clear to me now is how different scenes which show grids of videos will deal with responsiveness now. The channel clearly now has a 6-column max grid now, but what about the video pages, like Home, etc. The Figma does not seem to say anything about this.
• I don't think it really makes sense to use toasts and notification counters for following & unfollowing events. These are synchronous events triggered by the user, toasts are for async events where the user genuinely is not aware when something will happen, and the notification counter just invites the user to go to the following page for now reason. Same goes for unfollowing.

[KubaMikolajczyk]

Details response:

1. The example of headers and visual hierarchy was not be the best one I could use there. If we would scale everything altogether along with text we would have to do this with all other elements to evade scaling conflicts and retain the same content structure. However, this is not a recommended practice (can cause a lot of unpredicted visual bugs) and we usually use the step approach and just show more content on wider pages. This step scaling approach allow the video titles to stay relevant & readable on all screen sizes and allows us to leave all other components at their initial size. In this approach we have only two sizes for video title font and the video thumbnail scales accordingly to the grid & available space.

2. Yes! This wasn't covered yet and responsiveness of video content pages will be on my plate this week. If it comes to channel - in the new responsiveness it would have 4 videos in a row max (Channel rwd: https://www.figma.com/file/TGUpBXgXf9ceMvHbRB5BIx/Joystream-Atlas?node-id=9951%3A252666) - because it would use this more narrow type of grid - unlike video content pages where the maximum width of the grid would be larger - this approach is still up for discussion but we have worked out a set of rules to define the RWD here: https://www.figma.com/file/Cc3VDoK6qglJ617ChA2EMr/Foundation?node-id=11%3A6540

3. OK! We can remove them from this action because the button changing will be enough to notify about the action. On the other hand I think that we shouldn't say that toast are reserved for async events only as they're widely used for confirmations, simple notifications, and low-priority alerts that do not need to completely interrupt the user experience. Toasts themselves need a little more design in their behaviour in our system - but thats another issue. I will remove them from this flow :)

[KubaMikolajczyk]

19.07 - 23.07

1. What was achieved:

• Catch-ups with Bartosz regarding the player component implementation, taking care of minor adjustments.
• Finalized documentation for all the flows related to the player component.
• Closed all the issues and completed the "Player design" milestone on GitHub.
• Refactoring and discussing some of the Figma design components (Window/Modal & Icons).
• Designed full responsiveness for pages Home, Popular, New & Noteworthy & Browse channels
• Adjust carousel component for responsiveness issues
• Catch-ups with Rafał regarding video content pages implementation

2. Departures:

• Next week: 26.07 - 30.07 Adam is on vacation

3. Opens

• Adams progress over the player
• https://github.com/Joystream/atlas/issues/893

[KubaMikolajczyk]

26.07 - 30.07

1. What was achieved

• Component naming unification session with TL to create a common understanding between design and tech
• Redo of home RWD and using new set of breakpoints for future RWD
• Adjusted inputs to save space for helper text
• Unify the experience for both viewer and publisher when using the sidenav (hovers, colors etc.)
• Fix spacing of elements in sidenav
• Better showcase browse channels & followed channels functionality with prototype
• Started exploration of empty states & come up with initial designs
• Brainstorming session with Klaudiusz on fixing uploading flow

2. Departures:

• Adam is off

[KubaMikolajczyk]

02.08 - 06.08

1. What was achieved

• Adjustments to the mobile version of the player component, syncing with Bartosz to consult the implementation,
• Refactoring of all icon components in Figma,
• Consulting implementation of skeleton loaders with Diego and Klaudiusz,
• Started working on the Discover page.
• Reiterated on rules for selecting channels for their sections
• Created a shared section component for all sections
• Checked and adjusted title area to fit in all places its currently used
• Unified and redesigned component for empty states
• Used new set of breakpoints for RWD to be aligned with Tech & redid the RWD for all video content pages
• Proposed a solution for uploading flow problem & created a prototype with it

2.Departures:

• none

3.Opens:

• https://github.com/Joystream/atlas/issues/1063

[toiletgranny]

09.08 - 13.08

1. What was achieved:

• New designs for the Discover page are ready to be reviewed #1132,
• New designs for the Video category page are ready to be reviewed #1133,
• A set of icons for each video category has been created and is ready to be reviewed,
• Design components have been moved to a separate library file in Figma to ensure uninterrupted access to our main Figma file (we were reaching Figma memory limits for a single file for quite some time now).

2. Departures:

• Kuba is on sick leave since Tuesday, expected to be back on Monday.
• Because we didn't know how long Kuba would be off ahead of time, we didn't plan on picking up on his work. This means the work Kuba had planned for this week hasn't been done.

3. Opens:

• https://github.com/Joystream/atlas/issues/1133
• https://github.com/Joystream/atlas/issues/1132

[KubaMikolajczyk]

16.08 - 20.08

1. What was achieved:

• Minor Figma design component improvements,
• Designs for the Discover page, including RWD, have been reviewed & finalized #1132,
• Developer handoff for the Discover page has been conducted (Adam, Diego, Klaudiusz),
• Designs for the Video category page are still a work in progress (new iteration, based on Bedeho’s last feedback), expected to be ready for review early next week
• Changed video workspace button wording
• Indicated selected video file better
• Added new video action on my videos page
• Introduced better handling of file select steps
• Added info about dimensions and aviailable formats to dropzone for video files and thumbnails
• Reiterated on upload status group component accordingly to feedback
• Improved handling of errors in file select component due to lack of error visibility
• Added toast after video upload with video preview on Joystream
• Introduced handling the storage limit while uploading
• Proposed new solution for tedious succes dialog manual closing
• Worked on large prototype showcasing whole upload flow and takling all of the spotted issues along the way - currently after the round of inner feedback session I'm implementing spotted issues in defined solutions and preparing to record an update about it early next week for review

2. Departures

• none

[KubaMikolajczyk]

23.08 - 27.08

1. What was achieved:

• Refactoring design components in Figma,
• Finalizng the designs for the Video category page for the final review,
• Video category page handoff: documenting flows, RWD and new components.
• Implemented feedback to upload improvements sprint from Bedeho, TL and devs
• Organizing all screens and components from upload improvements flow for implementation

2. Departures

• none

[KubaMikolajczyk]

30.08 - 03.09

1. What was achieved:

• Research and exploration for design tokens in Atlas
• Scope planning for the Search sprint
• Research and exploration for the Search sprint
• Finished upload status group component + added compact version
• Finished new RWD for current state of my uploads with new breakpoints
• Fixed pagination component
• Finished implementing all changes from sprint to my uploads page & its components
• Checked implementation of feedback to video content pages & commented
• Worked on file stepper component
• Atlas weekly sync
• Design & Tech sync
• Sync with Bartosz about my uploads improvements implementation
• Implement all changes & organize file select component
• Implement changes to step, stepper & file stepper component
• Fix channel search component & resolve issues around that

2.Departures

• none

[KubaMikolajczyk]

06.09 - 10.09

1. What was achieved:

• worked on tooltip component
- docs to option card component + notes to progress indicators
• Action bar component rework
• Work on documentation for file step
• Add documentation for dropzone thumbnail constrains
• Work on finalyzing the video workspace page
• Merge tooltip component with its subcomponents & add documentation
• Work on channel search for mobile
• Implement changes to prototype (title being added & differences in components)
• Review implementations from Bartosz
• Work on new search experience
• Developing unified design tokens

2. Departures

• none

3. Estimates

• Upload flow improvements (@KubaMikolajczyk) - expected 15.09 - now only finishing my videos page documentations & 2 more minor tasks to finish
• Search experience (@toiletgranny) - expected 24.09 - but have to double check on monday

[toiletgranny]

13.09 - 17.09

1. What was achieved:

Kuba:

• Add new video tile component
• Add processing tile component
• Add placeholder tile component (loading state)
• Implement changes done to my videos during the sprint
• Unify all spacing at publisher pages (workspace, uploads, my videos)
• RWD for all my videos pages
• Prepare dialog for handling the failing storage (without storage info)
• Consultations with Bartosz
• Reviews of implementation from Bartosz & Rafał
• Designed player overlay for still processing video (initial proposition)
• Designed one-click video tile play experience (initial proposition)

Adam

• Updated designs for the new search sprint https://github.com/Joystream/atlas/issues/1331,
• Further research & experimentation on Atlas design tokens (specifically: colors & animations, focusing on what's needed for the "New search experience" sprint, based on W3C DTCG specification editor's draft),
• Changes & adjustments to Figma design components: "Channel card", "Tab", "Badge", "Dialog" & "Popover",
• Implementation consultation with front-end developers (Diego on the "Video category" page, Bartek on the player component loading state & Rafał on the stepper dialog animations),

Nina

• Onboarding to the project 🎉,
• Research on most popular NFT marketplaces.

2. Departures:

• Kuba is on vacation until October 1st (2 weeks from now)

3. Estimates:

• New search experience (@toiletgranny) — expected to be finished by 24.09,
• Upload flow improvements (@KubaMikolajczyk) — designs phase is finished.

[toiletgranny]

20.09 - 24.09

1. What was achieved:

• Designs for the new search experience have been approved by both Bedeho and Klaudiusz (with minor adjustments),
  • Started working on the documentation of RWD and user flows for the "Search results" page,
• New, changed & adjusted Figma components:
  • Added a new "Global search" design component, along with a set of atom design components to support it, documentation & flows,
  • Added a new "Bottom navigation" component,
  • Refactored the "Top navigation" component to accommodate for changes connected to the new search experience,
  • ...and other small changes & adjustments requested by developers.
  • Discussed & agreed-upon next steps for Atlas design tokens with Klaudiusz, in the context of the upcoming implementation of the new search experience, and the concept of account/membership on the viewer experience (for NFTs):
  • Color tokens,
  • Animation tokens,
  • Implementation consultation with front-end developers regarding Kuba's designs for upload flow improvements and designs for the "Video category" page,
  • Reviewed https://github.com/Joystream/atlas/issues/1329: no clarifying questions poped to my mind as of now,

2. Departures:

• Didn't have a chance to review https://github.com/Joystream/atlas/issues/1374 yet; I plan on doing it together with Nina, on Monday,
• Didn't finish working on the new search experience today (as planned), but there's very little work left to be done, and I plan on finalizing this on Monday,
• Kuba is on vacation until October 1st,
• Nina has been on sick leave this whole week, expected to return to work on Monday, September 27th.

3. Estimates:

• New search experience (@toiletgranny) — 🚨 delayed: expected to be finished by 24.09 27.09 (Monday, instead of Friday)

[toiletgranny]

27.09 - 01.10

1. What was achieved:

• NFT: Conducted further desk research on "sign-in/up" patterns with different wallets on various NFT marketplaces (Nina & Adam),
• NFT: Reviewed https://github.com/Joystream/atlas/issues/1374 & https://github.com/Joystream/atlas/issues/1388,
• NFT: proposed a revised MVP scope, formed clarifying questions, assigned user stories to specific app views/pages in a Google spreadsheet file,
  • 🚨 A reminder: Nina's reply to Bedeho's comment is left with no response so far

Adam:

• Finalized documentation for the new search experience,
• Met with @kdembler & @wyrdrender to discuss and kickoff the new search experience implementation,
• Continuous implementation consultation with front-end developers in regards to:
  • Kuba's designs for the upload flow improvements,
  • Designs for the "Video category" page,
  • Designs for the new search experience.
• Started design explorations on the Video page, in the context of NFT, based on user stories included in MVP,

Nina:

• Revision of the NFT MVP scope, based on prior desk research on NFT marketplaces,
• Started design explorations on the new My NFTs Member profile page, in the context of NFT, based on user stories included in MVP,

Kuba:

• Getting familiar with project changes after the vacation,
• Reviewed implementation of upload flow improvements,

2. Departures:

• Nina was off on Thursday,
• Adam has been on sick leave on Tuesday (half a day) through Thursday.

[KubaMikolajczyk]

04.10 - 08.10

1.What was achieved

Adam:

• Continued design explorations, backed up by competitors desk research, on the Video page, in the context of NFT, based on user stories included in MVP,
• Discussed the new search experience & the Discover page implementation,
• Consulted & implemented new color design tokens in Figma, to be used in NFT-related designs.

Nina:

• Research and exploration for the Member profile with NFT,
• Exploration for the Profile dropdown,

Kuba:

• Research for NFT issuing on other marketplaces
• Exploration for issuing during upload, and after
• Exploration for triggering the NFT panel from my videos
• Finished upload flow improvements tasks
• Visualising MVP scope & task dependencies

2.Departures

• none

[KubaMikolajczyk]

11.10 - 15.10

1.What was achieved:

Adam:

• Continue implementation of design tokens in Figma
• Continue explorations on Video page, in the context of NFT

Nina:

• Continued design explorations for the Member profile with NFT,
• Exploration for the Profile dropdown

Kuba:

• Further explorations on Issuing NFT
• Video update 🎥 : https://www.loom.com/share/9c94d2aa78b549ecae4201cfc2e7f827
• Capturing MVP scope for designs, meeting with Bedeho, setting up issues

2. Departures

• Some time was dedicated to onboard our new designer - welcome Tomasz 🥳 👋

[KubaMikolajczyk]

18.10 - 22.10

1.What was achieved:

Adam:

• Gathered, discussed, voted, and prioritized the list of tasks for the new design system role,
• Created and estimated first Github issues related to the design system maintenance,
• Introduced adjustments to the Atlas design system colors palette (semitransparent neutral colors),
• Discussed the implementation of the Global search box component and the updated Video player component’s finish state,
• Created guidelines for content curators on trimming down video files,
• Gathered ideas for the PX Grotesk typeface replacement, put together a survey, discussed the results, made a decision on our final recommendation: IBM Plex Sans,
• Participated in discussions and design critiques around the NFT MVP sprint.

Nina:

• Continued design explorations for the Member profile with NFT,
• Exploration for the Profile dropdown

Kuba:

• Further explorations on Issuing NFT

Tomasz:

NFT transaction view is almost ready. There are 2 minor legibility related topics to discuss with the rest of the design team, but it should be done by Tuesday.

2. Departures

• Monday & Tuesday Kuba was off
• Tomasz was off on Thursday & Friday

[KubaMikolajczyk]

25.10 - 29.10

1. What was achieved:

Adam:

• Did a research on various design system contribution models on multiple design teams.
• Based on the above: created, discussed and documented a design system contribution path for Atlas.
• Did a research on GitHub issue templates (Beta) and the new Projects view (also in Beta), based on which created a Project for managing the design system work in Atlas.
• Did an analysis of the current state of typography in Atlas (in general) to identify major issues that could be potentially addressed with the PX Grotesk -> IBM Plex Sans transition and introduction of the typography tokens.
• Discussed and did a few rounds of reviews of the Global search box component and the Search results page implementation.
• Participated in discussions and design critiques around the NFT MVP sprint.

Nina:

• Membership account - updating the designs
• Sign in - flow udpate
• Video Update from above
• Video Page exploration

Tomasz:

• Initial placing/cancelling NFT bid flows are finished, update posted.
• Exploring ideas on how can we restructure Figma projects in the meantime.

Kuba:

• New iteration of Issuing NFT based on feedback
• Video update from above
• Participated in discussions and design critiques around the NFT MVP sprint & DS related

2. Departures

• Next week on Monday there is a national holiday

3. Estimates

• Member profile - @Lenorette - 05.11 ( + / - depending on feedback)
• Transaction - @TCzechowski - 05.11 ( + / - depending on feedback)
• Issuing NFT - @KubaMikolajczyk - 05.11 ( + / - depending on feedback)
• Video + single nft page - 19.11 ( 11 - 12.11 most team is off)
• Notifications - 19.11 ( 11 - 12.11 most team is off)

[KubaMikolajczyk]

02.11 - 05.11

1. What was achieved:

Adam:

• Did a final review of the Global search box component and the Search results page implementation with Rafał, and the Video category page with Diego.
• Did a research on various design system typography systems.
• Based on the above: created, presented and discusssed a new set of type styles for the Atlas design system, including a brand new set of type styles for mobile devices, and headings now featuring the IBM Plex Sans (instead of PX Grotesk).
• Participated in discussions and design critiques around the NFT MVP sprint.

Nina:

• Membership account & Sign in - update of designs
• I got some feedback on NFT video tiles. I’m in process of updating those tiles.
• Video Page exploration

Tomasz:

• Continued design explorations for NFT Purchasing flow based on Bedeho's feedback
• Researched some ideas to improve Figma structure
• Prepared Figma structure feedback survey and sent it to the development team

Kuba:

• Preparing new alternative iteration of NFT issuing flow
• Preparing two new test-ready prototypes for two different NFT issuing flows

2. Departures

• Monday everyone was off due to holdiay

[KubaMikolajczyk]

08.11 - 12.11

1.What was achieved:

Adam:

• Updated all Atlas design components with new text styles, adjusting vertical padding whenever needed,
• Cleaned up the documention for Atlas colors & typography system,
• Discussed typography tokens with the Tech team,
• Discussed and started working working on “Top navigation” and “User dropdown” design component changes, in the light of the NFT sprint (specifically: the new sign-in flow and the concept of membership on the Viewer side).
• Participated in discussions and design critiques around the NFT MVP sprint.

Nina:

• NFT tiles - new direction
• Video update of Sign in & NFT tiles
• Cleaning up Membership designs
• Synch with Adam - Components needed for Sign in screens
• Video update of Video page with NFT

Tomasz:

• Continued design explorations for NFT Purchasing flow based on Bedeho's feedback

Kuba:

• Continued work on alt version of issuing NFT
• Continued work on two test-ready prototypes for NFT issuing flow

Departures:

• Most of the team was off on 11.11 and 12.11

[KubaMikolajczyk]

15.11 - 19.11

1. What was achieved:

Adam:

• Continued working on the “Top navigation” and “User dropdown”, “List item” design component changes, in the light of the NFT sprint.
• Created a preliminary set of Figma documentation components and documentation guidelines.
• Discussed and contributed to setting up Figma & Storybook integration, as well as the design tokens structure, and GH repository onboarding documentation.
• Participated in discussions and design critiques around the NFT MVP sprint.

Nina:

• NFT tiles - new direction
• Video update of Sign in & NFT tiles
• Cleaning up Membership designs
• Synch with Adam - Components needed for Sign in screens
• Video update of Video page with NFT

Tomasz:

• Finalizing Bid placing screens
• Exploring ideas on new Figma structure
• Started working on Notifications

Kuba:

• "Simple form" prototype for testing
• Meeting with UX Expert (gather knowledge for user testing)
• Started working on a user testing screening questionnaire
• Video update for Issuing NFT # 3

2. Departures

• none

[toiletgranny]

22.11 – 26.11

1. What was achieved:

Nina:

• Sign in - preparation for final designs, flows,
• Membership - preparation for final designs, flows,
• JOY token icon exploration,
• Updating small components in Design system,

Kuba:

• Finished both testing prototypes,
• Attended several meetings with Dmitry,
• Learned to create tests in new tool maze,
• Learned about sessions in lookback,
• Prepared few internal tests & iterated on the test,
• Launched the test on maze,

Tomasz:

• Finished NFT bidding flow,
• Iterated on Figma structure improvements and discussed it with the team,
• Continued working on Notifications view.

Adam:

• Finalized and shared component & file documentation templates in Figma,
• Finished changes & documentations to new and existing components for NFTs: "Top navigation", "List Item", "Member dropdown", "Icon wrapper",
• Together with @eldiegod: adjusted multiple components implementation and fixed typography inconsistencies, so that the new typography system (including the IBM Plex Sans as a replacement for PX Grotesk) can be rolled out,
• Started cleaning up GitHub design issues in the context of ZenHub,
• Participated in discussions and design critiques around the NFT MVP sprint.

2. Departures

• none

[bedeho]

No longer needed.