wizardamigos / wizardamigos.github.io

Intro page
https://wizardamigos.com
11 stars 9 forks source link

history/news viewer concept & design #86

Open serapath opened 2 years ago

serapath commented 2 years ago

@todo

@info

This has to do with everything about the History/News feed of Wizard Amigos from the past to present. Creating a mobile App that can help users to easily navigate through whenever they are going through the History/News feed of Wizard Amigos. This mobile App, has basic features which includes :

Inspirations for this was gotten from : Imgur , Hacker News , Reddit

Helenphina commented 2 years ago

Worklog Video 4 2022.06.25 03:40AM

serapath commented 2 years ago

feedback 2022.06.22

placeholder for feedback from discord about first wireframe explained in worklog video 3

serapath commented 2 years ago

Worklog Video 3 2022.06.22 01:36AM

serapath commented 2 years ago

feedback 2022.06.25

Worklog4 2022.06.25 03:40AM

  • Done Create slides, wireframes and markdown files

ok - first feedback - please fix the above worklog comments and outputs - more on discord - but otherwise, thx for the new worlkog.

alright, this is my feeedback for your worklog video 4 and the slide deck and wireframe output, see below:


The bottom menu has:

  1. timeline
  2. events
  3. notifications
  4. search
  5. filter

i noticed the wireframes do not highlight the bottom button that is currently shown or active in the wireframe so it is difficult to always exactly know what part am i looking at. would you mind highlighting the button that we are currently navigated to?

about timeline

about calendar

about events

it would be cool if the next wireframe iteration could include more details, especially for each item in todo list, event list, notifications list, etc... at least a timestamp

about notifications

about search

Again - i think we are on a good way and maybe we should start refining and showing mor details and use example data from the real wizardamigos history we have. ...we have so many past events and pictures and old websites and lessons and ...conference or video talks and so much more. we organized codecamps and in fact we will be organizing a wizardamigos code camp in england in september probably, so we can try to make the wireframe a bit more realistic with real data

It does not need to look pretty though - filling in some real wizardamigos data into the raw wireframes is ok. we will still need to adapt it a lot, so lets make it pretty later :slightly_smiling_face:

about filter

about slidedeck

First, he current wireframe is not very detailed, it is an interactive wireframe to click through the entire app and each click shows all the features with example content, where we can click and swipe and enter some text into the search and see the results and then select and go back and forth and so on to really "simulate" how everything works.

The current wireframe you made is more like a single rough picture of every screen and it is what i imagine the slide deck to be.

The slide deck you made describes with text a little summary of each part of the timline/history view component we are making. This is exactly what should be written in a hackmd/markdown file including for each section each button and element and what gestures the user can make and if the user can use hotkey keyboard shortcuts when they use the app on desktop, and so on - all the details of each page so we know how this component should behave.

So in summary:

  1. what is now the slide deck should become the hackmd/markdown file
  2. what is now the wireframe should become what the slide deck is - a quick overview over the main parts
  3. and the detailed simulation with real content is what the new wireframes should become :-)
Helenphina commented 2 years ago
Helenphina commented 2 years ago

Worklog5 2022.07.05 10:12AM Worklog6 2022.07.05 10:14AM

serapath commented 1 year ago

feedback 2022.07.13

Worklog5 2022.07.05 10:12AM

Feedback about:

  1. timeline
    • one inspiration for the timeline is a discord announcement channel
    • a discord channel where you cannot write messages because it is "read only"
    • each timeline item will only have a link to more details which opens in a new tab
    • there is no "expand" option, only a clickable link to open a new tab
    • :+1: if that's what you mean by "read more..." thats great :-)
      • so you don't need a "details" screen for a timeline item. it just opens in the browser
    • still thinking, the "view more" should probably endless scroll like instagram or tiktok
      • which means we don't really need the "timeline view more" page either
  2. search/filter
    • :+1: cool to have it in the bottom action bar with filter
    • but the linked slide deck and wireframe still have separate search and filter screens
    • a user can always "search" on every screen (timeline, calendar, todo, events, ...)
    • so a user can always "filter" on every screen (timeline, calendar, todo, events, ...)
    • i think filter should be just an option together with search like you show
    • also clicking the "filter" icon next to the search bar should just expaned the input field similar to messengers where you select emojis or gifs, but offer filter options and then you can collapse the filter menu again instead of showing a separate screen like in your wireframe
  3. menubar
    • the timeline button is good
    • but could you add a list/calendar toggle button next to the search bar?
    • so when a user is on the timeline they can toggle the button to see
      • either the list view
      • or the calendar view
      • but the content stays the same, it is only presented differently
  4. calendar + Calendar Details
    • is only a view of the timeline. no events are being created here
    • the calendar itself should probably be on top or in the bottom screen section
    • the other half of the screen can show the entries for a particular calendar day or interval that has been selected
    • if the notifcations are activated calendar and list show notifications
    • if the notifcations are deactivated, calendar and list show timeline items
    • but clicking on a calendar day would show all entries for that day
      • could be notifcations
      • could be timeline items
    • but clicking on an entry or calendar day would not show a second details screen
      • instead clicking on an entry in the list for that calendar day
      • would open a new browser tab to show the content/details
  5. todo + Todo Details
    • should probably not have a separate page but just a type/color of a timeline item
    • i think thats what i mentioned in previous feedbacks already
    • so basically there is only a list that shows todos, events, etc... mixed
    • => so it means some items in the timeline should be todos
      • but we don't need todos in the menu
    • clicking on a todo is similar to a link
      • it opens the todo details in a new browser tab :-)
  6. events + Event Details
    • should probably not have a separate page but just a type/color of a timeline item
    • i think thats what i mentioned in previous feedbacks already
    • => so it means some items in the timeline should be events
      • but we don't need events in the menu
  7. notifications + Notification Details + Notification Pop up
    • :+1: thinking about this gave me some new inspiration
    • while user actions might create or change events and todos in the timeline
    • those todos and events are used by the system to create notifications
    • so the timeline shows items like (events, todos) ...maybe more
      • we have wizardamigos video interviews
      • we have launched websites and apps
      • we have people joining
      • we have different chapters opening
      • we have code published
      • ... and so on ...many types of news
    • but the new inspiration i got is that:
      • a user can send actions (to create events, todos, ...)
      • an app can send notifications (to inform about events, todos, ...)
    • a user might want to see the history of notifications, but also of his actions
    • but can we remove notification from the menubar too?
    • => instead we add a little :bell: maybe next to the search bar?
    • => if user clicks it, it might just show the notification history below the timeline?
    • a notification in the notifications list can expand to show details, but should not show details on a new seperate screen

imagine the upper half of the screen was the timeline you showed instead of the browser and the lower half of the screen would show the notification history instead of "beach vibes" example

serapath commented 1 year ago

feedback 2022.07.13

Worklog6 2022.07.05 10:14AM

  • Done Refined slidedeck, wireframes and Markdown files.

The slides are:

  1. I think the slide deck should only be done when all the wireframes and markdown notes are done to present the final output. Until then the slide deck has to change too much, so most of the work would be for nothing - so let's wait a bit for the next iteration :-)
  2. also, would you mind creating the next iteration of the slides for the slide deck with hackmd too?
    • hackmd can be used for notes or documents
    • but it can also be used to make slide decks
    • also, for the next iteration, a link to a markdown file should be added to each slide
      • of course only if necessary, because it contains details about the slide
      • the details are everything not visible in the slide itself
Helenphina commented 1 year ago
Helenphina commented 1 year ago
Helenphina commented 1 year ago

Worklog72022.07.16 10:18

serapath commented 1 year ago

feedback 2022.07.16

Worklog72022.07.16 10:18

Great, I love it. It was a good round of simplifying the timeline component :-)

Some additional feedback:

  1. there is no infinite scrolling as requested in the last feedback, it still says "View more..."
  2. the "Read more..." button to me feels like expand/collapse would happen, so maybe it needs more
  3. :+1: to the search bar and timeline button in the bottom. Thats perfect :-) thx
  4. :+1: for filter menu, but: i would still show search bar on top so user can click filter again to collapse it
  5. the calendar page does not need a "<" back button, because they can just navigate from the search bar below
    • otherwise, very good :-)
  6. :+100: i love how the notification icon is like a filter to show/hide notifications
  7. the "details" when clicking on an entry should just open the new browser tab, no overlay
    • if we feel a bit more information is necessary, maybe it can expand/collapse the entry
      • that way a bit more content can be shown
      • but not much, because otherwise it should just open the new browser tab
    • ...how it works (e.g. opening a new browser tab) can be explained in a hackmd that describes details in functionality for a given wireframe screen
  8. same or similar for the pop up notifications ... those will be shown outside the app
    • by android or whatever operating system a user uses
    • the notification bell icon can have a little facebook style number to indicate unread notifications
    • but if a user wants to read notification history inside the app, they can toggle the bell icon (=notification filter)
    • => no notification popup inside the app needed :-)
    • ...how it works (e.g. android notification) can be explained in a hackmd that describes details in functionality for a given wireframe screen
Helenphina commented 1 year ago
serapath commented 1 year ago
  • Should I remove the view more and put scroll ?

yeah, infinite scrolling, somehow :-)

  • Or should I design a long page that shows that the page is scrollable ?

isnt that the same. whatever works best, lets see.

  • Should I remove the "Read more" and put "click on the this link to continue" ?

or an icon that indicates it is openable? how to other pages or apps do it?

  • I don't actually get what you meant by there should be no overlay for the calendar details. Can you please send a screenshot of the overlay I included

oh, its the last pages in the wireframes. ...but anyway, not important. never mind.

  • Okay...so the pop up notification should be removed ??

yes, because it is out of scope, because we will just trigger the standard android or browser notifications and they always look the same - no need to design them

Helenphina commented 1 year ago

or an icon that indicates it is openable? how to other pages or apps do it?

Normally what I see in other apps is similar to clicking on the "Read more" and it will direct the user to the browser. I haven't seen where an icon is being used for that unless it's a special feature you want us to input in the App

Helenphina commented 1 year ago

Worklog82022.07.22 01:55AM

Helenphina commented 1 year ago

Worklog9 2022.07.27 01:05AM

Helenphina commented 1 year ago

Worklog10 2022.08.03 02:05AM Worklog112022.08.03 02:08AM

Helenphina commented 1 year ago

Worklog12 2022.08.06 07:50PM Worklog13 2022.08.06 07:55PM

Helenphina commented 1 year ago

Worklog14 2022.08.10 08:55AM Worklog15 2022.08.10 09:00AM Worklog16 2022.08.10 09:05AM Worklog17 2022.08.10 09:10AM

serapath commented 1 year ago

feedback 2022.08.10

Worklog14 2022.08.10 08:55AM Worklog15 2022.08.10 09:00AM Worklog16 2022.08.10 09:05AM Worklog17 2022.08.10 09:10AM

sweet. watched all the worklogs watched all of it. great. pretty awesome. I like the light theme and the dark theme

1. change filter & collapse/expand

i think i have two minor comments timeline filter

  1. on the first screen you see 5-6 types of different timeine entries, each has a different icon
  2. some of them are events, others are todos, ...but
    • on the filter screen, you can only select all or events or todos, but not the other ones
    • also - just from the filter names i don't exactly know which icon type it will filter for
    • so i think every time of timeline entry that has a different icon should also be available in filter
    • and the filter should not be radio box, but checkbox, because maybe if i have 5 types of timeline entries, i want to show all entryes of type1 and type4
    • so i want to select more than just a single filter type expand/collapse the other minor thing is the icon to expand/collapse the "x" icon to me feels like i would be removing or deleting the entry from the timeline so maybe we can find a better icon for expand/collapse

2. theme

task: can you now also add 2-3 themes where you use the crazy color palettes (maybe even with gradient) that you showed in your themes?

...just check the pictures in the links below for some inspiration for styles. Maybe we can try to make a few more themes, not just the dark and light theme that you did, but one for each theme shown in the pictures in the links below

and/or change to different but matching fonts Next to it, we can also experiment with the different fonts :-) Maybe some crazy new fonts that fit the above themes well?

Just to play a little bit how crazy we can go with this :-) It is just a theme.

Helenphina commented 1 year ago

Okay....

serapath commented 1 year ago

for themes: if you can try to make the app somehow look in the style that those example links show, that would be cool :-) ...one after another

...basically: font, borders, backgrounds, etc... we could try that

... not remove the xicon, but maybe replace it with something better. did you google search for: "expand collapse icon" ? i just think there are better icons than an x

otherwise click to expand and click again to collapse is great

Helenphina commented 1 year ago

Worklog18 2022.08.16 02:00AM Worklog19 2022.08.16 02:01AM Worklog 20 2022.08.16 02:05AM Worklog 212022.08.16 02:10AM

serapath commented 1 year ago

feedback 2022.08.16

Nice. Love the gradients. Love the new icon set, where each icon represents more the type of timeline entry. The subtle font changes are great too, so yet, we can finish this i think. Overall I am very happy with the results :-) Thanks.

Helenphina commented 1 year ago

Worklog 22 2022.08.20 01:19AM

Helenphina commented 1 year ago

Worklog 23 2022.08.20 12:50AM Worklog 24 2022.08.20 12:05AM

Helenphina commented 1 year ago

Worklog 25 2022.08.27 02:10AM