[Design] Website overhaul for skywalking.apache.org

[rickyzhangca]

I'm a summer student working on an improved design for skywalking.apache.org. After 2.5 months of designing, I'm showcasing some of the ideas here and sharing an interactive prototype to hear feedbacks and thoughts from everyone. Any input would be appreciated. I'm happy to explain the design decisions behind any change.

Credits to @wu-sheng for being my mentor.

Improved readability

Several changes are introduced aiming to improve the readability. They include decluttering, restyling and reorganizing contents.

More intuitive interactions

Some of the interactions are reworked to better involve user at where we should. For example, users can peek SkyWalking UI right at the landing scene, and find the try live demo button soon after. The logo wall simply self-scroll.

Refined visual design

All designers love over-spend time on pixel-perfecting. Other than aesthetics, there are other good reasons behind. For example, a set of clean icons here lets you locate repos easier.

Check out the prototype!

"A prototype is worth a thousand pictures": start

try.it.mov

[wu-sheng]

User page seems a little small, I think we should use vertical space more.

[hanahmily]

Awesome. The website is more attractive than before.

All changes look brilliant to me except for the feature gallery

Could we place some diagrams or artworks instead of raw YAMLs here? The visitor has to zoom into every piece to find out the details of each one.

[rickyzhangca]

That is almost the reasoning behind this design, users can zoom into the technical details a bit more. I assumed that most of the users are comfortable reading the snippets.

[kezhenxu94]

The new design looks fantastic!

One thing to note, as per the Apache policy, we should not display the users in our home page, we have fixed this days ago and it seems to be on your new design still, you might need to adjust the home page of your new design accordingly.

[rickyzhangca]

Thanks, and I appreciate Apache for providing the guideline and rational behind it. Removing the logo wall. I wonder if it's ok to show usage data (etc. X tracing/day at Y, proud to empower Z companies)? These demonstrate the scale SkyWalking is used and capable of. The guideline didn't seem to have a clear cut here and this usage seems to comply the guideline. Correct me if wrong @kezhenxu94 @wu-sheng

[kezhenxu94]

Showing the usage data is feasible to me, as long as we don't show bias to any vendor or company, "x traces/day" is an objective statement and IMO it is ok to be on the website but "proud to empower y company" seems to be kind of subjective and might imply bias in some linguistic context.

[rickyzhangca]

edited, what do you think?

[kezhenxu94]

edited, what do you think?

Hi @rickyzhangca, sorry I didn't make it clear enough, "powered by" companies' names and/or logos are all not allowed in home page, the stats without company names are allowed. As per this policy, I think we have to put these in a secondary page and only keep a hyperlink in the homepage

[rickyzhangca]

removed, I liked this section

[heyanlong]

Stunning design!🥳

But I can't visually see the meaning of the colored buttons on the right.

[kezhenxu94]

4. The direction of CLI to SkyWalking arrow is opposite

If the arrow means the dataflow (seems to be true for other places), I think it's right.

Also please note there is data from CLI to OAP and vice versa, CLI can report event data to OAP and retrieve data from OAP

[rickyzhangca]

1. Is OAP server a very skywalking vocabulary? OAP itself is generic but it seems that skywalking uses it the most (did a quick google). If so, considering the main audience of the landing page, it could be less clear than just receiver cluster and aggregator cluster. Though I doubt if people use aggregator cluster often either. Just my thought, updated the graphics. It does gives more room to breathe.
2. Added! Technically should be Webhooks and gRPCHook? But I agree that showing the apps aligns with our goal better.
3. My thought is that the we only use graphics for the services supported to keep the graph clean. That's the idea behind many design decisions we've made so far and I think it works. Besides, using generic icons is inconsistent and GUI/CLI is more readable as well.
4. Good catch. I feel it's almost bi-directional? It can read and write. (edit: just saw @kezhenxu94 confirmed that)

[wu-sheng]

1. Yes, putting a general name makes more sense.
2. Webhook is a general web Restful/JSON request, but slack/pagerduty are vendor specific.
3. Make sense.
4. Yes, it is bi-directional.

This is super better. Just feel SkyWalking cluster is a little thin, just feeling.

[rickyzhangca]

Thank you! Just made it taller. Probably at a good spot now before it becomes chunky. Feature locking this design to wrap it up for final hand-off.

[Superskyyy]

I love it, looks so cool.

[wankai123]

Nice design!
I have one question about the content: should we put this on the home page?

[wu-sheng]

Once there is no specific project names or vendors, we are good.

[rickyzhangca]

Thanks! I hope it's a step up from the current site and will last long.

Design wise, this section aims to provide detailed highlights to best sell SkyWalking, so user doesn't have to leave the site to google or spend time searching through our blogs by themselves. The comparison with competing/similar products are almost always one thing user will look for.

[rickyzhangca]

Policy wise, thank you wu-sheng for double checking!

[Jtrust]

It looks fantastic!
But I have a few questions:

• What is the interaction of SkyWalking UI screenshots like on mobile? It looks like the click area is going to be really small.
  

• Based on my personal preference, is it possible to change the rectangular border to other form? As I see, the rest of the page is mostly rounded design language.
  
  

[rickyzhangca]

Screenshots section: 3 approaches (currently). The buttons won't be tiny. We can just switch to another set of graphics made for phones.

• Use screenshots from SkyWalking UI adapted to phone screen and include interactions. However we don't have the very best responsive design on the UI yet. Not sure if we are confident to show case it. E.g. Vercel does something similar.
• Keep using desktop screenshots but get rid of the interactions. Screenshots are horizontally scrollable. Not a common practice.
• Simplify the entire section. E.g. Stripe does something similar.

What do you think?

[rickyzhangca]

Round corners: good point! I started with some Apple-ish round corners there but I realized it's too much for us so I removed them. Glad to hear that we love some gentle round corners. Good balance between the sharp ones and Apple ones. We unintentionally did an AB testing here.

Updated the screens.

[Jtrust]

I prefer the design of the third one.

[Jtrust]

As far as I know, the width of the main display area on a general page is around 1200px. In this case, it's 1440px. Will it look too full? @rickyzhangca

[rickyzhangca]

@wu-sheng would we need to include the TM in our logo, if that's our "official logo"? I don't think ours in the Apache Project logos has one https://www.apache.org/foundation/marks/pmcs#graphics

[wu-sheng]

Most logos are submitted by some end users, which should be but missed from time to time.

[rickyzhangca]

ok I'll stick to the ones submitted to Apache for now

[Superskyyy]

Hey Ricky, great work! 😍

[wu-sheng]

Noticed 2 things.

1. The directions of arrows in the architecture graph are not accurate. Most of them are one-way only. Also, the latest version seems too thin in the middle, but heavy on both sides.
2. Demo env requires user name and password to access, please provide a way to show them.

[rickyzhangca]

My bad! forgot to double check them after copy & paste. Fixed.

[rickyzhangca]

[wu-sheng]

Homepage is implemented through apache/skywalking-website#352. @Jtrust leads.