September 2: New Design
We talked a lot about managing change here at 7 cups (link). We have a big change coming down the pipeline that I wanted to share with all of you. In the next couple of weeks well releasing a new design for the desktop version of our site. We are going to observe and iterate, just like we do with all of our changes, and then well translate what we learned into releasing a new design for the apps as well.
@KrinkTheMellowUnicorn has been working closely with Mathias (our visual designer) on ways to make the site clear, simple, and easy to navigate. Theyve been working on this for over 3 months. Im very excited about this next version. It feels like we climbed up one mountain, made it to a new plateau, and are now ready to climb the next mountain.
For context, this is what the original 7 cups looked like:
You all know what the current version looks like. It was a big improvement over the old version.
Here is a screenshot of the new version (we are still working on the text/copy):
Besides a whole new look, the new design has several other components:
Much easier to navigate - the current version is like an old giant tree house where we just kept building room after room and connecting them. People would often get lost and not know how to find there way back. Another metaphor is like a poorly designed library or museum with no signs so you meander around, but dont really know how to get back.
The new version flows much better on all fronts. It feels nice and comfortable to walk around. You go from room to room and you know where you are and how to get back.
Less Distractions - our current version is has a lot of things that pull and call for your attention. Each of these things is a sort of tax on your brain. It distracts you from what you are trying to do. Weve taken these all away so the new site will feel much more calm and peaceful.
There are two pathways - many people come to our site and they feel too anxious to chat right away. They either leave or they start a chat and then leave. Now we have two options. A person can start the growth path with an exercise or they can start chatting.
Growth path more central - right now the growth path is kind of hidden and not designed too well. The new version has the growth path central on the guest/member side. Weve added a number of exercises and thought quite a bit about the different ways the person can walk down the path. Both exercises and chats move you down the path. This is what it'll look like soon:
Emphasis on community - in my pain to path post (link) I talked about the importance of our community. We added the feed and we are updating the forums in this new version to underline the importance of the community.
Also, a caveat, design by committee doesnt typically work, so I need to let you know that these designs are not something we can really modify. I dont believe wed want to as they are light years ahead of where we are now. We will continue to refine the copy and add tweaks here and there, but the visual design is set at this point.
Several of you indicated that it is helpful to know about new updates well in advance. I hope this helps! Let us know if you have questions. Looking very forward to sharing this with all of you.
@Glenm @krinkthemellowunicorn this looks kickass. sorry fo rlanguage but i can twait fo rthis to be released omg omg omg omg omg omg :)
Can the emphasis on the Growth Path be optional? I appreciate as it is something that has to go towards the whole community it must be to some extent generic, and I find that actually discourages me from using it.
Otherwise I'm so excited for this! Goodness me, it really does take me back to when I first joined.
the path is an organizing structure but it won't prevent a power user from doing anything they do today.
think about your listener dashboard... that is the path page. it has a new look but it has the same content.
but you hit on something important: not everybody is a power user, a daily visitor to the site, someone who posts on (or even reads) these forums.
the path is to help more people help themselves. if you find that you already have what you need, it should not inconvenience you.
@KrinkTheMellowUnicorn is there any way in which people could be enabled to personalise their Growth Path? I feel it would enhance the Growth Path if that were an option, so everyone could get the best out of it.
Yes, although it will take time and probably come in stages. We expect the path to become a lot more nuanced in the future, potentially adapting to the issues you are struggling with as well as your own preferences, and ideally responding to your behaviors dynamically.
but i don't want to oversell the timeline here. it is an evolutionary process.
This is looking so gorgeous, I am so proud of how far we've come! I cannot WAIT until this is launched, way to go team! I'm so happy to see our growth as we progress in becoming better and better and better! Thank you so much @GlenM, @KrinkTheMellowUnicorn, @Laura, @Heather & @Iara ❤
Quick question: any ETA on this? And will the app update follow shortly after it comes?
we think we are a couple of weeks (knock on wood) from having the site update ready, and then it will be several more weeks to update both the native and dynamic parts of the apps.
I just wanted to say a massive thank you to both @KrinkTheMellowUnicorn and @GlenM for this massive update. I have no idea what it takes to do something like this, but i'm sure its no easy thing. Thank you both so much for providing this magical website!
Have to say, I was on the edge with the current layout, found it not neat and streamlined. But the new design, feels like it belongs, like how it should have been. I'm actually very happy it's getting this overhaul.
Well done to the hard work. Is there any technology it's based on, all php or html5, what about elements of Googles material design?
Either way, looks the business.
Thanks, @Happytohelp2015! A lot of credit for that look goes to Mathias, who really delivered on the visual design (color palette, typography, layout, etc.).
True story: I wrote this reply once on my new Android phone but accidentally touched the Forum button on the accursed global nav and so of course was never able to return to this screen and even if I had my draft would have been gone. (sadface)
So, the visual design itself is more or less tech-agnostic. The website will be built out of much the same tech as today (some ajax, php, javascript including frameworks and node.js, html5, etc.).
The apps today are "hybrids" that comprise native client parts, which mainly handle loading and navigation, and html5 etc.
It's the native part of the Android app where something like Material design can come into play. For the current hybrid model this might not mean much more than navigation and the floating button to do stuff.
Down the road, we can look at making more fully native apps that talk to our back-end "directly" and don't rely on browser-based tech quite as much, in which case the Material deign paradigm for the Android app would come into play much more fully.
There are tradeoffs with every approach, so we'll take it one step at a time, updating the website first, then the current apps, and then we can evaluate where to go from there.
Hi Krink,
Thanks for the reply. It is really well done. A more native app for both iOS or Android would be really good. I've encountered errors at time with how the app on Android loads.
But all in it's own time :)
Yes, @happytohelp2015, both apps throw a lot of errors and the Android app in particular.
After the website update, we'll be doing an update to the apps that is more about fixing these errors than about the design (and then we'll get the design updated as well)
So just wanted to say we are aware of these errors and are planning to fix them.
Good stuff, delighted to hear :)
It looks great. I'm looking forward to using it!
me too, @electricTruth59
we're only partway through building out the new design and i'm already getting psyched.
I'll just say it:
WE NEED AN OPTION TO CHANGE THE COLORS TO DARK
I manually override the CSS to give myself a clean dark theme because it's too hard on my eyes the light colors.
Can we please make an option to like invert the colors??
we can consider that, although if folks who are savvy enough to modify their CSS are happy with that approach then it may be a non-problem?
True, but it's more of a pain to customize the CSS on a mobile device as the way I'm doing it is overriding it and proxying threw my computer aka MITM.
yes, true. with a powerful enough mobile device, the browser based site may be a better choice in some cases.
we can look into enabling the apps to be reskinnable easily as well.
first we have to get the new design built!
maybe you could ask the designer to add invert color option? it should be very simple, i'm assuming it's built on bootstrap, so it shouldn't take too much time/effort to flip colors with a click.
another idea is to maybe allow users to move things on the dashboard, like instead of my progress always being on the right, allow a draggable system so you can for example drag my progress to the left side of the screen on a computer, etc. and a todo-style app for notes would be great, and a todo app itself, like you could set daily goals in a todo, like "todo at 3 PM: go for a walk" and have it if you have a mobile device push reminders to your mobile device, and via the website. Might be nice feature to have.
these all sound like fun ideas but remember that we've got a wishlist a yard long already as well as some long overdue work to, like, make the chat flows work together etc., so I don't want to get people's hopes up too high that we are coming out with a swiss army knife any time soon.
bootstrap and other frameworks are fun and cool, but when the site is not twitter or a wordpress-type blog there is still a great deal of custom work involved (fwiw).
That looks amazing :D
Excited and looking forward to it :)
I think the parts of this that were put into effect so far really work great!
