DappCon 2023: Design Anatomy Of A Perfect SDK PageIra Nezhynska

Transcript

like here at least so uh who have heard about a thinge which is called developer experience who feels comfortable explaining us what is developer experience so um if whatever product you creating if you creating a product uh which is for n developers and you offer any development tools for uh developers to build with you also offer the product for developers and once they start building on your product that's exactly the big black dot there where they start using

and from this moment they become a user SL developer but before this um every uh before they start using uh the development docks they don't just jump into the docks right away they do a loop um that on on which they always go through some considerations and evaluation and especially if there are several projects on the market with the same product with uh very close s DEC then they will start thinking like what s dek is better and be they first evaluate and then they all

only start developing and using and only the internal the second Loop is the user experience so we don't talk about docs itself today we are going to talk about uh what will happen on your website and the website as an asset is on the Journey of consideration and evaluation of which SDK to choose when we talk about the website design we always think in three layers and the first layer is information architecture um on this layer imagine if the website was a c on this layer you think about what buildings you're going to place across the city what type of buildings and how

they're positioned so do you have universities do you have schools how many Factories do you have maybe you don't have factories maybe you have a zo uh the second layer is user flows um in general both of them relate to user experience uh so we don't call them at this presentation user experience both of them are um but on the moment of the user flows you align the you try to navigate the particular type of the visitor or habitat of this city into the line uh or the flow how they visit one building to another building to another building so their day life or their journey is completed and the second level is visual style and Yi and wipe

that's where Brandon lives and that's where you define if it's a a city will be it's a bous city or is it a solar Punk City or is it underground and all of them may have the same structure in terms of information architecture but they just will look differently uh when I go and run through the structure of the P page uh this will be like a navigation and indication on the top corner so please pay attention on the uh top uh left corner first information architecture what information blocks do you need and you discover it through the use experience research and uh customer audience interviews so first you want to talk to people uh who have been working

with SDK so you know what works what doesn't work what they're looking for what they need and the second is audience interviews um every time every company at some point of their conversation this building they will sit together and talk about who we are building for and within this Workshop you will identify uh core audiences that's a very easy case um usually the case is more complicated where you have segmentation of the audiences let's say if you have partners and but you have business partners and academic Partners so although they um you work with them in the same way and they expect the same thing from you when it comes to

collaboration their ultimate goals are to so the ultimate goals is pretty different for business people and for academic people uh mostly uh developers will fall into the main audience and uh that's why uh a lot of information on the website is actually for developers so you need to interview them separately um and uh all of those audiences will go through the different types of onboarding Journey before they start using so before users will start using product they will check like a website uh an event page uh some newsletters whatever developers may go to the event to the hackaton and on after the

hackaton they actually got to the real product which is Dev documentation and when regardless to like what type of audience when you interview you ask the set of questions they usually grouped in in these categories so these are not questions these are just categories and after you collect the data and you form the data in something more readable where you can spot their how I call uh the U gold so in this U gold you actually see um where is um the green dots is the RW data that's the gold and that helps you to form the structure of what they will

need to know and what they're looking for on top what you want to tell because the amount of what you tell is always a lot and then when you have this data you start playing already onto level s information architecture and user flows when you see okay if they have this doubt we will put this block information here and the following question to this question is another one so how we structure all the blocks and we keep them in the same Learning Journey until they know everything and they're ready to go so let's create a self-initiated project like dcon SDK definitely dcon SDK cannot have an dek y4 so let's call it radial it's Decay because we are in

the building of radial system because it's self-initiated projects let's go while typography apply some branding off we go so first structure title intro button nothing special uh three common mistakes are done at this step is that uh too much text on the introduction because everyone think we read a lot of text on the web pages not uh the second uh mistake is adding um second CTA to go to docks uh like most common is join the community um you need to remember that this page is mostly for the first time second time visitors and joining the

community at this first fold it's too early they first need to understand that they're here not for joining the community but they're here to learn about the your SDK so you can use the CTA somewhere to the bottom and the last mistake that doesn't actually very much hurt but it's a mistake it's when people add unnecessary copy like for developers by developers of verce Versa it's like it's SDK and when it's like one multiple when you have it so many times on the website then uh with such copy the website becomes like a Christmas tree of copyrighting uh what you can do instead is to use a very sharp line since no one

is going to read it this this will work only for SEO and it's good if you will rephrase it the main purpose of the product but for developers of course if it supplies on SDK and what is super important is to put the uh supported platforms languages right away on the top because that's a constraint and sometimes it it's good to know at the very beginning so you save time for visitors the next section is feature section so at this moment at this section there is something that you want to tell it's like possibilities of your SDK and something that they need to achieve which is to gain some benefits and the 0.1.3 are interconnected so you

first you need to know what the possibili and then you can rephrase through a several um copyrighting exercises they just like copyright uh how to rephrase possibilities into benefits uh the second one in case you have a few Alternatives of the market and there are few Alternatives offering SDK so it's good to uh highlight what's special for yours and how yours is better and usually it will look like um feature image feature image feature image you will have five sometimes seven and some of them will be very specific so you can link buttons from this features to the particular place in the

documentation and that will be totally logical but then there might be like two three features will not have specific they're like more overall and it's very tempting to just put a button because we're in the flow of putting buttons everywhere and go to docks uh which is a mistake because it creates uh something which is called CTA clustering and in general it uh lowers the uh effectiveness of the page in general so what you can do instead is to group them in into non-clickable just informative features and if they are very important features just put them on the top of those that are clickable and bring you

to the particular parts of their documentation uh the next section is set up or get started so get started has first like setup big one should be super visible uh usually big because you can have setups for different environments uh and then Learning Journey from the beginner to the most ADV Advanced and all of them obviously will bring you to documentation but not to the overview but exactly to the point like if it's beginner tutorial this first beginner tutorial if it's sample then it's first sample of the flow um then sample projects are most important so if you want to invest into something it's better not to invest in video tutorials

or something but rather to uh sample project and while if there is someone who is Main maintaining your page often and if your page is working like like a promotional um which is actually it is uh then is good this is a place where you can put the upcoming hackaton guide some video or the video from the workshop from the hackaton so then it creates that learning section which is very solid uh the next section is DBS built with radial SDK so usually people do what loger loger loger loger uh in another case we just big image with some logos and thousand of Ops are using our SDK start building and again link to the

docs so that will work only if you have a particular link to the up Marketplace forward with your documentation if not uh that's a moment where it's better to like overd deliver a little bit and uh try to find who's actually using and give them a links so people can see that it's actually a real project and also what it will give you that mostly that will be smaller projects like smaller than you building with your documentation so they will be very proud to be on your page and they also will have some reason to share your SDK page with somewhere else and it's like

marketing symbios uh what's left there we have advanced resources frequently asked questions Dev forums def chat and def newsletter Advanced resources like white papers guide can stay on this page they're relevant uh frequently asked questions can go to docs because mostly questions will pop up there uh Dev forums Dev chat it's just links to Discord and forum and then def newsletter um that's a very common mistake I see uh in the space uh join our community which is sign up to the newsletter uh that's a job for the copywriter but uh when us add to the newsletter I honor joining community so

first uh be very clear in the copy and the second if you have a product which is for non-technical users and do you you do a lot of marketing for like Outreach email Outreach for non-technical people try to separate Dev newsletter and uh non-technical newsletter uh that is the best case or if your product is primary for developer uh then it's good to have a little different copy in just explaining that there are sometimes Dev updates uh the structure first Advanced resources frequently asked questions get support newsletter separately because it doesn't relate to the learning uh about the current state uh and well because we can

uh that's the best place to place careers and Dev grants uh in this section uh the end of the page to sum up that's the whole structure that's not that big it will make it to work a little bit uh but it's just based on collecting the links um if you have been following me what section is missing uh now we are [Music] missing use cases UPS build with something with your SDK so in general we can put them in two places we can put

them under the features or we can put them under the uh tutorials where would you put it so if you put it after the tutorials which is pretty logical because it shows the example exle of there uh how documentation can be used uh then it's better to just Place logos in the very first because the apps using it it's um uh confirmation that it's a working documentation it's a good one and it's works for your marketing uh and promotion if you are doing it after the

feature it's already a promotional part just make it very strong and clickable and make sure that the best are on the very top uh so I will skip those three slides hoping that someone will ask the question that I would like to answer and we have the last layer left so visual style tone of voice WIP which is Brandon um that what I'm do for living and for Joy for 15 years and if uh we would like to talk about this now that would be like um uh one month's Brandon boot camp uh which we don't have time today uh but because of this if you

want to dive a little bit deeper to this topic so if you go to the website uh then on the very very top almost on the very top there is a recording from East Denver talk uh where I talk how your positioning can be used for website architecture and branding strategy and also this talk is not published it's also East Denver uh but that's a 45 minutes recording uh of uh video like Min viable brand where actually talk about that very very very top layer uh that we didn't cover today that was pretty quick thank you very much and if you're

around thank you so much s and if you're around uh for Regions unite uh I'm doing that Workshop exactly about this talk but it's two hours Workshop thank you Ura um is does anyone have any questions in the audience here we have a few minutes uh hi there um is it common to see more of a mobile first approach nowadays um as opposed to you know starting with so cuz you know there um obviously it depends on the on the

context of the product or the service uh but nowadays I mean I'm assume a lot more people users view websites through the mobile so when it comes to the ux UI um stage um do generally people start with mobile and then move on to desktop or because commonly I see it start with desktop website first and then move on to the responsive side um in your experience which do you um start off with first it usually based on the audience so let's say um developer I mean if you're developer and just going to jump into the docks you

rarely would be jumping into the docks from your phone right you need to have it on the laptop so the first would be desktop approach for this page like what's the next destination how they will get from the page you currently here to the next if the next destination is an application which is mobile obviously the mobile first will be the first uh but with this one that's a pretty simple structure so as you saw there all the blocks is just one click and figma can make you mobile layout right away without any work thank you uh what's to take on um

choosing between maybe going for a more Unique Look for the docs or using something that's maybe more established in the ecosystem for example basing a template on docusaurus and having like a more tried and tested uh user interface versus something that maybe pops out more as more unique to your brand so I will not answer this question because it relates to the do organization itself and um there is uh which is a product so there are special designers who actually work with developers in their experience of development and rearranging this documentation so I cannot answer this question because I'm on another loop I'm like I'm bringing

developers to your docks and then if you're a developer like if you're a designer then it will be your job to keep them you know um is there any further questions um sorry and at what stage would you conduct like for example AB testing um for the for the website or the service um and what kind of key points to look out for when doing ab tests and such well for example that were to put the resources not the apps

created with the uh documentation where to put that would be a perfect moment for AB testing and um yeah so and see what actually works better because um there's also like sales involved and especially if you targeting like bigger companies so uh trying to use it in the bigger corporations uh and there is like software architect involved who is making decisions on all this stuff uh that's very important moment and also like the loan Journey uh especially when you launch hackaton which is a temporary part of the um page itself so one hakon is out it just like section is out uh that also

might be a good ab testing but this will work for the next campaigns let's say uh you're launching hackaton right now you don't know where to put this I wouldn't know where to put for example for very special audiences every develop there's uh people behav in in different ways you know even even the we3 space Dev space they behave in different ways so um launch ab and then you will have a data for the next hecaton but then when putting it for the next Heaton a new updated section then you will know where to actually put it hi thanks for the call uh for the talk um do you have any favorite uh

teams that you use as reference any teams that uh come to mind that do this really well H who uses very well I will hold myself from this but we can chat about this because they're streaming and I don't want to sound like very promotional for particular projects okay thanks but we can talk about this later I have a list um is there any further questions if not thank you so much for the great presentation and please a round of

applause