a bright bold creative web design agency

a bright bold creative web design agency

People ignore design that ignores people. - Frank Chimero Design is not just what it looks like. Design is how it works. - Steve Jobs

JADU SPACECRAFT AN INTRODUCTION TO GOOD DESIGN The moment a customer experiences your organisation, is the moment an emotional connection is made. They need your help, your experience, your products and services. They are your audience. Your users. At Spacecraft, we know the value of brand and the value of user experience. We know the value of messages and the journeys your users take and we work hard to learn the value of your business. Your customers deserve to see the right messages and tasks on a device of their choice. So they can engage with you and start the conversation. Spacecraft passionately design and develop accessible, dynamic and stylish websites through good planning, hard work, honesty and experience. WE LOVE WHAT WE DO. ENTHUSIASM AND EXPERIENCE COUNT AND WE HAVE BAGS OF IT BUT OUR APPROACH IS GOVERNED BY COMMON SENSE. Your website should scale with you as technology and the web evolves over time. We ensure websites scale with each release, through good planning, creativity and responsibility. Whilst there is a surface similarity between print design and web design, Web design is much closer to product or industrial design. Responsible web design means architecture, accessibility, usability, scalability, functionality, content strategy and performance need to be considered as we design and develop digital services. We invest in the future through the technology, standards and design principles we use ensuring your organisation s web presence does too. We love what we do and strive to be better everyday.

WHAT WE DO Taking the guesswork out of design and making the process as informed and intuitive as possible is our goal. We offer a proven, yet flexible process that allows us to work collaboratively and efficiently whilst focusing on your unique needs. Every project is different and each working relationship unique but certain common characteristics are found in all projects. The essential elements to this process are good planning and research along with a thorough design process. This includes getting the right look and feel for your website and making sure the content hierarchy, key messages and calls to action are well structured and clear. It has a job to do and we re here to make sure it does it. The elements listed below will give some insight in what to expect if you work with Spacecraft. It s our job to create the best process for you and your project. Planning and research Before we can start to design and develop your website, we need to understand your organisational objectives, your potential audience and other factors that help establish your vision. We can achieve this using the following techniques: Design questionnaire and feedback. Stakeholder workshops. Scenario development. Statistical analysis of site usage. Design goals documentation. Planning a strategy for content. Getting the look and feel To achieve the right look and feel for your new website, we ll work with you to understand your target audience more and work with your corporate branding and objectives to determine the right path using the following tools: The creation of style tiles, to help develop a design direction. Reviewing established websites to inspire and inform a new look and feel. HTML mock-ups, so you can interact with a design, before development begins. Creating guides for making better landing pages.

Content hierarchy and layout Separate to the look and feel, a good structure and layout is essential for a website. We need to guide your users towards the goals and tasks they expect to complete, whilst organising content to be as intuitive as possible. We can use the following techniques for achieving this: The creation of wireframes, visual guides that represent layout and structure. Establishing content hierarchy. Wireframe prototypes, to test layout and content. First click testing, getting quick user feedback on designs. Sitemaps that display pages in a hierarchical tree. Tree testing, to evaluate the success of a sitemap. Putting it all together The code behind your website is just as important as how it looks, as it needs to be available to the largest possible audience using varying devices to access your content. We do this using a sensible mixture of web standards, responsive design, HTML5 and modern CSS along with a layer of Javascript to enhance experience. With Jadu as a platform, the ways you deliver content, supply services and goods will change and improve over time. The Spacecraft team are dedicated to designing and developing the future with you through good planning, hard work and honesty. Solid thinking and creativity leads to successs.

A BRIEF EXPLANATION ON TECHNIQUE It may help to briefly explain some of the processes we employ and what they achieve for us. These are not limited to or set in stone, as we never stop learning and will create a process and solution to suit your project. The design questionnaire To help capture your vision for the project, we ve created a simple questionnaire. The more information you can give us, the better we ll be able to understand that vision. We recommend you complete this questionnaire as a group so all stakeholders are able to rationalise the vision together, making sure all opinions and ideas are considered. This is key. The responses to this questionnaire will play a part in creating the brief. Style tiles Style tiles are all about the use of typefaces, colours and interface elements that communicate the essence of a visual brand for the web. It s the look-and-feel. They help form a common visual language and provide a catalyst for discussions around your vision for the website by removing the distraction of functionality, hierarchy and layout. Like moodboards for interior design, but focused for the web. Wireframes A wireframe is a conceptual guide that represents the skeletal framework of a web page or application, depicting layout of content, including interface elements and navigation systems. Removing the design aesthetics or look and feel of the design allows us to concentrate on content, key tasks and messages.

HTML Mock-ups We ve worked together to define the conceptual framework and look-and-feel, and possibly a whole new brand. Now we dig into the details of the structure and interaction of the website or application. These are done in HTML and CSS, so you can see the designs in the context of a browser, so you can hover over navigation and links to get a proper feel for how the final product will work. Scenario development Scenarios or user journeys are a method for conceptualising and structuring a website s content and interface. These journeys allow us to shift away from thinking about structure in terms of hierarchies and personalise the process by creating simple stories or scenarios, so we can think about a user s objective and design the journey to successfully achieve it. Scenarios are helpful in planning a content strategy, wireframing, testing plus measuring our success. Stakeholder or design workshops Workshops generally work best at the beginning of the design process, to either collaborate in the wireframe process or sitemap and information hierarchy process. These are creative workshops allowing the group to contribute ideas and solutions. Workshops can be tailored to suit a project and your requirements plus increase true collaberation. Wireframe prototypes Just like wireframes these are visual guides that represent the skeletal framework and layout of a web page and its content with the addition of them being interactive, so we can move from one wireframe to the next. These work well with user scenarios, in designing journeys to a specific task or goal. First click testing First click testing of wireframes or designs allows us to get quick feedback on the success of the design early in the project to help inform our choices, allowing us to test the goal or task oriented objectives we set early on and making sure we re on the right track.

Sitemaps and content hierarchy We can help by either reviewing or helping to create your websites hierarchy or sitemap, which will inform how content is organised and define site structure and navigation paths. We can use a process called card sorting for this, which gives us the insight needed to make informed information architecture decisions. Tree testing Tree testing is to evaluate the success of a sitemap or content hierarchy by evaluating the findability of topics in a website before we begin any interface design. Responsive design Responsive web design is an approach that suggests content and design should respond to a user s environment based on screen size, platform and orientation. As a user switches from laptop to smartphone, the website should automatically switch to accommodate for screen resolution and image size. This is not one additional process to plug-in, but needs factoring into the project from the very beginning. We design and build with responsive in mind as standard, but there is always the option to dedicate more time and development to creating a remarkable responsive experience.

AN INSIGHT INTO THE MANCHESTER CITY COUNCIL PROJECT A responsive and user centred design, beautifully presented and utilising the Jadu platform like never before. Crafted mobile first and with data driven decisions, Spacecraft worked closely with Manchester to produce something truly unique and that s destined to change the face of local government websites. www.manchester.gov.uk Powered by Jadu, handmade by Spacecraft.

1. ANALYSIS & STRATEGY 2. WIREFRAMES & PROTOTYPES A great deal of consideration went into the planning stage of this project, with an emphasis on analytics and content strategy. Once we had a solid strategy in place, wireframes were produced to look at a consitant site structure and hierarchy. A full analytics review of Manchester s old site revealed where it was performing well and where it was under-performing. We helped the client decide upon clear site goals and set out to meet them. From countless initial, rough sketches we set about creating responsive, interactive wireframes that the communicated our ideas for the layout, interactions and structure of the site. SOME KEY FEATURES Fully responsive layouts and interactions Task-oriented iconography and interaction design A Mobile First approach to design and content

3. VISUAL DESIGN 4. CMS IMPLEMENTATION After wireframing and prototyping, we worked closely with Manchester s in-house design studio to design the fundamentals of the site s visuals. Taking cues from Style Tiles produced by the studio, we turned our rough prototypes into finalised responsive HTML mockups. Finally we moved on to implementing these mockups as templates for Manchester s implementation of the Jadu CMS. The technical development produced the completed, content-managed implementation of the new Manchester City Council website. Create a collaborative environment by changing the client/vendor relationship into one of true collaboration - for the duration of a project there are no separate camps, a great website is a product of symbiosis not one of secular, almost arbitrary, decision making. - Scott Riley, The lead User Experience Designer on the Manchester project

Making the design process as informed and as thorough as possible creates great websites and great user experience, which is just good business. And that s what we are all about. Passionate about design, innovation and building a new, bolder and brighter digital experience for you and your customers. So, hire us. Jadu Limited, Universe House, 1 Merus Court, Leicester LE19 1RJ Call: 0116 222 7242 Mail: info@jadu.net www.jadu.net/spacecraft