Draft of new design OpenMRS Website

Tags: #<Tag:0x00007f23d10c0340>

Hey, During Christmas Holidays I had some time and with help @jslawinski I decided to create a new website design for OpenMRS which will be easy to move and give you some view of how it can look like. At first, I thought I would be able to create it by myself but the truth was different. There are some points which I couldn’t handle alone and I think I find here some helpful hands as it is the site for You Dear Community.

Link to the website: OpenMRS.org – OpenMRS' community website (and if you have some technical questions I would rather ask Jakub as he did that part of work.)

I have used Zakra Theme (it’s free but Foundation bought 1year Premium account as I needed a few options from there) and all of these widgets come from Elementor which is actually a plugin but it comes with Zakra when you download the theme.

Important information: for now only homepage is made, but when I’ll end it I move on to others.

The problems I met:

  • I don’t have any idea of how to organize the main part of the “home” page where is mission, impact, values etc. That white part is under my expectations.
  • scrolling down is the photo gallery which also needs improvement. Maybe somebody knows a plugin or tip how to make all photos the same size. I only found plugins which make bigger photos smaller, but here I need also to make smaller photos bigger. So any tips or advice are welcome.
  • also there is a problem with the size of the logo (which isn’t actually showing on the website) because it makes a mess with the menu and header so probably it needs some changes in the code
  • I don’t like the footer. it just looks bad and it needs to be changed.

I found that some time ago somebody tried to change the homepage OpenMRS.org Website Homepage New Design - #10 by f4ww4z but they didn’t build it on the Wordpress so it couldn’t be uploaded. But I think their page looks nice and some things I can adapt to mine version.

As I said before if anybody would like to give me some support, advice or just share thoughts I really appreciate that. You can do it here or in DMs.

There is option to share login and password to somebody or I will create another account.

7 Likes

Great work @zuzanna , i think i find your design very likable ,

probably just a little more improvement on the footer

2 Likes

@zuzanna, thanks so much for putting this initial site together. Hopefully this was a fun way to spend some of your time during the holidays!

Having something like this in front of us can be a great way of generating feedback and who knows? Maybe this is exactly what we need to move this project forward in a more practical, concrete way?

Here are some initial thoughts that come to mind:

  • I’d love to learn more about the Zakra theme and what comes with it for free and for the paid versions. Since our community maintains our website, the more flexible and easy to use/improve, the better.
  • We now have all of the footage from OMRS19 in Maputo, so I’d love to talk through how we’d use those visual assets to improve the website and tell our story. Same with our community metrics.

In addition to sharing feedback here, would you like to set up some Design Forums to help move the work ahead? We usually have at least one open each week or we can arrange another time if you have a conflict.

Wow Amazing first draft @zuzanna! :tada: :heart: This is beautiful and so much more modern. Agreed that the issues with the footer and the formatting of the content in the white section do stand out :stuck_out_tongue: But overall it’s seriously such a big improvement from the experience of our current web page. I also love the strategic placement of the “Join Us” call to action :slight_smile:

A few suggestions:

  • Embedding videos: Since video is the modern form of storytelling, it would be great to highlight our new short This is OpenMRS video on the front page, since this rapidly tells the story of who we are and what we’re trying to do. There’s also a brand new, more detailed Global Goods: About OpenMRS video that we might also want to put somewhere very accessible, since it summarizes in <10 mins what can take new members weeks or months to learn. (Perhaps an “About” page would be a better home to spotlight the longer video.)
  • Community picture instead of individuals: In the Our Team section, it would be great to highlight our community instead of just a few specific people (as much as I like the Harry Potter reference there lol). So for example we could show a picture from a previous OpenMRS conference and change the header to something like “Meet the OpenMRS OpenSource Community”; then we could direct to the “Join Us” page, or something like that.

Example community pictures: DSC_0450 OpenMRS 2019 Conference Group Photo (2)


A few questions:

  • As Jen mentioned above, my main question is also how we can continue to use whatever website-builder/editor software longer term. I know Wordpress isn’t always the most attractive to work with but it is more commonly known. If you had to get a premium account for Zakra, would we need to maintain that premium account moving forwards? If so, how much? Could we move the work over into another free or low-cost platform that people might be more familiar with using? (Such as Wordpress, Squarespace, etc)
  • You mentioned you’d like some further support. What in particular are you looking for support with? Are you hoping to have a team of people working on different pages? I’m wondering how I can help.

I’d gladly join for some Design Forums as Jen suggested above to talk or work through some of the next steps together as a team.

some details about zakra theme here Zakra – WordPress theme | WordPress.org and https://zakratheme.com/

Whoops, I should do my research better before commenting. Thanks for pointing this out @herbert24, I totally missed that this was already a wordpress theme. Nice choice @zuzanna! So if I understand correctly, someone could use the Wordpress editor to work on the new website, right?

sure, our concern will now be on the WordPress theme to use that is if we are to use the wordpress editor

@grace Yeah, I should mention that Zakra is a WordPress theme. My fault.

And one more yes, You can move this draft on your website and work on that in the future.

Zakra in the basic version is free, it has a lot of options and widgets but to work more on some specific points like Menu I needed to buy a premium version. It cost 45$ per year, the lifetime subscription is more profitable cause it cost 149$. After the website will be ready you don’t need to buy it but you can cause as I said the lifetime account is more beneficial. Here you find what is in the premium version: Pricing - Zakra

I need help in problems which I described in my first post here. They aren’t big but make life difficult. And any help or idea how to organize the white space and footer is welcome. Also, we can organize a meeting and discuss how we can do it or that. If you want to draw or maybe look for some ideas which will suit our site that will be great. Any help is welcome.

1 Like

Maybe we should rather show different teams and describe their work so it will be easier for newbies to join one. Or other options, show implementors but I think there are too many implementors to put them there.

Why not group photos? There is a special page for the annual conference so I might not link that.

That’s a good idea, but we have to be careful not to overdo the amount of stimuli we provide to the viewer. We can do something as they do with the video: https://www.11bitstudios.com/

@grace Where I can find more pictures in high size/resolution?

@jennifer for sure it was something different than typically do’s in Christmas :smiley:

I hope that people interested in that topic share with me their thoughts and I will be able to correct the website so it will be perfect one.

Zakra is actually easier, better and quicker than more of themes in WordPress. It’s really intuitive and basic version is enough for normal using. But if you want to do more with your website you need to pay for the premium version which cost 149$ lifetime. - I don’t think it’s expensive as you get it forever.

for sure we should include them in our gallery and on the first page. Maybe it’s exactly what I need for the first page. Those track metrics which I saw are important to create an easy, conscious and step to step way of our viewer. So, of course, they’re highly important but I want to see also on which pages we lose interest so we could correct that.

Yeah, of course, the meetings are on Mondays at 9 pm UTC, right? Or would like to meet on another day.

Design Forums are on Mondays at 5pm UTC and Wednesdays at 7pm UTC. If those times don’t work for you, then we can figure out another one.

Given that we did some work on a new IA for the website, I’m interested in how well that IA maps to this template. How did you use that IA? What worked? What was challenging and why?

I also wonder if this might make a good Atlassian Engage 4 Good project? Especially if we highlight specific problems that we need help working through.

So according to your post and Atlassian Engage 4 Good we could use that time to talk with them how to link their tools with our website so it will work as best as it can, it will be at the highest level of SEO and maybe some UI/UX tips and suggestions. I don’t know if you already have chosen the topic of sessions but if not I could expand my idea.

As you saw I haven’t already added all pages which we include in our new site map. It takes time to create a page (I need to be careful when I’m choosing the “type” of page cause later It will have an impact on its design), adds to the menu in the correct place and changes some settings manually so it will be the same as the rest. I’ll do it for sure, but at that time I think the design of a few first pages is crucial.

maybe Wednesday at 7 pm UTC? it’s just a better time for me :sweat_smile:

I think this is precisely what we need – i.e., a fresh design using commodity tooling (e.g., WordPress with minimal necessary plugins). There’s obviously a ton of things you can do with a website and within WordPress, but too many plugins or customization makes it difficult to maintain. A balance between feature-rich and sustainable would be nice. In any case, simply migrating content into this theme and prioritizing getting it into production over getting it perfect/complete would be welcome.

We’re currently hosting openmrs.org ourselves using a Docker image of Wordpress. I assume we would do the same for an update website. Is it time to resurrect a Wordpress instance as beta.openmrs.org and start work on configuring it to replace our current website?

1 Like

I love this design in comparison to the current one we have. I have very little experience with raw web development but i am currently spending my evenings learning front-end design. I have some experience working with WordPress themes.

I would love to be a part of this project. @zuzanna - if you can find a time sometime next week, could we have a quick chat about how i could jump in?

1 Like

Hi @zuzanna, I am proficient in HTML5, CSS and love designing. I have also had course work in Psychology of design and Web applications. I would love to help you in any way possible. Could we please find a time to chat next week?

I am based in EST, but have a flexible schedule!

2 Likes

@shayyan and @burhan99, great that you are interested in contributing to this effort! Instead of setting up multiple one on one meetings, I suggest that we continue to use Talk to share feedback and use Wednesday’s Design Forum times for real time reviews/discussion. If needed, we can find a different weekly time for our small working group/squad to work together.

@zuzanna, is it possible take us through the template and widgets during this week’s Design Forum so that we get a better feel for the template?

When: Wednesdays at 10pm EAT | 7pm UTC | 2pm EST | 11am PST

Where: https://om.rs/zoomdesign

1 Like

@shayyan and @burhan99, here are some additional background materials and resources to help you get to know where we are with this project:

2 Likes

@jennifer Thank you for the detailed response. I will start getting familiar with the resources you have provided and try to join the design forum this Wednesday.

There are a few different ways for us to engage with Atlassian Engage 4 Good. We might find that we have the most flexibility if we frame this as a bespoke technical project, have them join the squad working on this project, and see if we can have the person(s) interested in working with us do some workshop sessions.

Some of the skills that they can share with us include website development, design, brand strategy/development, creative, etc. Having them help with integrating our website with the Atlassian products is a great point of intersection - and we do not have to limit the project to that integration. Let’s put something in and then see if someone responds.

On a separate but related note, I think it would really help us maintain our website if we developed some tutorials on creating and updating the pages.

Hey, @shayyan and @burhan99 loved your engage and I can’t wait until we start working on the design of the website. As @jennifer said, it will be better to meet together at once and then discuss your contribution or topics which you would like to take. But, if you can’t meet with us on Wednesday at 7 pm UTC please contact me here on indirect message after the meeting so I will know what can I offer you.

Yes, I will be able to do that so you see how it looks like from the background. @jennifer have you had time to look at Zakra theme and PRO plans? @grace will you join us at Wednesday’s meeting?

1 Like