Design mockup for our new site

Hello everyone,

I have made a design mockup for our new site. It still uses the old, not yet final name “expert engine”, as I have not yet updated the screen shots to the “Codidact” name. Don’t worry about that.

It is also possible to style the whole thing easy, for example I could mimic the Meta.SE-design:

What’s missing right now is:

  • some icons for top bar (achievements and review/moderation tools)
  • interactivity (only in my .html-file, will be open to review later)
  • content design (aka questions page)

How do you like the design concept? What could be improved, especially with regards to accessibility?

1 Like

(Reposting commentary following RFC by @luap42 on Discord.)

Just saw it. Looks clean and familiar. The top bar reminds me of Microsoft for some reason.
Maybe it’s the ‘message’ icon. But that’s not a problem.
What does Discussions lead to?

1 Like

We’re going to need to get designers involved. This is good as a prototype, but I wouldn’t like it to be our final design without having someone who knows about design and UX review it first; I imagine our frontend engineers will have some idea of the basics, but that’s no guarantee. Particularly, we need to make sure we’re doing well on things like UX and accessibility (and preferably internationalization, too, but that’s more a subject for the app developers).

3 Likes

I was an avid follower of UX Stack Exchange.

Just chiming in on something - there’s good reason for the link to Meta to be placed as it is on SE right now:

image

  1. It’s at the top-header level, so that’s a good hint that Meta is a site-wise feature, not page-wise (like Wikipedia’s Talk pages)
  2. It’s “hidden” behind a menu button that provides equally easy access to ‘Help’, thus making it a little less likely that users will land on it without knowing much about how the site works, if at all.

(IMO, meta is for those who care enough to browse around and get familiar with the platform - I wouldn’t want the absolutely clueless parachutting there, as that’d be potentially overwhelming.

Btw: I believe Meta or Meta site discussions or something like this is most appropriate as a feature name.

4 Likes

Clean and simple – good start.

Things to consider early, because it’s easier to bake in than retrofit:

  • accessibility: tooltips, colors, contrast, text size, how does the page work with zoom?
  • different viewport sizes: how does it look on a phone, if your window is <100px wide, on a tablet?
  • using screen real-estate well: for example, a multi-column format where some columns are short leaves a lot of whitespace, unless we flow the text. Making sections collapsible is one way to mitigate this; there are probably others.
1 Like

I think it is too close to the name of the hyphen site.

Yes, that’s true. When I wrote the post, we had “expert engine” as a code name, as there had not yet been a decision on our project name. In the meantime we chose “Codidact”, however I didn’t yet update the screenshots. I’ll edit the post to clarify.