APInf front page designing

[Nazarah]

Goal

Redesigned front page keeping in mind wow effect and mobile responsiveness

Definition of done

• [x] Run a survey to get feedback from API users to see if hypothetical design meets up their need.
• [x] Go through articles about front page designs
• [x] Look existing API hosting platforms and find out their frontpage's strength/weakness
• [x] low fidelity (or if possible high fidelity) sketches for future APInf wireframes

[Nazarah]

"5 Major Mistakes Businesses Keep Making with their Website’s Homepage Design"

Why people come to web page? “I want to find what I’m looking for…and I want to find it quickly.”

Mistakes: sliders are a design disaster. Headlines should never be about YOUR STUFF. No one cares about company news If you’re looking for them to convert, give them LESS Stop trying to tell them everything about your company

https://www.thesaleslion.com/website-homepage-design-mistakes/

[Nazarah]

"6 Elements of Outstanding Homepage Design"

"_Good homepage design can be broken down into three elements:

• content
• tech
• visual design._"

"_Homepage serves three key purposes:

To attract and captivate visitors To educate visitors on the brand To encourage visitors to visit other pages on the website_"

1. Establish Your Identity

   • Introduce and give visitors a clear sense of your brand
   • Provide visitors with clear paths to other pages on your site
   • Be memorable (unique design, a catchy logo, or an overall appealing look)

2. Keep It Simple

   • Easy-to-read text
   • Plenty of white space
   • Clearly labeled sections that make navigation a breeze

3. Keep It Above the Fold (the part of the homepage that is immediately visible in a browser)

   • homepage design needs to work across all devices and operating systems

4. Choose Your Font Wisely

   • if you have text that you want your visitors to read, make it easy to read.

5. Pay Attention to Your Use of Color

6. Have a Bold Supporting Image

   • that embodies your brand's vision
   • should be authentic (not stock photos)

http://www.inboundmarketingagents.com/inbound-marketing-agents-blog/bid/345449/6-elements-of-outstanding-homepage-design

[Nazarah]

"16 of the Best Website Homepage Design Examples"

https://blog.hubspot.com/blog/tabid/6307/bid/34006/15-examples-of-brilliant-homepage-design.aspx#sm.000ny2g3m154rfn0x6a2rbpwaqf1t

Some additional points from the article:

• It clearly answers "Who I am," "What I do," and/or "What can you (the visitor) do here."
• It resonates with the target audience.
• It includes calls-to-action (CTAs).
• It's always changing.
• It is great to have social proof of success
• References of companies vouching for your service (company logos)

[Nazarah]

Competitors

Hitch: https://www.hitchhq.com/ Market Mashape: https://market.mashape.com/

[Nazarah]

Tweeter Survey: https://twitter.com/NazarahTheCat/status/836205032970289153

[Nazarah]

An informative read:

"The Current State of Homepage & Category UX "

https://baymard.com/blog/current-state-of-ecommerce-category-ux?utm_content=buffer6ee69&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

[Nazarah]

A sample front page design prepared based on different recommendations and design ideas:

Now a days most of the website front page shows a different topbar for non-signed in users to catch their attraction. So the primary things in the topbar are API catalog, Help and Support, Pricing and About Us. Apart from them there are options to change language, Sign in and Sign UP as CTA action The backgroud of the front page can be a still picture or a high definition video of the APInf team. I'd suggest to add our hooking message and slogan over the background (which can be customized from branding menu). Now a days, it is enough to have a logo in order to name the product. We don't need to write APInf as a separate text over the background picture. Users would 1st come to look for APIs or their documentation in the site. So the search functionality has been shown as primary means of action. This indicates that searching can be done for APIs and their documentations. There is also a CTA for Managing APIs. On clicking so anonymous user will be redirected to a page to register (along with a login link for people already having an account). when s/he does so successfully (including giving valid information and verifying link in email), the user will be redicted to Add API page. (Add API page would be redesigned). Front page should show some most popular APIs (e.g. facebook, tiwtter, etc.) and how many people are following them (in addition to users following from APInf probably?) There should also be a single button called "Watch". Clicking this would help user gets notification anytime any change happens to the API (e.g. change in metadata, documentation, health, etc --> Future Implementation) I suggest to have separate API cards for front-page. Since we will be hosting only reliable, up and running, produciton use APIs, there is no need to show any lifecycle status and API health. his keeps the design neat and simple. Clicking on See More APIs leads the user to API catalog.

[Nazarah]

(continuation from prev comment)

I suggest to make the topbar floating. SO that whenever user scrolls down and up, s/he can easily access the topbar menus. When topbar gets repositioned elsewhere from cover photo, this can be opaque. There can be some initial statistics to let new comers know how many APIs are hosted in the platform, their user number and successful API call. This is a short glimpse and more information can be obtained from About US page.

[Nazarah]

(cont. from previous comment)

We can show a list of customer logos who is usinging APInf as a solution. This boosts a product's success and chances of adding more users. the chatbot for live communication/offline communication should also be floating. last but not the least, Site footer should contain the following information: Contact details Link to pages in Social Media Copyright text Links to access Privacy Policies and Terms of Uses Product trials: free and pricing Solution: Enterprise and Parternship Resources Recognition Company information of APINf.

[Nazarah]

@bajiat @kyyberi @philippeluickx please leave your feedback as comments

[kyyberi]

To me this looks like good direction! We are going towards simplicity now.

I would prefer to hear your presentation about the UX, rather than try to undertand all from text and screenshots. In addition this is a bigger scale change and thus thorough discussion with the team is needed. Below is still a few quick notes about the new UX suggestion.

Suggested footer is better previous one; clear, conventional and contemporary.

In a few occasions it is suggested that user gets more information from "About us". I find that something we need to discuss more. The link to more details should be perhaps near the text (or text/object it self is link to more information) rather than forcing user to search for "About us" and click that (even so if the menu is floating/sticky) and then again search for right information or worse to click once again something to actually reach information.

What has not been discussed thoroughly is the absolute requirement of proper mobile UX. Current version does not have mobile UX. This is related to menu, which behaves often a bit differently on mobile UX than laptop version.

A little question about this "Since we will be hosting only reliable, up and running, produciton use APIs". When did we decide to ditch life cycle support and focus only on production level APIs? I must have missed this obviously. If this is the decision, then we are swimming against the mainstream in API management (disruptive, but is it good decision is another topic).

Anyway, good work @Nazarah!

[philippeluickx]

Definitely good improvements! Few comments

• Signup is never a good CTA. Also, there is still a few highlighted CTA's (signup, search, manage APIs). Let's pick one.
• I would remove the About us in the header. I like the way it is in the footer.
• I would also remove help and support. There is the live chat already.
• I am not sure about the language switch. It takes too much space and it's an action you only do once...
• Some sites (like medium) combine the signup and login.
• The picture could be more happy
• "some" of our customers (only having 4 is kinda sad) - we also need permission from them?

@kyyberi maybe the idea is to have as "default" only production APIs and then manage lifecycle only. I have been discussing with @Nazarah about lifecycle UX and feel like 90% of the time, devs are interested in production API. So that's what we should design. Of course, the feature need to be implemented but can be less prominent? To be discussed indeed.

[Nazarah]

@kyyberi in response to your feedback:

In a few occasions it is suggested that user gets more information from "About us". I find that something we need to discuss more. The link to more details should be perhaps near the text (or text/object it self is link to more information) rather than forcing user to search for "About us" and click that (even so if the menu is floating/sticky) and then again search for right information or worse to click once again something to actually reach information.

Right now in front page we have a lot of information about how APInf can be used from API owner/consumer's POV. It talks about getting started, being open source, reaching out to developers, etc. To me About Us is the suitable place to have all these content. Also we can host our primary tutorials (e.g. steps to add an API, Making a call to API, etc.) as well as channels to additional tutorials. Another option is that "About Us" redirects users to https://apinf.org. So current front page contents can be hosted there.

What has not been discussed thoroughly is the absolute requirement of proper mobile UX. Current version does not have mobile UX. This is related to menu, which behaves often a bit differently on mobile UX than laptop version.

I have plans to run usability test of APIf using my mobile phone. Issues and findouts will be posted in GitHub.

A little question about this "Since we will be hosting only reliable, up and running, produciton use APIs". When did we decide to ditch life cycle support and focus only on production level APIs? I must have missed this obviously. If this is the decision, then we are swimming against the mainstream in API management (disruptive, but is it good decision is another topic).

I believe @philippeluickx has given answer to that. In summary, it is more effective to show live, production-use APIs which are reliable and up-and-running most of the time. These APIs don't require their lifecycles to be evident to users that much. Also production based APIs would make newbies to APInf interested enough to browse the API category, or even to sign up. Lifecycle would be emphasized more on API catalog, API profile and Organization profile.

Thanks for the praise! 💃

[Nazarah]

@philippeluickx in response to your feedback

Signup is never a good CTA. Also, there is still a few highlighted CTA's (signup, search, manage APIs). Let's pick one.

We can always pick a CTA that would be more suitable for APInf's strategy. I added the idea of CTA because currently we don't have one and this a big lacking.

I would remove the About us in the header. I like the way it is in the footer.

I Understand your point. We can have other menu at Navbar which is more important. A response for About Us is the following:

Right now in front page we have a lot of information about how APInf can be used from API owner/consumer's POV. It talks about getting started, being open source, reaching out to developers, etc. To me About Us is the suitable place to have all these content. Also we can host our primary tutorials (e.g. steps to add an API, Making a call to API, etc.) as well as channels to additional tutorials. Another option is that "About Us" redirects users to https://apinf.org. So current front page contents can be hosted there.

I would also remove help and support. There is the live chat already.

I was thinking to place youtube tutorials and link to APInf documentation there. But this can also be placed in "About Us" section. Would be good if we choose to keep one. :)

I am not sure about the language switch. It takes too much space and it's an action you only do once...

In "16 of the Best Website Homepage Design Examples", I also hardly noticed language changing option in the front page. This can always be kept on user's profile or another submenu. But i was thinking about the case that When I am visiting a Finnish website, I am always clicking on Chrome to translate my page. I'd be really glad to have an English language selection somewhere visible without me having to sign up first to change that. So we need to come up with something to make this option available to users.

Some sites (like medium) combine the signup and login.

Can be incorporated if we decide to use something else as CTA than SignUp

The picture could be more happy

We should be constantly changing the picture in front page. However, I was thinking about a 1 minute video (that keeps on repeating) as front page cover. Got the idea from telerik's site. We also can play a photo slide show containing 5-6 images each staying for 5 seconds in user view.

"some" of our customers (only having 4 is kinda sad) - we also need permission from them?

We would be gradually adding customer logos (with their permissions) as soon as they start using our product. Right now we have very few and I many need to remove "Bank Of Finland" from there as they are not yet our customer. The number is unfortunately small, but something's better than nothing. :)

Thanks for the feedback!

[philippeluickx]

My opinions:

• Definitely moving with big steps forward, good improvements!
• CTA should be a focus on the content. Since we assume that most visitors are API users, there's 2 options: either they know what they look for > Search API or they want to browse and discover > most popular APIs.
• Signup should be postponed until it fits the mental model for a user. E.g. only when a user "bookmarks" an API, wants to leave feedback etc.
• The platform frontpage should only contain information about the APIs. So no "current customers" or anything related to apinf the company. That should all be on the project page. We discussed that we can add links in the footer menu (which I truly love) and that those links are editable through the platform admin interface.
• Get rid of all the "cruft". Tagline should only be in the