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.
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.
If you have some time we’d really appreciate it if you could help us by answering the following questions:
Do you like, or dislike the new theme design (look-and-feel, layout etc)? Why?
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?
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.
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?
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?
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.
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 )
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 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!
@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.
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
We can’t wait to get our theme up and running!
