August 2019 | Mood Up team - software house
female colleagues discussing user interface design

User Interface design – what is it, importance, how to do it and what to avoid

 

Mobile devices are an integral part of our lives today with apps fulfilling diverse needs with a few taps on a screen. These taps, however, are important as it is through these that the user experiences and forms an opinion about your app. Any app development must therefore first focus on design and creating a user interface (UI) that will allow the user to achieve his end goals in as few steps as possible. This UI, in essence, is the link between users and the application, helping users navigate, make decisions and goes a long way towards the success of your product by achieving the below. 

1. Creates a good impression – The first impression of an app is the most important as anything less than the user’s expectations of your app can have it being uninstalled minutes after its download. This is one reason why we seek inspiration from the best performing apps and ensure our UI designs match Android’s Material Design and iOS’s Human Interface Design.

2. Attracts users – Apps with great UIs tend to become a hit with its users and can gain traction fast via reviews on the App/Play store and even word of mouth. Think about how many times Google Maps has helped you find your way. Would you not recommend it to a friend who might be travelling soon?

Highly rated apps are also pushed up in the App/Play store listings and can have you earning more users organically, thereby saving you money in marketing.

3. Cuts on update time and cost – Well-designed applications will have fewer bugs, saving time and costs associated with the introduction of the new version to the market. Not sure if your app needs an update? Find out here.

4. Increases usability and loyalty – A well-designed layout, in which each function has its place, affect the quality and overall user experience of an application. Such apps are adept at not only attracting but also retaining its users.

Google maps carplay
Is a good UI something you’d expect from your navigation software?

But, what makes a great UI?

1. Intuitive and consistent design – the design elements of any great app is consistent and helps the user navigate intuitively. We at Mood Up ensure this consistency in our designs by creating a style guide and using this as the blueprint for all the designs we do. 

2. Clarity – great UI’s tend to be logical, clean and simplistic, without the need for unnecessary elements. A quality user interface is made up of design elements that are necessary so that the user can focus on achieving the outcome the app is promising to deliver. 

3. High responsivity – a great UI should keep up with the demands of its users and be responsive to the input fed from taps and clicks. Failure to do this can create a frustrating experience for the user and garner you a negative review on the App/Play Store.

4. Paying attention to the visual hierarchy – one attribute that is often overlooked but is important to a quality UI is designing your interface so that it allows users to focus on what is important. The contrast between the different sizes, colours and placement of elements should work together to give a clear understanding of the interface and what a user should do. This will, in turn, reduce the complexity of the visuals and make navigation more intuitive.

5. Consistency – screen elements should not appear consistent with each other unless they behave as such. Elements that behave the same, however, should look the same.

Bad volume UI example 3
A great example of what a UI should not be from uxdesign.cc

How to create a great UI?

1. Sketches and mood boards – designers are a creative lot and need to leave the computers aside, do some research and follow it up with some simple sketching to get an understanding of what the end design of the app could look like. The focus here is to ponder on the requirements of the client, the designs of the direct and indirect competition so that the designers can combine their creativity with what is on the market right now.

2. Wireframing – is the term given to the process in which we draw the UX of the app using tools such as Figma or Invision. This is essentially a diagram that allows our clients to observe how the app will work by capturing the user’s journey from screen to screen. Such a wireframe is akin to a blueprint for the app and shows how many taps it would take a user to go from opening the app to achieve a certain desired output.

3. Design Exploration – the preparation of sample application screens in 2-3 different styles (based on the aforementioned creative thinking in #1), so that the client can pick one that fits them best.

4. Creating a style guide – created based on client feedback in #3, the style guide is the definitive document we use to ensure there is a sense of coherence throughout the design of an app. The design standards included in the style guide should be enforced throughout the app to provide the user with a sense of familiarity and intuitiveness when navigating. It consists of elements such as typography schemes, colour palettes, responsive layouts, buttons and many others. 

5. High Fidelity Design with Dynamic Prototype – the design guidelines are now established and the only thing that is left to do now is to flesh out the wireframes with the designs that were approved by the client. This prototype is usually developed on Invision and is very useful for when meeting investors as they provide an idea of the visual interface and experience expected of the finalised product.

UI Stencil 1
Sometimes, you have to leave the computers aside and go back to the roots

What common UI mistakes should you avoid?

1. Messy interface – every screen we design is geared toward creating value and ease of use for the end-user. A sizable number of elements, Call To Actions (CTAs), lack of coherence or even different margins on each screen sabotages this and makes any app impossible to use and easier to uninstall.

2. Lack of uniformity across different platforms – how many times have you used Facebook from a laptop before switching to scrolling on mobile? Is it not a seamless transition from one device to another?

That’s exactly how your app should function across all the devices it supports and is the reason we place a huge emphasis on sticking to the agreed design guidelines. Any break in this disrupts the experience a user will have on your app and impacts the success of your app.

3. Not inserting conventional elements – Recognizing something is much easier than recall as recognition involves more cues in a users mind. UI designers should know this and promote recognition by making information visible and easily accessible via visual aids such as tooltips and context-sensitive details.

4. Not taking hand gestures into account – how frustrating would it be if you kept deleting your social media posts by mistake? It’s to avoid such incidents that good UI designers take special care to insert the features a user would use often in easily accessible areas whilst buttons such as delete are harder to reach.

5. Not showing state – the interface of your app should move in pace with the user and produce the state of the screen to stop them from feeling “disconnected”. This is vital as feedback is typically associated with points of action — for every user action, the system should show a meaningful, clear reaction. 

A button when pressed should ideally change colour to show the acknowledgement of the users tap on it. The lack of such feedback forces users to tap again and again in an increasingly frustrating manner. 

Don’t Make me think twice UI
Sourced from Don’t Make Me Think Twice by Steve Krug. A must-read for every designer out there

Conclusion

A good UI shouldn’t be complicated. It’s meant to be used and should look good, be familiar and intuitive. Failing to take these into account will result in a confusing interface where the user is forced to search around the screen for buttons that are relevant to them. Such an experience as you can imagine is not good news for your app and will have it being uninstalled right after. 

Notebook with idea

7 Reasons Why Product Design Has a Huge Impact on Your Product’s Success

 

The development and launch of an app is no easy endeavour which is why we encourage our clients to think on hard metrics that they can use to monitor and measure success. These key performance indicators provide all the stakeholders with a goal to strive towards and could be in the form of income earned, the number of user, session length, app reviews, retention rate and/or churn rate. 

The most worrying indicator of success (or rather a lack of it) is the rate of uninstalls on your app. This rate, as per the below chart changes depending on the industry but should be taken note of, analysed and improved upon. 

Uninstall rates of mobile apps
Data source – emarketer.com 

One key reason for app uninstallation in our experience is a lack of design thinking in its development and is why we decided to pen this blog post. Such design is pivotal to the success of an app and is akin to a heart that pumps enjoyment, usefulness, and uniqueness into the product’s veins (pardon our poetic licence!). But, don’t take our word for it, keep on reading. 

1. Your end-users eat with their eyes

The UX of an app as you might find us harping on about (quite a lot) is wrapped in how the app is presented. The aim of any product design, therefore, is to let the end-user achieve his goal in the most pleasant manner that is possible. 

Imagine you’d like to develop an app that promises to help its users lose weight via a structured training and nutrition guide. Would this app contain a boring barebone interface that allows users to see only what they need to see? If you answered yes here, you will be in trouble. 

What you need to do is create an app that makes following your structured training and nutrition guide more enjoyable during its use. Add some animations and interactions that make the journey to losing those extra kilos a fun and satisfying experience.

2. The users expect an intuitive experience

Users seek apps to fulfil a particular need and an app that is confusing in itself, will not be useful. The UI you have on your app helps the user communicate with it and should create an intuitive UX that keeps the user engaged with the app for as long as possible. 

This intuitive experience cannot be standardised and requires a different user-oriented design for every product we work on. Take a look at the UI we designed for State Forests with different contrast features to help users identify trees in the bright outdoors, versus the one for  Flashka, an indoor app that allows users to share their music and have a flash party.

Contrast features of two mobile apps 1

3. Your competition is working as hard or harder

With 2018 seeing 194 billion worldwide app downloads, driving a consumer spend of $101 billion, the App/Play Store will not get any less crowded and is why the first impression of your app is important. It’s for this reason that we ensure all our clients are provided with screenshots that are reflective of the experience users can expect whilst using it. These screenshots are inspired by those offered by rivals, current trends and aimed at promising individual value to the app’s users, in order to encourage downloads.

4. Small design changes make big results

Finalising the design of a product involves a sizable amount of lean UX assumptions, test sessions with users and decision making on our part. This, however, isn’t the end as there is always room for improvement and is why we keep a constant eye on anonymous data and feedback from users. Such feedback allows us to see what’s working, what is not and what we can do better in the updates we roll out. 

Don’t believe us? See how a change in the microcopy increased the engagement on Google’s hotel searches

Google hotel search engagment after UX writing

5. Help make data-driven optimisations

Real-world users do not use apps in the controlled environments they are built-in and is why we reiterate the importance of listening to the data on the app’s usage with all the clients we work with. Such qualitative and quantitative data can help identify sticking points in the app that can and must be fixed to provide your users with an ever-increasing UX. A lack of such iterative improvements can have your hard-earned users being frustrated and abandoning your app for your rivals. 

Remember, the development of the app doesn’t end with its release. Its a  journey of monitoring and optimisation. 

6. It represents your brand

The app you release to the public and intend to be looked at multiple times is a reflection of you. Done right, it could be a brand asset. Do it wrong and you’d have a liability.  

Do you want to seem more classic or modern? Playful or sophisticated? Mature or youthful? 

The definition you pick for your brand should remain consistent throughout the app and is why we create design guidelines before we even start work. Such effective designs evoke trust and help make a mark in the crowded marketplace. 

7. Help create carefully crafted products

Carefully crafted products are vital as anything less than the best can have your users migrating to the many apps that are a tap away on the App/Play Store. This is why we at Mood Up insist on asking numerous questions from the client as it is only by asking the tough questions that we can create great, carefully crafted products that provide new and returning users with a superb experience. 

To summarise, product design plays a pivotal role in the success of your product and should be given the attention it deserves. What is important to remember however is that this importance does not diminish upon the app’s deployment, as a top-notch app such as yours should be listening to its users and making continuous improvements. 

Remember, customer acquisition is only half the battle; the real challenge is holding onto them.

man typing on macbook

Should you expand your in-house development team or hire a software house?

 

Most companies require the services of software developers at one point in their business operations, whether it be for developing an app for internal use or as a tool to reach out to their customers. And then there are some companies with an already existing in-house development team who are looking to upgrade or expand their digital service offerings. The top of mind question that stymies any business owner or decision-maker then is whether to invest in expanding the number of in-house developers or outsource the development work to an external software house. 

What benefits can in-house development bring?

Having your very own in-house development team is appealing to many business owners, who credit their always availability, loyalty, expertise, familiarity with the company culture and ability to keep sensitive information within the company as pros. This is very true and is why we would like to start with a quick brief on the advantages an in-house development team can bring you. 

1. Shorter turnaround time – in-house software developers are a company’s asset due to their always-on availability. Having a face to face meeting with internal employees who you already have a rapport with and understand the company’s business needs will help get the development started right away.

2. They know the business –  in-house developers have an innate understanding of the company, its people, process and will be able to grasp the business requirement for the new software. They can then use this knowledge to highlight gaps and even make suggestions for improvements. 

3. Compliance to existing code quality – the code of a company’s products matures with it and gives rise to quality benchmarks expected of the code in future products. Your in-house developers would be familiar with such standards and ensure the new code meets these parameters. 

4. No extra payments the biggest concern many companies have with outsourcing their work to external software houses is the additional costs that would need to be incurred. In-house developers are part of the company’s existing personnel and require no extra payment to start work on the new software requirements. This is ideal if the requirements are minor and needs to be deployed rapidly. 

5. Best cultural fit – with no lack of stories about how software projects were derailed due to misfits between clients and software development houses, your concerns about a good cultural fit is justified. You need not worry about this with in-house developers as they have already gone through the 4 stages of team formation (forming, storming, norming and performing).

That Would Be Great Meme on software outsourcing

We admit that the above advantages make a pretty convincing argument to hiring more developers for your in-house dev team. But bear with us for a moment and take a look at the not so positive side of in-house development too. 

What are the disadvantages of in-house development?

1. The lack of developers – you don’t hear the term unemployed software developer much, as the ever-growing demand for skilled software developers is eclipsing its supply. This increased demand for specialists in the field of computer software is expected to grow by  24% from 2016 to 2026 (faster than the average for all occupations) as per the United States Bureau of Labor Statistics (BLS). No wonder software development skills were chosen as the 2nd most promising job in the US for 2019 by LinkedIn!

The real question then is do you have the resources necessary to attract a software developer that is being poached by many companies? Skilled software developers today care more about the level of challenges they encounter, the company’s purpose and their work-life balance over the mere promise of higher pay. Can you tick all these boxes?

2. Hidden-costs – remember how we mentioned that you wouldn’t be paying extra to get any development work done by in-house developers? What you have to remember however is that having high earning in-house developers can have you paying more for rent, equipment, software, insurance, taxes and retirement funds. These are fixed costs that you would incur whether the developers are busy with projects or idle. 

3. Training with new technologies – continuous professional development is vital for software developers in order to keep up with new and emerging frameworks. Such training, however, does not come cheap and will have to be borne by you. 

4. Lack of domain expertise – developing software requires project managers, designers, QA testers and not just developers. A lack of these skill sets would mean that you need to look outside the company for freelancers or an external agency. 

5. Management of personnel and processes – the development of your project needs to be planned meticulously in order for it to be put into action. It also needs to be managed once the work begins and should be done by someone with some knowledge of project management, coding, design and QA. 

6. Shifting of focus – tasking your in-house developers with a new project might cause their focus to shift from their daily duties.

7. Reduced creativeness – in-house developers who do most of their work within the company work in a silo and might not be as creative as external software houses who keep in touch and are inspired by new standards in design, development and QA. 

Boardroom meeting meme on disadvantages of inhouse developers

In-house development as you can now imagine can be a tricky path to trod, especially if you do not have the resources you would need to take a project from the planning stage to its deployment. This is where outsourcing to software houses that have the necessary skills, capacity and creative thinking can prove to be a boon. 

What advantages do software houses bring?

1. Reduced costs – hiring a software house for your project will be cheaper in the long run as you would only pay for the hours of its development and nothing more. These payments are directly tied to the development of product features agreed upon at the planning stage with your software development partner. 

Such an agile pricing approach is more beneficial for you as you need not spend too much on recruiting and contributing towards the pension funds and insurance of an in-house development team. 

2. Time-saving – recruitment, on-boarding and everything associated with hiring new developers take valuable time and resources that could be better diverted to a software house who will begin work immediately. 

3. A comprehensive range of services– a software house possesses the project planners, designers, developers and QA testers needed to make your project come to life. These teams have many years of developing software products and have innate processes that can help deliver a great product, faster (that means cheaper).

4. Updated on the latest technologies and trends – a software house’s revenue is heavily dependent on the products it creates. The designers, developers and QA testers must, therefore, stay updated on the latest technologies and educate themselves in order to maximise the value it generates for its customers.

5. Creativity – the developers in a software house have worked on a multitude of projects before you and even some that are in the same industry. They would, therefore, be more creative and think innovatively when compared against in-house developers who are locked into certain thinking patterns due to organisational mental models. 

6. Quality products – end to end software development teams create higher quality products due to their ability to function as one. This, however, wouldn’t be possible if the designers, developers and QA testers were freelancers and new to working with each other. 

Alright Gentlemen We Need A New Idea Meme on agile pricing

Outsourcing your software development to an external software development team is a good idea that can be attested by many. This demand for software houses is propelling an industry that can at times contain some disadvantages.  

What are the disadvantages of hiring software houses?

1. Distance – we’ve seen many companies outsource their development work to software houses situated in very distant countries, making it nearly impossible to communicate and resolve issues. It is for this reason that we at Mood Up team prefer to nearshore and work with clients who are closer to us geographically. Remember, a certain overlap in time difference that allows a team to catch other during office hours is acceptable. Not one where both teams are up too early or too late. 

2. Cultural fit– outsourcing your software development work to a nation where the cost of labour is low might not be the best idea if the two cultures are at odds with each other. This is another reason why we prefer clients who nearshore their work to us. 

3. Difficulties picking the right software house picking a software house is not a task that should be taken lightly as the wrong choice might mean a loss of a sizable amount of money, time, peace of mind and more importantly, opportunity. This is why at Mood Up encourage you to dig deep into a software house’s people, skills, previous work and processes. Ask for a trial period if you must. 

4. Security and confidentiality – breaches of contracts by dubious software house can have you concerned for the confidentiality of your project and data. This, however, can easily be remedied by entering into a partnership with a reputed partner that offers NDAs and all source code to you at the end of the project. 

expanding brain meme on nearshoring software development 1

Conclusion

Picking between expanding your in-house software development team and hiring an external software house can be a daunting decision. Both as you saw earlier have their pros and cons, and the approach to your expansion can only be decided after careful consideration of factors such as the requirements, budget, deadlines and expendable resources. If you do decide to opt to hire an external software agency, make sure you pick one that is right for you with these tips