ABiT Build Codes

# ABiT Build Codes ##### These are the principles that guide the product design and development process for all ABiT Network products. It also contains links to all product documentation. --- ### Overview ___ ABiT Network products are geared towards the common man and this means everyday people. This means that there is a lot of processes that would go into the process of building all our products. Tatcoin is at the center of all our products and we have to ensure that things are going to function with ease. A lot of our userbase is coming into contact with Cryptocurrency for the first time. We have a huge task of ensuring that all our products are easy to use and meet user needs --- ### Important Product Design and Development Rules. ____ **Responsiveness**: The focus when it comes to responsiveness for hinges on many factors. There is a segment of our userbase that would want to Interact with our Apps via the web only. They may not want to install the mobile app for one reason or another. a) Fluid layout: All content must be visible and accessible on any device irrespective of size (Mobile, Tablet, or Web). The use of grids and columns should ensure that this is implemented appropriately. b) Breakpoints: Identify when to change your structure and how it will look. The focus here should be mainly on Ultra-wide, Desktop, tablet. c) Typography: The size of the text on each device size matters. Headings need to be scaled. (an H1 should not be the same size on Desktop and Mobile). d) Selection Area: This is simply an area on the app where a user has to make a selection, it can be a button or text. The selection area would change based on device size. Mobile devices can offer a larger space to select a button or text field. Desktop devices have a mouse in use so selection accuracy is higher. e) Scalability: this involves minimizing content and adding it to the right screen size. Keep content as minimal and visual as possible on the mobile view. --- **Typography**: The choice of text goes a long way in determining the tone, style, focus, and structure of a page. Typography is as important as color and other visual choices. a) Font Combination: the way the different font choices work together needs to be put into consideration. For consistency sake, a clear matrix for font choices needs to be established. The one for headings and that for body text. b) Line Alignment and height: this involves the direction that your text sits and for how long it sits. 50-60 character length for desktop is best. While a 30-40 character length for mobile. c) Scale and Variation: this looks into how each text style differs in size. Headings need to be noticeably larger than body text. The minimum font size at which text is readable needs to be established. d) Contrast and Style: this is the visibility and looks of the text. The color of the text should be checked across accessibility tests. Text Spacing also needs to be put into consideration. --- ### Websites and Apps --- **SSO**: Then SSO serves as a universal point of entry for all our products. It comes with an integrated wallet with added functions like Staking and Escrow of our different platforms. The SSO should have components like account identification (username, Email address, etc) and the password components should meet industry standards. Things like Password strength indicator, password requirements (like characters), and the ability to make Passwords visible needs to be added. A link to reset Password should be made available, followed by and Industry-standard dialog box. **Error Pages (404)**: in the course of navigating our platforms, users can find themselves in an error page. 404 pages should contain things like company logo, explainer text, and link to important pages like homepage, support page, or a search bar that would make it possible for users to look for something. **Contact Us:** The company’s personality and branding need to be added to this page alongside a clear method of contact, be it via chat, mail, or call. the company social media account can be added too. **Onboarding:** this simply involves steps that show a user how an application is used. The best practice for this is to avoid static content and take the user through all the major actions that they would be taking (See Cowrywise).Empty states should be used to instruct users on the actions that they are meant to take. In tasks with multiple sequences like onboarding, ensure that the user has indicators to guide the process.Percentages and time can also be used to indicate the length of tasks. Link to contacting support should be closeby in case users need guidance. **FAQ:** these should contain purposeful information that is proven to provide value to the users when it comes to making decisions about the product. Contact option should be ordered by accessibility, from easiest to the method that takes the most effort. **Blog:** Focus here is on two major things. Content and Marketing. The blog content should consider responsiveness and how content is represented on smaller devices. Text size should be a minimum of 18px to ensure readability.When it comes to marketing blog posts, social sharing needs to be put into consideration. Share buttons need to be fixed on one part on the page, this would allow the user to share the content at any given moment.Email collection would also be highly intentional and enough avenues needs to be added to make it easier for readers to subscribe. --- ### Components ___ **Buttons:** there are certain thing that goes into buttons, consistency in style (fill, ghost, outline or test) and shape(padding, border, radius) and most importantly then Button Copy. Users should be aware of where they are going to and what would happen after they click a button. If a button has a generic copy like okay or cancel, then a label should be included above it to describe the purpose of the button. When it comes to button color, brand colors can be used to emphasize primary and secondary actions. Colors can also be used to indicate mood like save(green) or delete(red). **Text Fields**: Ensure that font size is readable on all devices. Avoid all caps in text labels Faint Placeholder text should be used to give users an idea of what they are required to input. Data format needs to be represented. Text fields should be set to allow the relevant text values that it requires. E.g number pad when entering a phone number. The mobile keyboard should be altered to default to required text inputs. E.g number pad when entering the phone number. The preferred data format should also be hinted with the placeholder text (number or text) **Modals:** Modals needs to be responsive. A popup window should be considered for the mobile, tablet, and desktop views. When it comes to exiting a modal, users should either be able to click outside it to close it or have clear Call To Actions (Close, Cancel) to guide them. Background change when a modal is triggered should be either be blurred, darkened, or lightened. **Navigation**: The most important links need to be at the topmost level, and that deeper link provides value to the niche readers. Ensure that each level of navigation has a different design to differentiate the levels clearer. The user should find it easy to locate other pages. Multiple Call To Actions should be visually structured by level of importance. The most important choice needs to stand out. **Search:** A placeholder text can be used to suggest examples of the things to search for. Quicklinks and Autosuggestions can be used to further guide users. For the submit search button, include a loading icon or feature once the search has been submitted incase there is a connection issue. **Tables:** For the table header, the value of each Column needs to provide structure for the row content. The Header should be fixed so that the user can keep getting context even if they are scrolling. For the roll style, borders and contrasting background colors can be explored to differentiate. Make use of a singular grayscale color for consistency. **Toggles**: A Toggle should be used for On and Off Scenarios and not as a function for two alternative versions of a function. They should be considered for straightforward decisions that have low-risk implications when turning on and Off. For Toggle states, a brand color can be used for the active state so that they can stand out to the user. States should be implemented consistently across the product and inactive states should be kept minimal for further contrast **Tool/Tips**: Instructions should be clear and concise and entirely relevant to what the tool/tip is for.Tools/Tips should also have a contrasting style. An inverse color scheme works best. A Tooltip should activate on hovering or selecting an Icon or text that it is relevant to. Only one ToolTip should be visible at a time. **Loading**: The text should always explain the loading state. Creating Account is a better text than Loading. The Loading state should also be easily seen and not veiled. Icons can also be used to show a clear representation that content is loading or that a change of state is occuring. --- ### Flows --- **Showing an Input Error:** When a user makes an error when it comes to things like input an Email or a Password. There should be a clear explanation whey the error happened and what is required to solve it. Once the user starts typing on the Input Field again, the error message should disappear as they input new values. Input errors require strong visual representation clear communication and state changes. **Resetting Password**: The link to password reset needs to be clear and it should be in an obvious state of clickability (different color or link style underline) A confirmation message should inform Users after they input their mail for reset link that their request has been processed. They should be directed to click the link in their email to proceed. On clicking the page for inputting a new password needs to be shown and after the input a new password they should get a confirmation message and a clear path to the Login Page. **Contacting Support:** Users are bound to run into one problem or another, access to support be easily accessible. Illustrate the response time for the different types of support and state what is required of the user so that they can get the best support. An In-depth FAQ can be put in place and used to answer most of the User’s complaints. --- ### Important Product Development Case Study --- https://growth.design/case-studies/