Landing Page Redesign

[elioqoshi]

At Open Source Design Summit 2018 we discussed that a website redesign is long overdue. While @AnXh3L0 and me took the lead on this, I just had recently the time to start this effort.

Our collective is not the same it was 4 years ago, so this should also reflect on the website. We now have a manifesto, a forum and a bigger focus on events and the job board. We are receiving more attention than before yet a lot of information is a bit over the place.

So I started designing the new landing page with a bit of input from @jancborchardt. A draft of the landing page is ready and this is a good time to open up feedback to more people.

The design is on Figma (sorry, folks) and you can see it here: https://www.figma.com/file/EZ1CrOeqKhwuAuW8oFnFqKrL/Open-Source-Design?node-id=0%3A1

Alternatively, here is an exported image of the landing page design:

Please note:

• This is not pixel perfect. Not all spacing and grid aligns perfectly.
• Copy is partly a placeholder and not at all what I'd suggest.

Feedback is welcome!

[jdittrich]

@elioqoshi

Some questions:

• Am I correct in assuming that the primary target group are fellow collaborators? (What are secondary target groups?)
• From "We now have a manifesto, a forum and a bigger focus on events and the job board. We are receiving more attention than before yet a lot of information is a bit over the place." I infer the following problems the redesign wants to address:
  • focus on the manifesto as a core representation of OSD
  • present as core parts of OSD "services"/"activities": events and jobs (what are things we would focus less on in return?)
  • more tidy information architecture in general, since the old one is messy.

[elioqoshi]

To my understanding:

Am I correct in assuming that the primary target group are fellow collaborators? (What are secondary target groups?)

Yes. I'd say that helping open source with design is a primary target but also teaching designers about open source is a close 2nd (or the same relevancy, though we don't do that as much).

focus on the manifesto as a core representation of OSD

I don't have a strong opinion on this. @jancborchardt and me thought it might be a better fit to include the manifesto rather than go on describing what we do. These are things we have to talk about.

present as core parts of OSD "services"/"activities": events and jobs (what are things we would focus less on in return?)

True. I don't think Resources and Articles have been a big focus (which we should either represent on the website or change).

more tidy information architecture in general, since the old one is messy.

Exactly. I'd be a fan of doing even less than on the old one.

[jancborchardt]

@opensourcedesign/core and everyone, what do you think? :)

[jancborchardt]

So I really like the mockup! :)

My only big point about it is – since you also mentioned the manifesto – that I would directly show the manifesto on the main page, not only the headings. It’s only 7 points, so 4 columns 2 rows works, the layout like the "Get involved" section. And we can have an icon for each principle.

Otherwise super nice!

[aryasoni98]

I would like to redesign landing page using material design .

[elioqoshi]

So not much changed with this one @jancborchardt. The landing page specs are ready more or less for someone to implement.

[keunes]

Hello,
Sorry for chipping in late. I recently posted a job, then went to the GitHub issues, and saw this just now :)
As all your work I saw, this looks again great @elioqoshi. Three thoughts:

• first show what you can offer me, then ask me to join. In practice: move 'get involved' below job board (& maybe events)
• show me it's an active community, with humans having interesting discussions. In practice: the job board is shown already, I would add something from the forum (most popular threads, latest posts...) to show there's humans. To make space for this, I can imagine the job board is cut to three entries
• show me it's worth visiting the job board. In practice: present the number of open (paid) jobs (to impress).

[elioqoshi]

Totally agree, the Figma file is open so anyone can grab and modify it. Not exactly open source but the closest we can have for prototyping right now?

I won't have the chance to do much more on it these days unfortunately.

[keunes]

I was thinking whether to take a spin at implementing the changes I proposed to the mock-up myself, incorporating also the idea from the OSD forum thread linked below. However I saw in the that @kartik918 was going to propose something specifically for a 'monthly showcase' so I'll hold off until (or at all, because) there's some progress there :)

[kartikcho]

Hey @keunes, glad to see you're going to be working on the redesign!

I've made the mockups and have sent them to be reviewed by @Erioldoesdesign , will put them up on the forum soon to be discussed upon.

Thanks!

[Erioldoesdesign]

Waltzing in here unfashionable late.

Re. original LP designs for Elio they are awesome and I have zero big suggestions and one small suggestion which is:

The black filtered photo header, does it need to be that high/tall/big? I like a nice splash header like the rest of us but I do sometimes think they take up a lot of space. Totally get the need for the balance of image/'white space' and content though so just a minor point really.

I'd love to see the monthly showcase work that @kartik918 has been working on in this design. I wonder if someone can add that into the Figma file and re-post a link/still screenshot for reference. There are a few other suggestions re. moving things around (job board before getting involved, some discourse forum threads being pulled in etc.) so I might try and make this part happen if folks are happy with that? mostly @elioqoshi are you cool with me tinkering around in the Figma?

I'm by no means a skilled FE coder but I can certainly help try to make this happen in code too.

[perriefidelis]

• I merged @kartikcho's idea for the showcase to the landing page(thoughts: how many projects do we want to showcase/month? do we design a different page where all the designs can be seen? if it's going to be more than 3 or 6..)

• Reshuffled the positioning of the sections (Manifesto -> Events -> Job board -> Showcase -> Supporters & Partners -> Get Involved -> footer) Actually I was thinking if the showcase should come before the job board 🤔?

One way I was also thinking of getting more people to contribute, would be creating some issues for the icons that will be used on the manifesto section??

[Erioldoesdesign]

Hard to say if Showcase should come before job board @perriefidelis 🤔 I think each person, either new visitor or returning will likely find value enough in both sections that it's probably negligible what goes above what...

OH here's an idea that's a developer question: I wonder if a section of the webpage (e.g. jobs and showcase) if one is more up to date than the other then that goes on top? So like some logic that will prioritise the most recently up to date section.

Idk It's a fun idea though eh?!

[AnXh3L0]

Yes, that is possible @Erioldoesdesign. You can compare last updated dates and change positions.

[kartikcho]

how many projects do we want to showcase/month? do we design a different page where all the designs can be seen? if it's going to be more than 3 or 6..

@perriefidelis love the design! To answer your question, #291 should provide you with context and the deliverables from the showcase.

[perriefidelis]

Oh shoot yes! I'm not sure how I missed that ... thank you @kartikcho. I'll add a design for the archive page(that's going to be a separate page), where all the showcased designs will be displayed

[kartikcho]

It's all good! You tagged someone else though @perriefidelis, haha.

Also, if you haven't already, add a fallback or a default placeholder to something like "An OSD member" in place of the contributor's name, if none is provided.

[perriefidelis]

ops... edited.

updated(the last card), now it looks like:

[AnXh3L0]

Guess we can start working on this. I feel like the mockups and latest improvements are enough to begin the changes.

[perriefidelis]

@AnXh3L0 wouldn't you need like other screens sizes? or you can scale it down properly without?

I can help with that

[AnXh3L0]

No need for the other screen sizes, I started to work on it but I'm afraid this is going to be a huge project and will require a re-write from ground-up. The current Bootstrap version is too old and doesn't support quite a lot of things, which makes the code hacky and hard to maintain.

[kartikcho]

@AnXh3L0 what do you think about creating a PR that we could keep stacking commits on top of until it's complete and then merge the gigantic PR to finish the redesign.
Incremental changes through multiple PRs seems highly unlikely because the website is directly deployed from GH pages I think. The other option is building it on a personal fork that everyone could contribute to until it's ready and we can open it's master branch to this repo.

[RDIL]

https://github.com/ourforks is perfect for this sort of thing I think.

edit: another branch in this repo also works

[AnXh3L0]

@kartikcho I think a new branch in this repo should be fine so we don't need to fork it anywhere outside of it. This way, we can work on it and maybe have previews if possible.

[SaptakS]

@AnXh3L0 are you planning to work in a new branch towards the implementation of the UI? I and @amitlzkpa are happy to collaborate with you.

[AnXh3L0]

@SaptakS Yes, I will create a new branch and work on it from scratch. Thanks for offering to help.

[SaptakS]

Awesome!

[SaptakS]

Hi @AnXh3L0 , just curious if you got some time to get a look into this.

[AnXh3L0]

Hey @SaptakS, unfortunately I haven't had time to have a look into it. Last time I started to work on it I was having a lot of issues with a gem that I never managed to fix (probably related to ghpages).

[SaptakS]

I will also look into it and see if I can make a basic first commit in a separate branch, so you can probably work on top of that branch.

[RDIL]

While we are on the subject, we should update bootstrap and all the other libraries.

[SaptakS]

@RDIL agreed

[RDIL]

I created the ui-redesign branch, feel free to commit to it. I'm working on it now.

[AnXh3L0]

I was actually going to re-write the whole website because updating bootstrap and the other libs just wasn't worth the debugging and changes.

[RDIL]

Go ahead. I'm fine with that.

[Erioldoesdesign]

Would it be helpful to turn this issue into an epic and make each part of the re-design smaller issues that make up the epic so more devs could work across this piece of work?

[SaptakS]

I think that's a good idea.

[kartikcho]

Hey @AnXh3L0, are you still working on the rewrite?

[AnXh3L0]

@kartikcho not at the moment, busy with current work.

[kartikcho]

Np, just wanted to check if you were still active on this.

[MonjimaLahiri]

I just came to know about open source design, and I must say, as a first time user, I am pretty confused on what to do next. I had to google up stuffs like how to contribute, how exactly it works and everything. Can we make the design a bit more user friendly, simple enough for a newbie to understand? perhaps provide a mini tutorial section to guide them? and a better chatbot? what's with all this use html format :) ?

[AnXh3L0]

Hello @MonjimaLahiri, we know that this redesign has been dragged on for quite some time and it's an immediate need, we are still working on finding a solution. Regarding your questions, what do you mean by chatbot? Additionally, what do you mean by the "all this use html format"?

Have you been able to check out our Discourse forum? https://discourse.opensourcedesign.net

[MonjimaLahiri]

As a new user, i am a bit confused here. can i get help through this discobot?

[keunes]

Hi @MonjimaLahiri
That 'discobot' is nothing like a chatbot - it's not interactive. It's a 'bot' from the forum software (which is called 'discourse'). It will help you use the forum, but is not specific to Open Source Design. I don't know actually if the messages this bot sends to new users can be adjusted to explain this better.
In any case, to get actual help, you'll need to create a forum post, so that someone from the community can answer.