It has been a challenging and mesmerising experience to work upon helpdesk app’s UI Pattern redesign. It was a long process of continuous iterations and killing my babies for approx 3 months. I am Nitish Kumar and UI/UX Designer on the UVdesk board. I was solely responsible for re-curating soothing User Interface along with agile UserExperience for the helpdesk’s user base. The process included working upon wireframes, prototypes, layouts, styleguide, micro interactions and onboardings. I thought it would be great to write a tiny run-through of the entire design collaboration pipeline of app redesign. So, here is the little piece of writing. … I would recommend peeping into Product’s Design Outline first, before going through the article for better understanding. The article highlights following set of design pipeline sections — Overview Agile UI Reinforced UX Mobile First — Responsive Wireframes [Paper and Ink] Layouts [Photoshop] Prototypes [Adobe XD, Slices to HTML, CSS, JS] Styleguide [CSS (LESS preProcessor), JS] Performance on the Peak Micro Interactions [CSS Animations] Onboardings Conclusion Overview UVdesk is a web based helpdesk app which helps users to provide a streamlined support and Knowledgebase/FAQ to their end-customers. UVdesk was initially released in June, 2016. I have re-crafted the entire scenario from the very scratch for more reliable, fast and agile user — app engagement. Agile UI The previous App UI was not scalable enough in terms of agile app UI-Behaviour. UVdesk is a gigantic app with boundless features. While rethinking the entire User Interface for UVdesk, I believed in “Content is King” methodology. Henceforth, I curated an extensible User Interface which can act as an empty container for endless forthcoming releases and features. I had modular alike approach while designing the User Interface. I decided to create a Fluid Interface, killing the previous Fixed Width Interface to utilise every other pixel of the user’s device screen. Reinforced UX I refactored the different set of features for maximum possible ease and usability. A user should have a continuous rhythm for the different actions. It not only makes the app learnable but also helps users to take the advantage of the app in a more efficient and productive manner. I simplified the rhythm of the app so that every product action or feature should be easily found with naked eyes without any hindrance or barriers at maximum possible stages. Mobile First — Responsive Today, more than 80% of users who surfs the Internet, owns a smartphone. So, How we can get them lost in the unknown? I stuck to Mobile first approach for the more accessible and Omni experience for the different set of portable devices. Wireframes [Paper and Ink] Wireframes are the basic scaffolded foundation of the entire app flow and system. I chose paper and ink over the digital canvas and brainstormed under the niche with the developers and marketers to squeeze out the bugs and wound the app flaws with the most appropriate approach. I scribbled almost 100+ paper wireframes to get the system’s most stable and improved skeleton. The main concept behind powerful wireframing was to deliver a simple to use app (aimed without the doc) for a different set of vertical industries ranging from a self-managing Freelancer to an eCommerce giant. Layouts [Photoshop] I Photoshopped almost 150+ mock layouts to refurbish the complete app scenario. It was a quite long process with continuous baby killing to create a highly nimble and simple to use system. UVdesk have three discrete UI sections which includes — Admin Panel A dashboard panel where an admin/owner manages agents, customers, reports, company settings and other doable data. Customer Panel A panel where customer can request support related queries and get a complete list of previous generated support requests. Knowledgebase/FAQ Knowledgebase is a robust form of complex data which helps users to help themselves, and reduces the number of support queries. Different layouts have been designed for the Knowledge base lead page, so that user can choose a very appropriate layout as per as his needs. A Product should deliver a homely customisation to the users and so does the UVdesk. Layouts were designed in such a way so that they can be morphed into brand colors or needs of any organisation anytime. Prototypes [Adobe XD, Slices to HTML, CSS, JS] Adobe XD have been used for interactive design patterns and making a better app flow for UVdesk. Once I was over with Adobe XD and Static Layout Design. I turned layouts into full-fledged Hi-Fi (High Fidelity)Prototyping model with Photoshop Slices [SVGs in particular], HTML and CSS; peppered with a bit of Javascript. May be this can sound a bit obscure— a designer writing codes, but the reason behind making such a bold move was to meet the working model to the closest of what was actually planned in terms of usability and design. Styleguide [CSS (LESS preProcessor), JS] I was creating a User Interface for a system which has uncountable features and numerous UI Sections. It was quite impossible to create a Hi-Fi HTML/CSS Prototype for every other app section. So I created a basic Styleguide so that a few of minor or twin appearing UIs can be cloned easily by the developers themselves. I preferred LESS preProcessor to write styles for Hi-Fi Prototypes. The main reasons behind choosing the LESS preProcessor instead of writing plain CSS was — Code Scalability UVdesk has a lot of UIs with complex and even critical information architecture. CSS would have been a big mess, as the finally compiled CSS file from LESS shows upto the line no. 5000 and it would have resulted in a heck for upcoming minor UI upgrades. I utilised Gulp build tool and set of threaded tasks like browser-sync, clean-css and gulp-less to stay on the top of productivity. Performance on the Peak SVG over Raster Formats I used SVG over raster formats like jpeg or png to deliver a more delightful experience to the users. SVG’s are vector and they never gives up the quality, not even with Apple’s smart zoom. Another reason to choose SVG was User’s brand customisation as it is quite easy to morph and manipulate the SVGs into custom brand colors. SVG Sprites Every image or a resource file is an http request to the server and utilises a good amount of server’s ram and performance. UVdesk have countless icons and images so it was the necessity to turn them into a single SVG sprite. I believed in low requests and high performance belief and merged maximum possible images into single SVG file for faster UI performance. No to GIFS, Yes to Performance I abandoned the use of GIFs as they are heck to performance and are only capable of offering upto 256 colors which causes jagged edges and heavy grains and are comparatively larger in file size. Micro Interactions Motion makes sense — I have focused on the different set of subtle animations and transitions to create a follow through supporting the user’s action. I created Micro Interactions using the CSS Keyframe Animations and Transitions. Onboardings I curated a set of onboarding experiences for different user panels like for admin, agent and the customers. It helps users to understand the perks of app easily and get things done in a more efficient way with a delightful experience. Conclusion Reforming a static appearing app into agile behaving system was the key and the system now looks more usable and serves a more delightful experience to the users. A modular approach towards the UIs made it quite simple for upcoming releases, as they will now fit into the moulds very easily. Hope you enjoyed the passage. You can check out the design exhibit to have a close insight of Iconography, Swatches and Interfaces of the UVdesk App re-design. … Feel free to check out UVdesk App in the live action. Please do share your opinions and thoughts, looking forward to your response. Thank you! Have a good day 🙂 Tag(s) product design product pipeline redesign ui ui design user interface ux Category(s) Design UVdesk