Look-and-feel of OpenCraft's New Open edX Theme

Over the last few months the OpenCraft team has been designing a new Open edX Theme, and now we need your help.

We’re aiming to give course creators a modern, and user-friendly theme to display their course content. We’d really appreciate it if you could take a look at some of the designs we’ve put together, and let us know what you think. Your honest feedback is what we’re after - so don’t hold back!

We’ve only designed a few pages of the theme for now. Please note the designs are static and there’s no functionality included in the mockups - we merely want your feedback on the look-and-feel of the design. When developed, the design will also span the width of the browser, ie. there won’t be white space on the left or right sides of the theme. Check out the designs we’ve created so far:

Course Home Page:

This page has a banner which course creators can customize to welcome learners to their website, an area that gives users a quick overview of the courses available on the site, and an about section.

Course About Page:

This is a course summary page, and tells prospective users what to expect from a certain course (eg. syllabus, instructors etc).

*Note: the left sidebar sticks to the top so users can quickly jump between information about the course. When we develop the design, the sidebar text color will change to ensure better contrast on lighter background colors.

6 Likes

Here’s another page we’ve designed:

My Learning Page:

This page will be visible when the user is logged in. They can see the list of courses they’re enrolled in.

If you have some time we’d really appreciate it if you could help us by answering the following questions:

  1. Do you like, or dislike the new theme design (look-and-feel, layout etc)? Why?
  2. The theme will have two preset colors (design examples 1 and 2 shown above). Users will also be able to override these theme colors and use their own brand colors. Do you like the theme color presets? Can you tell us why or why not?
  3. Would you prefer a bright turquoise border or a light green border around the site design?
  4. Would you prefer the theme not to have a border? See example here.
  5. Do you like how the left-hand sidebar navigation on the Course About sticks to the top (ie. About, Syllabus, Instructors etc)?
  6. Do you have any other thoughts to add?

We really appreciate you taking the time to give us your honest feedback :smile: We can’t wait to get our theme up and running!

1 Like

Thanks @arunmozhi for your comments:

I took a look at all the pages. Looks very clean and nicely spaced too. A couple of things I wanted to highlight

1. The borderless design feels more clean and comfortable to my eyes.
2. All the elements like buttons, progress bars and tab highlights seem to have a border radius. But not the images. For some reason, I found it odd and my eyes kept trying to render them to me with some border radius (if that makes sense).
3. I like the sticky menu and you have mentioned the sections would be highlighted on scroll, that would be really nice.

Edit:

The images I mentioned were in the my courses page. It might be a personal thing. Because images without border radius in the Course detail page look totally fine to me. :slight_smile:

Hi @Puskas. I thought this discussion might interest you.

1 Like

I also prefer the version without a border. It feels more clean and I know the extra pixels saved will be useful anyhow.

I’m not getting the border-radius effect @arunmozhi is. Concur with them that the sticky menu should highlight the section on scroll. Maybe it should also go up a little higher when scrolling down, since the logo would no longer be on top?

1 Like

Hi @Cassie lovely to see this work coming together!

I’m curious what the plan is for MFEs, as we begin to default more and more of them in the Maple release and beyond.

1 Like

Thanks @sarina :slight_smile:

We’ve been focusing on the theme’s UX and UI. But I think @xitij2000 may be able to answer your MFE question.

The themes look nice and seem an improvement over the default theme.

Some comments:

  • I don’t understand the meaning of a circled arrow (→) at the left side of „Our courses“. I assume that it’s either a button to scroll things, or a way to point towards something that needs attention (as in „start here“)
  • I’m surprised that the images are so large that only one and half courses fit in the screen. I like large images but they’re so large that it may cause a lot of scrolling
  • I like how the design isn’t overloaded with information. However, courses have a variety of information and it would be good to see real examples. Real examples have more options: many enrollment options, certificates, paid courses, already enrolled courses, …
  • I like the color scheme (turquoise). The second one will work but it’s hard to classify it: it’s not a light theme, it’s not dark; it’s a combination of white and black, with high contrast. I think it’s good to provide it, since many people will like the high contrast theme (2nd one) whereas others will like the soft one (1st one).
  • Both themes require the background image to be dark (otherwise the text would be illegible)
  • bright turquoise vs. light green border: I think it’s better with no border, or with some padding but no additional color. I think it’s not worth introducing a new color just for 1 purpose (the border). However, I don’t mind the black border if it doesn’t take too much space: it will be ok if for instance there’s padding just on large screens
  • at the course view there’s a play button (circled triangle), probably to play a video. But I find it confusing because it’s located in the center of the screen. If the video takes the full width of the screen, that position is fine, but then the left bar would either overlap the video or disappear (both weird). If the video player doesn’t take the full width, then the play button could look better a bit more to the right, i.e. in the center of the video player.
  • the circled triangle may be too subtle to communicate the existence of a video. The page has 3 decorative images and the student needs to realize that triangle isn’t just decoration but a button that will display a video. Compare it to the edX site (e.g.) where there’s a button with the words Play video.
  • It looks like the theme doesn’t support showing an organization logo over each course (like in this theme); I’m not sure if it’s intentional. Probably most Open edX users won’t require more than 1 organization
  • the user can see (and scroll through?) 1 or 2 courses here („Our courses“) but, after doing that, I don’t see a button to explore „more courses“ (the rest of the courses). The user would have to scroll upwards and click „Explore courses“, which is a weird feeling (it looks like having to backtrack and start searching again). Compare it with the Explore more courses button.
  • the left bar is static while the background moves. This creates many situations where the text is unreadable; see image below. I think that the current system passes some of the burden the user who customizes the theme, because he/she will need several attempts to make the images and text colors readable in any position. I’d like the default color+images to always fit, in any position, but I don’t know what would be best for that; a text shadow? text contour? background box?
3 Likes

Definitely! Agreed. We had some trouble getting this right in Figma. But will make sure we get this right during dev if this design is the way forward.

Thanks @Fox_Piacenti :slight_smile:

Hi @clemente

Here are some answers to your questions…

Yes, this is a button that will allow users to scroll horizontally through the courses - so it’s just gives users a sense of the courses available on the site. If the user visits “Explore” in the main nav we’ll have a grid-like view of the courses available (to be designed :slight_smile: )

Glad you brought our attention!

So during the usability testing we did on the OpenCraft Instance Manager we noticed how people generally had trouble styling their banner images with text over it. So to help remedy this the theme will automatically place an overlay over the banner photo they upload. That way they still get a slick, professional feel without trying too hard. But your comment gives pause for thought, let’s see how the other users feel.

Good points :slight_smile: To keep things modern and bold we wanted all images and videos to span the width of page. We’ll look into options to make this less weird.

We removed the logos to make a cleaner interface. But I’ll note your comment and see what other people think.

Oh I see what you mean - so some courses are hidden on https://www.edx.org and when you select “explore more computer sciences courses” you see more related courses. Definitely something to consider.

We’ll have a dedicated page to view all the courses - the user needs to click Explore in the main nav (to be designed).

We couldn’t show how the color of side bar navigation will change based on the colour background in this mockup, but basically when we develop the theme (if we go with this sidebar) as the user scrolls between the sections the sidebar text color will change for better contrast. We’ll take care to ensure there is enough contrast on the theme presets. We’d have to look into options to ensure there would be enough contrast if the user changes the color palette, but at the same time we can’t account for every eventuality. Something for us to think about as we refine further!

Thanks for taking the time to send us all this feedback! :slight_smile:

1 Like

@Cassie, first of all, the themes look great in my opinion. They look really clean, modern and professional. So congratulations on that.

Coming to some of your specific queries:

  • Border:
    I prefer theme without the border. Looks cleaner to me.
    I liked the black border though. Looks really nice, especially in the white sections.

  • Color:
    I am assuming the bright turquoise vs light green is not just for the border but as overall theme color as well.
    In which case I prefer bright turquoise, looks a lot brighter and richer.

    The black color themed looks really nice as well. Very sharp and crisp.

    However, when I first looked at it, I expected it to be ‘Dark theme’, but was surprised to find it containing even more white spaces than its colored counterpart.

    I realize now that it was not meant to be dark theme, but here comes my request, can we explore having a dark theme version as well, with not as many whites ?

    Staring at screens all day, dark themes really comes as a blessing for the eyes, and I think learners spending a lot of time with the courses would also really appreciate the same as well.

  • Sidebar:
    As discussed above, there is problem of contrast for the side bar texts in the mockup while scrolling.

    I liked the idea of changing colors based on background while scrolling.

    My concern with this that, since customers can set their own colors and images, it could be an extra amount of work figuring out the colors, while changing the background images so that the contrast in maintained.

    Might I also suggest trying out a semi-transparent overlay over the side-bar while scrolling. The color of the overlay matching the theme-color. Not sure how it would look, but it could provide a simple solution which would work irrespective of any background image in the page.

1 Like

@kaustav Thanks for the detailed feedback! I like your suggestion of a dark theme - it’s something we have thought about :slight_smile:

1 Like

Hey Cassie, I really liked the designs, sidebar navigation, and colors, especially on the turquoise border.

I’d prefer the background covering the whole screen, though, so no border is needed.

1 Like

Hi,

I really like what you did with the /dashboard page, especially separating the completed / archived courses from the rest, great job! I prefer the pale theme. Figma

1 Like

@viadanna and @vincent.laberge Thanks for your feedback!

1 Like