Reviewing new Global section before we begin the build

[AndyatFocallocal]

These sketches are my interpretation of the previous UX discussions with you and others, mixed with our tech situation and what is realistically achievable by the end of the month - as we really need a MVP.

I would love a UX review before we begin the build. The Global part of the platform shown here is a new project management theme built in Discourse, modifying existing plugins to keep costs down.

Page 1

• New site homepage. When users are logged in this changes to the ‘profile’ page where users see recent action in their groups and their stats (which also means we can probably remove ‘profile’ from the top menu
• There is no search bar here (i realised after the sketch). Instead there is just the Title and Mission Statement. Users need to choose a path before seeing the search bar as the global and local side have different search functions.
• Each section has its own Mission statement related to the homepage mission statement:

to bring more kindness, peace and well-being to the world

• This 1st page is not the same system as the other pages, it’s a splash page copying the style. Those boxes are fixed links, description, with sub-links so users gain an idea whats inside each and can navigate quicker.
• we should probably include 6 boxes in the main section here so we can also have ‘community values’ and ‘about’. Or is that now too many options and we should put those two somewhere else?

Page 2

• there should be tag specific stats in the default view, and user stats. Either side by side, or in an extra tab (‘all’ and ‘user’ stats)… maybe we already have enough tabs

Page 3

• the path is still defined by admins at this point. The plugin allows set paths (hashtags) to be defined. If not defined it shows the most commonly linked hashtags - although mods can ignore one globally, for example ‘backlog, sprint, doing, done’ will all be hidden.

Page 4

• In tag-pages further down, where tags are not defined the system changes to show the most commonly linked tag with the tag-page shown. This means users can create their own paths and tag-pages, which appear all the tools attached. for example, i can create AndysFridayFun tag and have a project management space for everyone who joins in.

• ‘Board’ in the floating footer will actually read ‘tasks’. My thoughts on calling the 1st tab in the floating footer ‘tag-page’ is that it quickly teaches users that our site navigation is based on hash-tags
• I’m still unclear at what point we should require users to login in order to see what’s going on?
• cards in the task section will have a bounty attached in the top right corner. You can see an example of this system at thepavillion.io
• in the last image I switched to forum rather than stats in the default page to get feedback on whether the landing page for each tag should be stats or discussion

Tabs in Floating Menu

1. example of ‘tasks’ which is sometimes shown as ‘board’ in the sketch

2. Example of Calendar

3. Example of Vote

4. Example of Stats

@UXers @RubyonRails what do you think?

More discussion on the design can be found here

[AndyatFocallocal]

@aeglobal I posted our chat in its own thread, and added a few more details

[aeglobal]

Quick question. What’s the icon next to the right of the hamburger menu? I’m going to be adding icons once I’m done with typing out the text for the prototype.

[AndyatFocallocal]

That’s your profile image. it pulls it from Gravitar, yours is currently showing a default ‘A’.

[aeglobal]

Ok, thanks

[AndyatFocallocal]

@msgfxeg over here we have a new design for the Global side of our site and the landing page. (it is landing page, then users choose a path with the main two being Global and Local)

I’d say this is most urgent task as development as right now new people joining the teams find it more difficult than it should be to join in with building all the projects so it’s a bottleneck holding everything else back. I’ve decided to put it on credit cards to fund reaching MVP.

This is more of a meta task as its not directly on the homelessness project, but will enable more people to join in and contribute to it more effectively.

As you have a UX background it would be great if you could communicate with @aeglobal and join in the UX review of the design. I’m putting ads out today to find someone to fund it.

[msgfxeg]

mmm, @AndyatFocallocal I began a review of what you have posted in the beginning then as reading about page 2 I began to feel lost, confused and frustrated about what goes where maybe because I am still new to the system maybe because I could not understand what you exactly expressing in words I do not know. Anyways, here are my not completed review I thought to send it better than deleted.

---

My Review:
Page 1:

• “we can probably remove ‘profile’ from the top menu” WHY do you want to do that? I suggest If it is a must at least add it as a sub of the burger menu.

• " * There is no search bar here (i realised after the sketch). Instead there is just the Title and Mission Statement. Users need to choose a path before seeing the search bar as the global and local side have different search functions." OR may be the search stays as it is but the search functionality differs according to which page the user search in.

• “* This 1st page is not the same system as the other pages, it’s a splash page copying the style. Those boxes are fixed links, description, with sub-links so users gain an idea whats inside each and can navigate quicker.” NOT sure about that as it appears in the sketches they are almost look the same."

“* we should probably include 6 boxes in the main section here so we can also have ‘community values’ and ‘about’. Or is that now too many options and we should put those two somewhere else?” IT is not too much unless the content of each box/block/card is too much! anyway, preferred way is 2 rows x 3 columns.

---

[PublicHappinessAndy]

1. Profile would become the homepage for logged in users, so it wouldn’t need to be in the menu anymore. users would reach it by clicking our logo in the top left.

2. if you click ‘local’ on our site you get to our map which has its own search function.
   if you click ‘global’ you get to a quick overview page i put up to help navigate the forum. in the new design it’ll just take you directly to the forum, which features a search bar in the page banners. the new system allows us to direct new users down set paths to make it easier to understand. it creates its own path from most commonly related tags if a path is not defined. the search bar is to allow returning users to quickly get where they want to be (the search bar is set to search for tags by default, but that can be toggled to the search for words like the default discourse search function).

3. the 1st page has some different functions to other pages in the Global side. Most of the main boxes on the page are links to other areas of the site rather than to tag-pages which we use in this forum. the floating footer has different options. it seems simpler to create a static page which looks like the forum and accomodates the differences, rather than coding different behaviour into the new theme which won’t be needed anywhere else.

4. 2 rows and 3 columns works. each would appear as a box to replicate the boxes in the forum design.

this design has come from a lot of past discussion within the UX team. I’ve taken the role of combining it all into one design and i do not have a UX background. basic mistakes are likely and the design isn’t presented as you’d expect. i’m very happy to have improvements pointed out. we’re at the point where we need a functioning project management/building suite for the community asap, and right now this forum is not providing that. that’s why i took on the role of creating a design and putting ads out to have it built.

@aeglobal is working on a model. how far along is it Alexia?

[msgfxeg]

@AndyatFocallocal

Profile would become the homepage for logged in users, so it wouldn’t need to be in the menu anymore. users would reach it by clicking our logo in the top left.

Now I understand, and yes you are correct we do not need the profile link anymore.

As a start, - and until I fully understand the whole system deeply after a long and deep research - I totally agree with 2,3,4.

However, I still feel the system is too complicated to be understood - maybe because I still can not figure it out and I will soon - by ordinary users but what you have did is a big step towards simplifying the system for them. And the rest will come as time passes.

[aeglobal]

Andy, thanks for the new information. So, does that mean that I will have to delete the profile icon as well? Footers don’t normally indicate which section a user is on. That’s mostly for the tab sections on the menu for users to know where they are at on a page. I have attached a few options for the footer that I have found online. I will leave the color white. However, the format I will change. For example, getting rid of the lines in between each section. I also attached the first screen.

I am not that far along. I will work on it for a few hours tonight. Then, I will also be working on it tomorrow and Sunday. The latest I should have it is by Monday. I have to make the prototype similar to the last one because I can’t fit everything on one screen. For example, Page 1 can’t fit everything that is shown in the image. So, more pages will have to be added. I don’t currently have any images on my screens. Just icons. Are there particular images that I can use for the video and images? I was thinking of just making up a graph on Word and pasting it in the prototype. I’ll be creating 8 slides for the four pages. I will also need to add a few more screens for specific interactions for certain tabs.

Below, is a quick sketch of how page 1 part 2 and page 2 part 2 would look like. I didn’t add the hashtags in my sketch. However, they will be there in the prototype.

[PublicHappinessAndy]

the system is designed to be evolving, so users will improve it themselves in the future. of course i would love to get it as good as possible now before the big build.

in its bones the splash page is just links to the key areas of the site with descriptions, plus statistics to make the viewer see that there is a community thriving here focused on this mission

'to bring more kindness, peace and well-being to the world ’

then we come into the Global section rebuild. imagine a new user arrives and is interested in homelessness. we are creating a path from tags to lead them to projects focused on resolving homelessness.

global, projects (maybe ‘causes’ is clearer), homelessness, brighter tomorrow map

new users experience this as on average 6 distinct boxes as a choice on each page (with descriptions and photos). so they are clicking through to what they are interested in. we can also allow users to choose their own theme if experienced members would prefer a different experience

in the banner each tag page users/we can add text and links. this should be a page specific mission statement derived from our main one on the homepage, and the default links would be ‘documentation’ and ‘join the team’ (the latter being the groups so subscribing to @team tags used by others to call attention of experts in that field)

another example would be:

global, teams, web design, ux-design

having the most popular tags linked to each category also visible in the box makes adds context to give clarity what is in that path what is in that path. If i look at the ‘teams’ box i can see in an instant that there are skills there. web development, project management, videography, media, etc.

then essentially each tag-page is its own project management suite with the tabs at the bottom to navigate between tools

in my head the system should be great for a new user as it’s essentially asking them a question each time which option tey want to see next. again, i’m not saying its perfect. i think returning users might want some system which shows their most commonly viewed tags-pages in their profile (logged in landing) page for example. I’m just adding more context. if you can identify weaknesses and suggestions to improve it they are very welcome.

[PublicHappinessAndy]

i’m not fully following the footer example. is that a static footer, and then we’d have our floating footer too?

it looks pretty good. more spacing would be good for example the title would stand out more with spacing above, but i think you said you were trying to save space. you can throw away the search bar. we can’t use it on the splash page as we have two different search mechanisms which are specific to the two main paths we want users to take. so it 1st appears on the next page.

stats i’m wondering if numbers say more. i explored both in my example.

^ weekly
members active: 120 (+32)

is very clear and easy to read. especially if we make the +32 green. the chart i feel is more likely to be ignored as it takes more effort to read.

you can grab images from the current Action Center explorer. click

Global, Graphic Design, Files or All Media or Happy People.

great photos in all three

[aeglobal]

I need help with reading some of checkbox names listed in page 2. Is one of the names listed bounty hunting? Also, do you want me to write descriptions for each of the boxes? Page 2 part 1 and 2 is basically almost done. However, I’ll just need to change a few names that I couldn’t read for the textbox. I have already linked the interaction for the Global tab for all the four pages that I currently have.

Part 2. I’m currently fixing the stats name to rank.

[aeglobal]

It is just for the footer in general. I can work on the edits tomorrow as well as adding images. Maybe you can make the stats kind of like the stock market. Green up arrow and red bottom arrow. You’ll just need to write the numbers next to it. Or some other ranking system. Maybe something like Reddit’s top growing communities type of thing. The chart seems more for like an overall report of the site. I’m not sure where you’ll put that.

[AndyatFocallocal]

@aeglobal

I’m not sure where you’ll put that.

Side by side looks fine. We’ll design the users profile page with their personal stats, and stats of locations (local) and tags-pages (global) which they are most active in.

Yes bounty hunting is one of the ecosystems essential operating tasks when the Crypto token comes in. Users reviewing evidence of activities in the real world and looking for anyone trying to cheat the system. Of course the heavy lifting here would be an automated system checking for suspicious trends and calling a human in to check it out

[AndyatFocallocal]

Oh, I just realised. Profile. Tasks. Calender. Wallet. Won’t work on the splash page as a new visitor won’t have any of those yet.

That would be the floating footer for the logged in users homepage. We could put something there like

about. community values. Join

Or we could leave it with no floating footer on that page.

We also haven’t yet worked out at what point users need to create an account to carry on exploring

[AndyatFocallocal]

@aeglobal I also noticed the floating footer you are using in the Global page is the one for the 1st page, not the 2nd page onwards

[aeglobal]

That has been fixed.Thanks for spotting. So, Page 4’s interaction will only be when somebody clicks the tag-page selection at the bottom? Also, is Ordinary Discussion part of a drop-down menu? I should have the prototype finished by tomorrow. I only need to edit the two parts to page 4. I have also included a screenshot of the “Shop” page in my prototype. Almost all pages have been linked to the specific pages. Can I keep the last redesign that I did for Local? I uploaded a screenshot of the last redesign.

[AndyatFocallocal]

i don;t really understand the question. page four will be exactly the same as page three. its included to show that the path continues for as long as there are linked tags, and to show that when there isn’t a defined path it will switch to using the most commonly linked tag intersections.

so for example how often does ‘homelessness’ appear in the same post as ‘brighter tomorrow map’

ordinary discussion is the default view and it appears below the tag boxes above. there’s no drop down.

the map looks great, stick with that one

[aeglobal]

I added another screen to show you what it would look like without the floating footer for the specific page. Also, not all the images that I selected for the fill ins are related to what the title is for certain boxes. For example, the token box.

Page 3 Part 1 Example