Filter applications by category for Partner application page.

Iteration #2 (closed): Update of the Application Page.

Requirement to filter applications by category at the top of the application page.

Action Items:

• Design icons to go with each of the categories. Icons should be outline only, similar to the image below - @luke

Application categories:

• Native Apps

• Command Line Interface (CLI) Clients

• API Clients

• Utilities

• Continuous Integration

• CMS Plugins

• GUI Git Clients

• Performance Measurements

• Scrum Boards

• Login

• Build with GitLab

• GitLab Runners

• Add box at the top of the page beneath the Search Bar added in iteration #1 (closed). See example webpage.

• Box should have large title in the centre reading: Application Categories

• Beneath title should be 4x3 (4 across, 3 down) application boxes with the each of application categories specified above

• In each box should be the title of the category and the icon to the left of the title, both within a box.

• When the user clicks on an application category, the page scrolls down to the category in it's placing on the webpage. It should NOT filter out other categories.

Mentioned in issue #951

@eliran.mesika

@dfranca can you help out with this? The main request is to design icons for the different application categories (see description above). Also feel free to provide design feedback and recommendations concerning the page layout and UX as well. cc @scornille

Thanks @luke . @dfranca would this be possible to complete by mid-next week? Happy to jump on a call to discuss the page design and icon requirements in more detail if required. Overarching application page issue is here

@luke sure, happy to help out with this!

@scornille yeah, I think I can have the icons ready by the date required, I'll start working on those straight away. Should we keep them at the same size as the ones on the example above, or do you have any other size in mind?

@dfranca Yeah, I think it would be good to keep them a similar size and style as the examples. The overarching issue for the redesign is here. Might help give some context. Worth keep in mind that the icons will have writing beneath them of each category, of which both will be enclosed within a button. Thanks!

@scornille @luke here are the icons I came up with. Since these represent apps, I decided to keep all of them inside a computer window, acting as a frame. Let me know what you think. And the next one for real size:

@dfranca these look great. @eliran.mesika what are your thoughts. My only suggestion would be that we need to make the words more prominent. Perhaps we could add the words inside the computer window? Make them a little darker/bigger? IF they can't be inside the computer window, what is the typical approach for words and icon - should the words be under the icon that they are aligned with?

@scornille forgot to mention that the words are not final, they are just there so you know which icon represents what.

Having them inside the window won't work, because they would become unreadable due to size. An option would be to display the buttons with the text on the right side of the icons:

@dfranca the icons look great, the only one I don't quite get is Scrum Boards — could you explain that one at bit?

Otherwise I agree with having the application category title either to the right of the icons as you have it, or below. However, seeing that most of these titles will take up two lines (to be prominent enough), I think text to the right is the best approach.

But you may want to experiment and see what they'd look like mocked up on the actual page.

@luke thanks! That particular one was my take on the scrum symbol:

I also have alternatives a couple of alternatives. The first one maybe represents boards better:

@dfranca @scornille icons look great indeed! Agree that the name should sit to the right of the icon, however I think the box they currently are in takes away from the appearance - not sure if that's just for the display here or for the page as well.

@dfranca , re @eliran.mesika comment. Perhaps we could try an option without frames around each of the icons?

@eliran.mesika @scornille you're referring to this outer box, right?

That's just for display, so you can see how the icon and text would look inside a button. Next I'm going to work on the final arrangement and display for these icons.

Yes I was referring to that.

Here's a mockup of how the section could look like, without the use of boxes:

And we can make use of the purple color for hover:

Let me know what you think.

@dfranca can we see a mock of the entire page? It's hard to make a decision without the full picture.

@dfranca , here is the whole issue if it helps provide some context of all the work to be done.

@dfranca , here is the whole issue if it helps provide some context of all the work to be done. https://gitlab.com/gitlab-com/www-gitlab-com/issues/951

@eliran.mesika @scornille here are some mockups of the page:

• This version separates the sections with a line, keeping the background the same color. The problem with this one is that it is pretty plain, and might become boring for the user if he scrolls down. But since you're supposed to click at the top to filter a category and be transported to it, this might end up not being an issue.

• In this next one, the background of each section alternates color. This adds some rhythm to the page and could help in breaking the problem of the previous mock.

• Also, it might be important to make the categories filter display entirely above the fold. If we shrink some elements a bit, it can work.

I like alternating the colour!

@dfranca Thanks for sharing the mocks. The user scenarios we've scoped out led to users searching for a specific app or a category so color alternation isn't critical. I would want to make sure the category are implicitly clear these are essentially links/button to lead you to the related apps. At the moment, I'm not sure that's obvious but I think I may be overkilling it on this page :)

@eliran.mesika would changing "Application Categories" to "Choose Application Category" be an option? That could help in informing those elements are clickable.

@dfranca No, I don't think that's relevant as this isn't a form. Let's go with this for now - it's a big step up.

@eliran.mesika right, awesome! Should we go with the non alternating background version then? When we're set on this, I can go on and prepare a mobile mock. cc @scornille

@dfranca thanks for your work on this. It is going to be a huge improvement in terms of aesthetic and usability. Could I ask one more favour of you. We are going to include the logos of our application partners above the each application. But, there are some application partners that do not have logos, so we need a plain default logo, perhaps a grey GitLab logo which we can use for those application partners. What are your thoughts? Also @eliran.mesika

@scornille no problem, that's what I'm here for! As for the logo, you mean having something like this as a fallback:

@dfranca perfect, could you pelase share the vector file? Thanks

@scornille sure, here it is: logo-grey.svg

@scornille @eliran.mesika Here are the mockups for both desktop and mobile:

Let me know what you think. cc @luke

@dfranca that looks smart! Only feedback I have is that the search box needs a bit of separation as it blends in with the application section.

@eliran.mesika I'm stepping in while David is out this week. How about distinguishing the search bar with a light gray fill?

@scornille what is the state of the search bar given https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/4162?

@eliran.mesika , @jivanvl is updating the search bar as per the suggestions on the issue. Should be done soon. This issue will come after that, but we are still looking at a completion date for the search bar and this issue within the first half of Jan.

assigned to @lbennett

@scornille are there any additional design tasks for this? Just want to me sure you assigned to the right Luke

@luke no additional design tasks required. Yes, have assigned to the correct Luke! @lbennett how is the timeline for this change looking? Thanks!

@lbennett how's it going? Just checking in on this as we were looking to have it finalised today. Do you have an update? Thanks

Sorry for the delay on this, got bogged down. I will work on this today although I doubt we can get it merged in the same day. On it!

Do we have copy to replace the lorem ipsum?

Also, do we have a repo for www-gitlab-com sketch files?

I found it! https://gitlab.com/gitlab-com/marketing/blob/5a24a6f305a767b7b37f830ed9c00ad2e370a3dd/design/web-design/about-gitlab-com/partner-page/_artwork/partner-page.sketch

1. Are we now only accepting one link and no link titles? Currently applications can have multiple links and they can specify the text for the anchor.

Currently I've gone through the applications data to remove all multiple links and titles for a single link.

---

2. Also, should the application descriptions be truncated? Some are quite long at the moment.

Currently it's not truncated.

---

3. Also, do the application links have any hover effect as they have an underline in their un-hovered state.

Currently I've left this

---

4. What about links in the text?

Currently I've just kept them as normal links. I have not adjusted color, height or behaviour.

---

5. Can I get a design for the suggestions dropdown with the new layout?

mentioned in merge request !4499 (merged)

!4499 (merged) ready for initial review, still some questions to answer above.

@dfranca & @luke the questions above asked by @lbennett are probably more relevant to you both. Are you able to please provide input?

@lbennett for Q1 & Q4, we should be able to include as many links as requested?

@lbennett answering your questions:

• Q2: From a design standpoint, I think they should be truncated so they will all look the same. Keeping it to 3 lines max.
• Q3: We can just remove the underline on hovering.
• Q4: We can make the links in the text purple, like the image below, with the same behaviour on hover as the application links. *Q5: Here's a mockup for the dropdown, but you can check the sketch file for details.

Just let me know if you have any other questions!

@lbennett do you have any other questions? I have updated the due date for this. Let me know if I can help in any way.

This is great, thanks @scornille!

@lbennett sorry to pressure, we are coming up to the due date for this issue tomorrow. Just wondering how we are progressing? Thanks!

Q1 & Q4, we should be able to include as many links as requested?

@scornille Does this mean they can provide as many main orange links as requested? Sure they can add links to the description, but I'm talking about the orange link.

@lbennett can we limit to 3 links?

@scornille Sure, @dfranca could I get a design for the placement of 1, 2 and 3 orange links?

Also, I think if we have this method of clicking a category to scroll to that section, we should have a 'scroll to top' of sorts.

I've looked into truncating the text at the 3rd line. There are a number of ways to achieve this, none of which are that pretty and boring. I'm thinking, I take a rough stab at how many characters are needed for 3 lines and we set that as the character limit. This means if someone uses only links in their description for example, it would probably be 4 lines, not 3, but a character limit of truncation is much simpler to describe for the contributors and the code.

@lbennett updates made to the .sketch file. Great point on the scroll to top, makes a lot of sense. Check the V6 artboard for the changes.

Thanks for a quick response @dfranca

Cool, thanks everyone. let me know if you need any further input from me

I've dropped the links within the content as they overly complicate the truncation, I've manually moved all description links to application links.

Thanks all for all the work you have done. Just wondering if this is good enough that we can get it live on the website?

@lbennett are we ready to go live?

@scornille In review as of now.

closed via merge request !4499 (merged)

mentioned in commit virtuacreative/www-gitlab-com@b38bd548