Sharing our experience changing the Discourse UI

praise
1

Hi

We would like to share something we have worked on for a few months.
We run a startup where companies can post challenges which a community can post ideas to on how to solve them.
It is essentially a way to crowdsource corporate innovation.

For us to do that, we needed a platform which could handle this type of community input. After lengthy testing, we decided on Discourse.

We wanted our UX to be as simple as possible, with tiles representing challenges.
And we wanted to be able to run on a Discourse hosted site which meant pure CSS and Javascript changes – no backend changes as we would then no longer be on fully supported Discourse versions.

This is what our front page looks like:

Home page.png1902×1234 1.33 MB

Each tile is a challenge. It has meta-data like expiration date (with count-down timer), prize (which members of the community can win for the best idea) etc. And it shows the last few ideas under each challenge.

Clicking a challenge takes you to this view:

Challenge detail.png1902×1218 1.09 MB

Further down the page you can see the ideas which have been posted for this challenge:

Challenge detail - ideas.png1899×1218 1.32 MB

Clicking an idea takes you one step further down:

Idea detail.png1902×1221 1.28 MB

We re-styled the comments as a chat-like interface.

Comments.png1902×1218 1.02 MB

The editor is the same as on Discourse, but slightly re-styled:

Editor.png1703×406 36.3 KB

We also re-styled things like the login page, profile page etc. Example here:

Login.png1903×1218 644 KB

Finally, we made the entire site mobile friendly (fully responsive design). We do not make use of Discourse’s ability to present a different page to mobile users – instead we load the same page for everyone. On an iPhone it looks like this:

iPhone.png1231×1878 722 KB

For those interested:

  • We started work on the 1st of March 2016 with a team of 4.
  • A full time UX / UI designer has made the graphics / layout and navigation.
  • On June 1st we launched a private beta with 100 participants (community) and 10 companies (with 10 challenges).

Right now we are reacting to the feedback we got, and expanding the feature set (as well as developing native mobile applications on Android and iOS – more on that in a different post).
We would be happy to hear your feedback on how we can improve this rather drastic UI change of Discourse, and are also happy to help others who may wish to go a similar route.

Feel free to reach out.

55 Likes
2

Excellent writeup, I featured it on https://twitter.com/discourse as well!

5 Likes
3

We’d love to hear your designer’s thoughts on our upcoming Native themes support. It’s all about easier maintenance of comprehensive styling changes exactly like the one you’re showcasing here.

10 Likes
4

This looks really nice - well done :+1:

Can you tell us which pages map to the DC pages? (What’s the index, forum list, topic view pages etc). Also how did you get images per challenge and ideas like that? A custom plug-in or are you just requiring a set number of images and of specific sizes per ‘topic’? Did you use or make any plug-ins?

5

Hi

Sure thing. Very high level:
The overview of our challenges is the DC list of categories.
The challenge detail with the list of ideas below, is the DC page showing topics.
The idea detail page with the comments below is the DC page showing posts.

We did not create any plugins. This is all done in CSS and JavaScript using the “Customise” page in the admin console.

For the images etc:
We customise the “About…” page for each category. In that page, we add some “meta data” in the beginning which we parse to get things like expiration date (for the count-down timer), award, type (private or public) etc.
We do this simply with comma separated values in the beginning of the About page.
In the same About page, we also add the images we want to use in the challenge. These images are then pulled out and shown the way you see above.

So basically we use the “About” page as our repository for challenge data. We then hide the about page (it will never show up in the list if “ideas” = topics).

Best
Søren

6 Likes
6

Hi

Native theme support would be fantastic.
We are currently considering creating our UI entirely outside of Discourse and then simply pulling in data via API.
Perhaps that will not be needed if native theme support is added.

Using the API to create views outside Discourse is how we created our mobile apps (more on that later) and so we now have some experience with that.

Best
Søren

2 Likes
7

Wow, this is great! Is it out in the wild yet? Would love to build on it.

8

Can you share it? It’s very beautiful.

1 Like
9

quite appealing idea :slight_smile:, is that page accessible for public?

2 Likes