Improving Website Usability and Front-End Design
The design process of user interaction and user experience (UI/UX), a fundamental role in any company’s marketing strategy, is often overlooked by many users, yet requires a myriad of user data and research to perfect- a truly hidden form of art. Google’s effective simplicity, Youtube’s geometric interactivity, even Instagram’s one-fingered ubiquity are unique UI experiences well-known to the modern internet user. This hidden layer of interaction between the user and the developer is required to effectively communicate ideas and information. At Allosense, we understand that the idea of sensors, asset trackers, and IoT (Internet of Things) is not common knowledge, so our website user experience is tailored towards helping users and potential clients gain insight into Allosense’s mission and purpose. UI/UX play a vital role in helping audiences understand who a company is and what it offers. This article discusses fundamentals of design with user data, approaches to creating user interfaces, and resources for building websites.
A typical design process includes conducting user research, building client personas, creating information architecture, and then drafting wireframes and prototypes. For example, one of the client personas at Allosense could be an individual in the oil and gas industry who wants an efficient process for managing and tracking high value assets. Allosense’s IoT tracking technology will be displayed on a GUI (graphical user interface) for users to interact with to manage their assets, therefore understanding clients’ needs and wants is a critical part of developing the information architecture and, ultimately, a user-friendly application.
However, before tackling a company feature like Allosense’s map page, every company should have a marketing website that clearly shows users what it’s services are. Wireframes should reflect the insights gained from compiling the user research and client personas. Wireframes serve as a basic visual of what components need to be on the front-end of a website. They can be hand-drawn or created digitally.
There are two types of wireframes: low-fidelity and high-fidelity. The examples above are low-fidelity because they are the skeleton / basic sketch of the front-end design. Always start with a low-fidelity wireframe first to finalize the necessary components before designing high-fidelity wireframes.
Some of the most popular design tools for creating digital wireframes — and ultimately prototypes — are Figma, Sketch, and Adobe XD. These are all vector graphics editors and used for user experience and user interface design in websites and mobile applications. Figma and Sketch are more efficient to use if the design team consists of multiple people. Both tools allow real-time collaboration and sharing across its website and desktop application. Adobe XD does not have a collaboration feature at the moment. Figma has free versions, whereas Sketch has a 30 day free trial period. However, Adobe XD is completely free to use. If you choose to pay for either Figma or Sketch, the former has a monthly tiered payment plan and the latter has a one-time payment of $99. Each software has an active community with tutorials and open forums for any skill level. Overall, each software has similar basic features needed to create wireframes and prototypes, but the differences lay within each tools’ target audience. Figma is great for developers because it has custom code integration, whereas Adobe XD is favored amongst designers because of its easy prototype-making features. Below are some high-fidelity wireframes I made using Figma.
There are a plethora of examples to draw inspiration from, but the question is determining which ones. When searching for examples, you should have a clear idea of what theme and aesthetic you are striving for. This will make finding the right inspiration much faster, rather than having to sift through numerous example websites. Once the design components and features are finalized with the high-fidelity wireframes, the next step is to choose a website host and builder. There are numerous options to choose from, whether it be coding it from scratch or using website builders. These choices depend on various factors including, but not limited to, time-constraint, budget, and team composition. If your design team already has a full-stack or front-end developer, then coding a website from scratch is the cheapest but the most time consuming option. However, outsourcing an independent or freelance web developer could be more or less expensive than paying for a website building tool. Meet with your design team to determine what factors are most important before deciding on what resources to use.
More and more resources are populating the internet with tools for coders and non-coders alike to build beautiful websites easily. The most popular platforms for building websites are Wordpress, Webflow, and Adobe Dreamweaver. Wordpress is a free and open-source website builder and host. You can design your website using its free or premium templates or page builders like Divi or Elementor. Both are visual builders and include pre-built templates. Divi comes as a Wordpress plugin or theme whereas Elementor is solely a Wordpress plugin. Divi is known for its clean user interface, but both are fairly easy to use. However, there is general consensus that Elementor is easier to learn than Divi. For those with a smaller budget, Elementor is a cheaper option because it has a free and paid version. In addition, if you intend to only build one website, then Elementor Pro is cheaper, but Divi is cheaper for building multiple websites. Each page builder has its own unique feature. Divi can conduct A/B testing using Divi Leads, which allows you to see which variations of your website perform better amongst your target audience. Divi Leads translates the user data into charts, percentages, and graphs. Elementor Pro can create dynamic content. Dynamic content changes the web content based on user data and creates a more personalized website for users. For example, the user’s name will be displayed on the navigation bar once he/she is signed up or logged in.
Similar to Wordpress, Webflow also provides website building and hosting, but includes its own visual editor. It is also known for its seamless and easy-to-apply website interactions and animations. A very neat feature of Webflow is its translation from design to code. This feature is great for teams that consist of designers and developers, which allow them to collaborate more easily. Adobe Dreamweaver is solely a website builder and requires an outside service to host your website. Dreamweaver allows users to view their designs live. However, Dreamweaver appears to market itself towards developers and / or professionals. There is a code editor and it has a more intimidating UI as opposed to Wordpress and Webflow’s simple interface. One limitation is that it is not a standalone product like the latter two. If you already have an Adobe Creative Cloud license, then Dreamweaver may be the easiest option, but otherwise not.
Now the hardest part begins: matching functionality to design. One of the hardest aspects of design can be understanding that the user comes first. A good website design is like a story and the user is the protagonist. Such a vast amount of customer information and preferences is useful in creating a big picture. A helpful mindset to have when designing is to ensure that users can easily navigate your website. Conduct meetings with your design team to ensure that users’ needs are met by compiling customer interviews and mapping out all the components clients prefer on a website. This information can be used to help build something that can be used by many or flexible to the user’s needs / wants. As the adage goes, “beauty is in the eye of the beholder, so worry less about appearance and more on usability. A good design is not only aesthetically pleasing, but also easy to navigate. Designers are different from artists. Artists can create masterpieces solely for themselves, but designers must consider the user when creating their own masterpiece. There are many types of good design, but it may not necessarily be what you need for your mainstream application / your target audience. In addition, having meetings with your team is an integral part of choosing a user flow experience that generally fits everyone’s basic criteria.
Templates are a great resource to quickly get a website up and running, because you do not need to create a layout and code from scratch. Startups such as Allosense tend to move at a quicker pace, so using a template was the perfect option. Although templates appear to take away from the creative process and authenticity of designing a website, many professionals web developers and designers actually use them! Every website has a unique purpose and audience, so what may begin as a generic template turns into an authentic design. In addition, having examples of other websites to emulate from, helps make selecting a template quicker. When looking for examples, find other company websites that are similar to yours. For example, some websites that Allosense draws inspiration from are the SpaceX, Apple, and Red6ar websites. All of these websites / companies involve technology and have the same modern and simple design that Allosense is looking to emulate. Performing example research can help you gain ideas and insight on what to put on your website, such as animations and layout. One thing to keep in mind when designing is that there are many types of good design; however, it may not necessarily be what you need for your mainstream product / for your audience. While one individual may enjoy pink accents in their design, that may not correlate to the brand guide of a particular product or company theme and may not be the ideal to apply to the website.
Meetings are an integral part in building relationships with your client and coworkers. You can gain valuable insight into the clients’ needs / wants and your company’s expectations. Every design decision is formed from a collaborative effort. Creating wireframes, deciding on a website platform, performing example research, and finalizing your website all require the ability to effectively communicate ideas to your team. Improving website usability and front-end design allowed us at Allosense to coherently and clearly communicate our marketing strategy. Our technology page explains the role of each tracker we produce, which serves as an example of what IoT sensors can do for those unfamiliar with that concept. A company website is just one aspect of an entire marketing plan, but it serves a crucial role to effectively communicate your company’s ideas and information to users.
