Design, Technical Consulting, Web Development 3B Digital Design, Technical Consulting, Web Development 3B Digital

User Experience Design

User experience design is the practice of improving the usability, enjoyment and interactions with a product or service. Through designing products with user interaction in mind we can provide meaningful, relevant and pleasurable user experiences. Happy customers will spend more of their hard earned cash with you.

UX Design

Through designing products with user interaction in mind we can provide meaningful, relevant and pleasurable user experiences. Happy users of your product or service may become paying customers, and happy customers will spend more of their hard earned cash with you.

UX design is an investment in the integrity of your product, the value of which is often underestimated.

User experience design.jpg

User Experience (UX) Definition

User experience design is the practice of improving the usability, enjoyment and interactions with a product or service.

The aim is to improve user satisfaction, by tweaking branding, design, functions and interface.

UX design focuses on understanding users at a deep level including what they need and what they value.

UX Research

Competitive Analysis

How do others solve similar customer needs. Understanding the fundamental design decisions your competitors have made allows you to leapfrog their research and work on the next UX innovations in your industry. By understanding the market context of your product, you’ll be well prepared for every other step in your UX journey.

Data analysis

If this is a brand new product then you may not have all the useful data you need.

If this is an iteration of an existing product, then look at your user conversion journey (funnels), any analytical data on clicks, behaviour, bounce rate, page views, page speed performances etc.

The more data you have to inform your next stage of UX design thinking, the less you’ll need to rely on your gut, and the better your end result will be.

User feedback

Speak to the people who take care of the customers of your product! Curate new or find old surveys or videos, what does your customer say? What do they want? Check your online reviews, emails and complaints from customers, tweets and private messages. Every message with feedback could be your ticket to a new and improved product!

Planning your ux project

User stories

Have you created personas? Imagine who your end users are, are they school children, teachers, young professionals, builders or business owners? Put yourself in the shoes of your target audience(s) and write down their ‘user stories’. How would THEY want to use your product to fulfil their needs in-line with their values?

User flows

Create your user's flow based on the persona-based ‘user stories’ you created. These will form the basis of your testing when you get to wireframing user interactions.

On top of general user flows like resetting passwords, uploading profile pictures, or navigating your website via a menu, consider the hard hitting ones. We call these core user journeys.

Core user journeys dictate the minimum version of product which will satisfy the most people most of the time. Everything else is a lesser priority. Thinking like this enables ‘lean’ or ‘agile’ software development as the top priority tasks get completed first as soon as the project kicks off. You then have a ‘working’ product ASAP.

An example of this is a shop. You could design the most beautiful website for picking and choosing products but if users can’t pay, then your website is worthless.

Imagining your product (visual ux)

Brainstorms & sketches

It shouldn’t all be in your head. Get a room full of people, a few beers (which make people more creative), instil the idea that ‘no idea is a bad idea’ and get various sketches of various pages and user flows. This chaotic creative session could bring about a unique idea paramount to developing your competitive advantage in a market.

Wireframe

It’s time to get serious.

Create crude versions of pages on top of your user flows. Imagine how they’ll navigate from one to the other, and ensure your wireframe takes that journey into account.

If any stakeholders have strange requests for the designs, this is where you can portray the impact of their input, for better or for worse.

This is best done on paper until you learn what you need from prototypes (see below)

Prototype

What would you expect to happen with each element on hover, or on click? Would this be the same on mobile? Start with paper prototypes based on your wireframes and iterate until you’re happy. Pencil sketches will quickly encourage new wireframes to be drawn up, which then enables you to get people to test your latest ideas.

Develop these ideas with the feedback of your colleagues and friends until you have a digital representation of your best prototype, ready for high touch work.

Don’t let your prototypes be wholly biased by your own experiences and background. Get feedback from as many others from as many backgrounds as possible. This will result in an inclusive product, accessible to all.

Accessibility

How will your prototypes work on small, super-wide or super-tall screens? Is it worth revising how elements are displayed on your prototypes?

technical requirements

Information Architecture (IA)

So you’ve got your prototypes all drawn up. You understand your users, the different types of pages and the data they hold, and how people will arrive on your website.

It’s time to organise navigation and content. This is not a fun task, but it will inform the development of your product through to fruition. Knowing how to structure your content early on can ensure that your needs as a business are fulfilled, alongside those of your customers. It needs to be cost effective for you to manage your product data, which requires a thorough understanding of data structure and subsequent maintenance needs.

Creating your user experience

Elements of your user interface

If build cost is at all a consideration here (where isn’t it!?) then your prototypes should reuse elements across pages. Establish style guidelines for image sizes, aspect ratios, buttons and icons, paragraph widths, menu and logo placement. Don’t fret. Just comb your prototypes for similar elements and check how they’ve been wireframed. Consider how they could be tweaked ever so slightly to save on build cost.

Gestures

Although these should have been considered and noted in the prototyping stage, think through how your product could use typical mobile phone gestures e.g. swipe, pinch zoom and rotate.

instant user feedback

Page loading? Show them a loader rather than nothing.

Errors? Tell them what the user's error is. If it's your fault then you should say that!

Finalise designs

Populate your prototypes

Get some real content in there (not lorem ipsum!). Show imagery, icons and fonts as you’d imagine them to be for the final product.

Finalise layout

Come on now, it has taken a while to get here, but you’re seeing fonts, colours, images and icons exactly as you imagined.

You can now re-prototype without relying on your imagination! If something doesn’t feel slick, or could be improved, now is the time to say something.

Delighted?

Does your brand feel consistent across all pages? Is your value proposition well conveyed, and quickly? What could improve this? Obsessing over the details makes ‘good enough’ look like crap. Let’s make this user experience beautiful.

Happy? Then let’s build this!

Read More
Design, Technical Consulting, Web Development 3B Digital Design, Technical Consulting, Web Development 3B Digital

Prototyping

Prototypes are often drawn on paper, or digitally using design software such as sketch or invision. They are created in order to test a concept or process, with the intention of learning from it and improving the end result. Find out how we can prototype for your project in an agile manner today!

What is prototyping?

Prototyping involves crudely building out an idea until you can imagine using it. Prototypes are often drawn on paper, or digitally using design software such as sketch or invision. They are created in order to test a concept or process, with the intention of learning from it and improving the end result.

The way in which you prototype will depend on your industry.

Steve Jobs famously prototyped the iPad by drawing on plank of wood, which he would take home with him, and pretend to use for various tasks. Some credit this practice with the creation of the touch-screen gestures we all take for granted today.

prototyping for designers and software development.JPG

Prototyping for designers

Prototyping is an integral part of user experience and design thinking, yet many designers skip this step and instead rely on gut instinct. We don’t.

We can demonstrate how to prototype your digital products in an agile capacity, so you can click between wireframes which haven’t been coded, and test your assumptions.

There are many tools which can help with prototyping digital products, from standalone apps (mostly on Mac) to web creation tools (such as Balsamiq).

When your digital product or website has been brought to life with our prototype, you’ll be able to test the practicality of your current design. Once tested, we guarantee you’ll have some ideas and changes to consider, and it’s best these are brought up before you’re paying for development work.

Get in touch with us today and we’ll being prototyping your next app, website or product today.

Prototyping for software development

Prototyping is an integral part of system design for software and website development. By creating an approximate version of the imagined end product early on, important discussion points can be identified with the product owner, and a clear roadmap created.

Discussing these points as early as possible in a project can save on total effort expenditure through the reduction of change requests, and a more finely tuned product.

Prototyping also allows us to provide more accurate estimates of overall development costs, alongside the skills, timescale and resource requirements your project might have.

We combine our prototyping with software development work on an agile basis. Call us today to discuss your design requirements and we’ll hop to it.

Read More
Design Alex Bremer Design Alex Bremer

Squarespace / Brochure sites

Our lead developer Jordan brought Squarespace to our attention – a beautifully configured (but thankfully not hugely configurable) cloud-based CMS that has proved revelatory to both us as well as the many clients already benefiting from it.

Whether we like it or not the simple fact is that no one Content Management System (CMS) fits every conceivable client requirement, but nevertheless the vast majority of those available – off-the-shelf or Open Source – are loaded with far more functionality than most clients are ever likely to need.

This of course adds bloat to both the project lifecycle and cost and so for a long time 3B were actively looking for a simple, elegant, rapid-fire and cost-effective CMS that we could exploit for the many instances where enterprise level platforms were just not appropriate.

What we needed was a beautiful & lean CMS upon which we could deliver “brochure sites” quickly & cost effectively.

Our lead developer brought Squarespace to our attention – a beautifully configured (but thankfully not hugely configurable) cloud-based CMS that has proved revelatory to both us as well as the many clients already benefiting from it.

Squarespace main features are:

  • It is extremely reasonably priced, and the relationship between the client and the technology can be, once the design / build project is complete, direct. This saves costs (in terms of any mark-up we might have added to paying maintenance fees) as well as meaning that a client can easily take their site and “run for the hills” if they don’t wish to be tied to an agency service contract.

  • Delivering a Squarespace site requires very little / no involvement from our Development Team; with the odd exception when we might need a code snippet from the Dev Team these sites are pretty much left to the Design Department to design, build & deliver. This means that in most cases we can jump on a project immediately and deliver new websites often within days.

  • The sites are immediately - and beautifully - responsive “out of the box” - again saving enormous development costs.

  • Squarespace offer 24/7 direct support included in the subscription fees.

  • Squarespace has a small but broad range of templates available in their library from which we can always choose the most appropriate “look & feel” with very little adjustment from us - again saving huge design and development costs.

  • Squarespace sites are perfectly optimised for SEO and we have an established list of Best Practice tasks that we carry out with every deployment to make sure that we’ve optimised the site as far as possible pre-launch.

Prospective - and existing - clients who feel that their needs might be best served by any of the points raised above should contact us without delay; there’s a good chance you could have your shiny new site within days!

Our Squarespace work includes:

... as well as the following sites that we've deployed recently using this CMS:

www.aureliaeducation.com

www.sophiemarsham.com

Read More