{"id":5702,"date":"2019-08-19T12:26:00","date_gmt":"2019-08-19T10:26:00","guid":{"rendered":"https:\/\/bildtest25.wpenginepowered.com\/projects\/nilex-website\/"},"modified":"2021-08-23T12:57:43","modified_gmt":"2021-08-23T10:57:43","slug":"website-nilex","status":"publish","type":"project","link":"https:\/\/www.bild-studio.com\/en\/projects\/website-nilex\/","title":{"rendered":"Nilex Website"},"content":{"rendered":"\n<h1 class=\"text-center wp-block-heading\">Nilex Website<\/h1>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"663\" src=\"https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-1-1024x663.jpg\" alt=\"\" class=\"wp-image-5691\" srcset=\"https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-1-1024x663.jpg 1024w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-1-300x194.jpg 300w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-1-768x497.jpg 768w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-1.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h1 class=\"text-center wp-block-heading\"><em><u><em><u>Ready<\/u><\/em><\/u><\/em><\/h1>\n\n\n\n<p>The first stage was to come up with completely outstanding and unique web experience. We had a tough task: to incorporate a visual solution which is both user friendly and product explanatory.<\/p>\n\n\n\n<p><strong><u><strong>A challenge?&nbsp;<\/strong><\/u><\/strong><\/p>\n\n\n\n<p><strong><u>Statistics<\/u><\/strong>&nbsp;&#8211; the first thing our UX team started from. Research, research, more research and then&nbsp;<strong>research analysis<\/strong>.<br>Extensive research led us to conceive the concept which we then ambitiously embraced. With the help of&nbsp;<a href=\"https:\/\/www.hotjar.com\/\">Hotjar<\/a>, we identified the most relevant information and got the impression of the most viewed content on the website, for which we knew it had to be the highlight of the online presentation. During this phase, we defined our target audience.<\/p>\n\n\n\n<p>We tested solution first and then designed every piece of an overall experience.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-2-1024x819.jpg\" alt=\"\" class=\"wp-image-5693\" width=\"1028\" height=\"822\" srcset=\"https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-2-1024x819.jpg 1024w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-2-300x240.jpg 300w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-2-768x614.jpg 768w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-2.jpg 1200w\" sizes=\"auto, (max-width: 1028px) 100vw, 1028px\" \/><\/figure>\n\n\n\n<h1 class=\"text-center wp-block-heading\"><em><u><strong><em><u><strong>And Go<\/strong><\/u><\/em><\/strong><\/u><\/em><\/h1>\n\n\n\n<p><strong><em><u><strong><em><u>UX design and information architecture<\/u><\/em><\/strong><\/u><\/em><\/strong><\/p>\n\n\n\n<p>The need for substantial improvement, unification, and a complete redesign in order to achieve an optimal&nbsp;<strong>user-friendly experience.<\/strong><\/p>\n\n\n\n<p>We used&nbsp;<strong>paper prototyping technique<\/strong>&nbsp;for the more complex pages. To put it simply, this method involves creating rough drawings of an interface which are used as a base for brainstorming and quick evaluation of multiple versions of complex pages. Information architecture has been changed and improved several times during high fidelity prototyping phase.<\/p>\n\n\n\n<p>Prototyping was pure enjoyment with a&nbsp;<a href=\"https:\/\/www.justinmind.com\/\">Justinmind<\/a>&nbsp;tool which enables the creation of fully interactive low to high fidelity prototyping.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1003\" height=\"1024\" src=\"https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-3-1003x1024.jpg\" alt=\"\" class=\"wp-image-5695\" srcset=\"https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-3-1003x1024.jpg 1003w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-3-294x300.jpg 294w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-3-768x784.jpg 768w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-3.jpg 1200w\" sizes=\"auto, (max-width: 1003px) 100vw, 1003px\" \/><\/figure>\n\n\n\n<p>Considering the site is rich in different types of pages, the imperative was to create an intuitive navigation system to smoothly guide users through the entire website.<\/p>\n\n\n\n<p><strong>UX team<\/strong>&nbsp;provided users with the opportunity to feel as free as they can be while exploring the whole sitemap. What we had in mind is a large group of users that will land on the website for the first time, so we made ourselves a task: to add additional impulse that will inspire people to engage, explore and search further through the benefits of this software.<\/p>\n\n\n\n<p>So, the next chapter was to visually enhance the&nbsp;<strong>UX prototype<\/strong>&nbsp;and plan advanced interactions through&nbsp;<strong>UI design<\/strong>&nbsp;phase.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"863\" src=\"https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-4-1024x863.jpg\" alt=\"\" class=\"wp-image-5697\" srcset=\"https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-4-1024x863.jpg 1024w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-4-300x253.jpg 300w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-4-768x647.jpg 768w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-4.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>UI design<\/strong>&nbsp;&#8211; Our UI team had an assignment to redesign the overall framework. So, we put it this way: innovative, interactive and essential. We imagined a visually superior website. All the elements were carefully selected to incite an extraordinary experience and interaction.<\/p>\n\n\n\n<p>We practically remade the old website, creating totally fluid interactive environment for all users. Result: Creative minds of our designers came up with a simple layout.<\/p>\n\n\n\n<p>Before setting out a full content, to tease our target audience, we decided to focus on a presentation video on a customer based explanation of a software, and put it in the foreground on home page. The video which was followed by brilliant user reactions, who said that we managed to explain all the features of the software in just a minute and a half, was the perfect starting point for users who wanted to learn more about the Nilex software.<\/p>\n\n\n\n<p><strong>Mobile version<\/strong>&nbsp;&#8211; To develop a site you can scroll through with the top of your thumb? This was the special treat for our team. The full experience fits into 4-5 inch screens. Something in step with the time, which had only one, but crucial purpose: to communicate professionalism and simplicity.<\/p>\n\n\n\n<p>Although the change of existing paradigms took a lot of time, the team was so eager to readapt this part. Site building from the ground to the top, combined with the redefinition of navigation that will satisfy the user on every platform.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em><em>If you wonder what the secret is, the answer is: persistence,&nbsp;<\/em><\/em><\/p><p><em><em>persistence, and in the end, some more persistence. :)<\/em><\/em><\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"1024\" src=\"https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-5-500x1024.jpg\" alt=\"\" class=\"wp-image-5699\" srcset=\"https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-5-500x1024.jpg 500w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-5-147x300.jpg 147w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-5-768x1572.jpg 768w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-5-750x1536.jpg 750w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-5-1000x2048.jpg 1000w, https:\/\/www.bild-studio.com\/wp-content\/uploads\/2021\/08\/nilex-software-5.jpg 1200w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<h1 class=\"text-center wp-block-heading\"><strong><em><u><strong><em><u>Results<\/u><\/em><\/strong><\/u><\/em><\/strong><\/h1>\n\n\n\n<p>The site saw the light of a day and shines in all its glory.&nbsp;<br>Built-in Google and&nbsp;Hotjar analytics&nbsp;codes, it provides access to a detail information on how users see the whole thing packed together.<br>Based on analysis of visits and results, we are working on redesign and adaptation to the users&#8217; needs, since we are guided by User-centered design.<\/p>\n\n\n\n<p>We let&nbsp;<a href=\"https:\/\/www.nilex.se\/en\"><strong>this unique visual solution<\/strong><\/a><strong>&nbsp;<\/strong>speak for itself.<\/p>\n\n\n\n<h1 class=\"text-center wp-block-heading\"><strong><em><u><strong><em><u>And that&#8217;s not all<\/u><\/em><\/strong><br><\/u><\/em><\/strong><\/h1>\n\n\n\n<p>To give you a hint what you can do with this software, check out the short presentation video we made for the occasion of new version release.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Nilex - Manage relations in the digital age\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/OIbNV5XoPgA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div><\/div>\n","protected":false},"featured_media":5744,"menu_order":0,"template":"","project_categories":[27],"class_list":["post-5702","project","type-project","status-publish","has-post-thumbnail","hentry","project_categories-product-development"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bild-studio.com\/en\/wp-json\/wp\/v2\/project\/5702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bild-studio.com\/en\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/www.bild-studio.com\/en\/wp-json\/wp\/v2\/types\/project"}],"version-history":[{"count":0,"href":"https:\/\/www.bild-studio.com\/en\/wp-json\/wp\/v2\/project\/5702\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bild-studio.com\/en\/wp-json\/wp\/v2\/media\/5744"}],"wp:attachment":[{"href":"https:\/\/www.bild-studio.com\/en\/wp-json\/wp\/v2\/media?parent=5702"}],"wp:term":[{"taxonomy":"project_categories","embeddable":true,"href":"https:\/\/www.bild-studio.com\/en\/wp-json\/wp\/v2\/project_categories?post=5702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}