When start-up bookacourse.com needed a company to design their website and provide expertise in user experience design and information architecture they came to UVd and we took them through a text book responsive web design experience.
The brief
We were asked to turn a web application specification into a user friendly online experience and to do that we used ‘Responsive Design’ principles, developing a clean, intuitive user interface and user experience for customers to access the bookacourse.com services from desktop, laptop, tablet or smartphone.
Case study
The blueprint
The client was a very experienced technology expert, having headed up the technical aspects of several multi-million pound start-ups. He had assembled a Java development team in Pakistan and completed a thorough application specification: all website functionality was exposed via webservices. He was also very clear in what they needed: they had limited expertise of information architecture, user experience and user interface design and we needed to help them turn their complex back-end application into a user friendly experience for their customers.
UI/UX/Information architecture
We spent several meetings with the client discussing the user journeys of the user types acting within the system (such as users adding requirements, searching and booking courses, suppliers adding courses and administrators administering the system). We discussed requirements and ideas around information hierarchy and spent a great deal of time discussing different ways users could search and easily access course information.
We then set about wireframing the key pages and user journeys and prototyping any unique and non-standard interface elements / interactions in Axure: this process enables early user acceptance testing (UAT) to be performed so as to avoid unnecessary cycles during the design stage.
Following a face-to-face review and the resultant tweaking, we had sign off on a complete set of wireframes detailing the user interface, user experience, and information architecture including prototyping for the complex user interactions that had been through a round of UAT.
Branding and design
Once we had a complete set of wireframes and prototypes signed off by the client we were ready to make things look good. In this instance, the client also supplied a logo and some offline marketing material so first things first we produced a provisional set of design variations for the homepage outlining the general look and feel for the website. During a client feedback process we were then able tweak and hone down to one specific design which was then ready to be extrapolated across the key templates we had identified at the start of the process: we don’t usually design every page on a site because most will have a consistent way of displaying content so the pages we are concerned with are ones which are unique and need special consideration such as the homepage and others which contain particularly complex data views or UI such as the search and multi-select categorisation page and course supplier dashboard.
Application build
We had the task of the front-end implementation and we’d designed some pretty unique UI/UX the task required a cautious and structured approach, treating it much like a web application using a number of interesting techniques:
- Creation of a style guide used by developers to implement styles throughout the site
- Responsive design: great care was taken to ensure a positive user experience across all devices, especially when using the web application features on tablet and mobiles
- Object oriented (OO) CSS
- SASS – CSS modularity and pre-processing
- Custom jQuery plugin for category selection UI
- Using HTML5 markup with a fallback for non-supportive browsers
