app – UX, UI & Visual Design

Online app startup analysis – “Expense Tool” Case Studie

13 de April de 201613 de April de 2016 authorLeave a comment

I have the opportunity to make an analysis to an online app idea, which aims to help the user to manage your expenses.
The app is now online, although not yet fully public. This initial phase is optimal to make constructive critical to the application, to improve the user experience, the visual design and perform to garanty the success.

So, there some advices and tips to improve the application.

Let’s start:

Homepage.

Visual Design Issues

1.Choose the right Background

The first thing that stands out is the image used in the background. Being an application that aims to generate “expenses”, the better to use a image related to purchases, such as a people in a store, credit cards, etc ..

The first impression is very important. A good input image indicates and fit the user in the right context of the application.

2.Invest in a Logo

Is missing a logo. The logo is the face of a brand, it is with it that is recognized and where the user is related and create empathy.

3.Colors Contrast

The colors of the background and other elements must have sufficient contrast for a good eligibility of all elements.

Having an area of useful extra links that are relevant to users, such as “Help”, “Contact”, “price list” (if applicable), and others content.

User Experience Issues

1. Possibility of choice.

The user don’t have to choice to sign up before enter in the application. The user should not be required to log in to know the application. You should have a page of more informational and text descriptive of what you talking about.

Or if you want to keep the most minimalist site, create a button to “Read more” and “Sign Up or Register”. Although it should be to make life easier for the user, presenting in the first moments more information on the application.

You can have a preview or a trial, for the user can decide to assign or not.

Here a good example:

http://www.desk.com/

Login Page

User Experience Issues

1. Good differencing of Log in and Sign Up

In this case there is still no sign up option, but if it were the case it would be necessary to differentiate very well when we log in, or if we are creating a new account.

If login, we must have in addition to the email / user box, password and confirmation button, you to include the options “I Forgot my password” and “Keep me signed to.”

In New account, we have to include, besides the email, password and sign up button, have the confirmation button that you agree to the terms of use.

We have to have option to sign up with Facebook or Twitter account.

Is important to have option for showing the password: “Show Password”.

If is the case, when it is in “Lock Caps” the user must be warned.Many webapp don’t have this option unfortunately.

Welcome Page

Visual Design Issues

1.Choose the right Background and logo (Again)

Again here, the background of the header must be diference, more related to the application of the essence.
E.g. Shopping at a store, credit card, consumerism …

2.Elements Balance

Visually the elements are not balanced, should be less scattered and visually grouped by subject. Could have a higher bar and always present, with links to the most used areas.

In the central part, and they should be grouped together with icons for each of the numbers / results described.

Overall, it should look more like a dashboard.

Expense Report Software – Zoho Expense

User Experience Issues

1.More Intuitive

The areas where the numbers are (in this case still zeros) should be clickable, which really does not. The user have the desire of clicking but nothing happens.
There should be a button “New Expense” and “New Profit” even on this page, instead of being hidden in the menu. The application is forcing the user to look for something that should be right in front of eyes. This way, it will be more easy and quick.

2.More Features

The user should be able to display a graph with the evolution of their costs and profits.
Or even create a goal, to encourage the user to reach the target.

You could even have a list of reports with the latest entries.

New expense page

User Experience Issues

1.Required Fields

If there are optional fields in a registration form, make sure to clearly highligh. Usually a small mark like an asterisk (*) is enough. It can be frustrating for users to find out that they have not filled in a required field after submission.

2.Option Buttons

A form is very important to have an option to clear or cancel a form.
In this case we have lack of these options. You should create a button to clear or cancel and then another to create.

We need to pay attention to the display of them. The cancel button (clear) should be at the left side and the clear button in the right side. Taking into account that the right button is the more intuitive button even in case of error.

3.Family groups

Create an option to create family categories, or have default 2 or 3 categories already created, as household expenses, car, transport, etc …

4.Cut what is not necessary

If is a top menu always present, dont’ need the back button.

5.Menu always present

The top menu will have the links to add more expense, edit expanse, edit profile, etc…

Update Profile page

User Experience Issues

1.Make the advices said in New expense paragraph.

The issues referred to in the preceding paragraphs can be applied here also in this form.

Some information websites:

UI / UX process App Design – Part I

7 de October de 2015 authorLeave a comment

After choosing the ideia, the following is a the list of features that app will have. We have to know that more features y have the app, more tests will be needed and more setbacks and arrangements will be needed to do.

In this case, for this app you have the following features:
– Possibility to choose a date of departure and arrival (days that you have to travel);
– Possibility to choose the value of the your budget to travel;
– With these parameters the app will search all the flights that fit the profile fitted;
– The results are displayed in ascending order (from the cheapest to most expensive);
– Ability to mark as favorite some flights. (if at the time the research was unable to decide / arrange the trip);
– Ability to display the destination city on the map;
– Possibility to see more information about the city, across the map;
– Ability to schedule the flight, going directly from app to app or website of flights agency or company (easyjet, Momondo, edreams, Ryanair, etc …);

Having established these features, you need to make a draft of the workflow.
It is a scheme, a storyboard sequences of screens, with the indication of how the app works.

This is a outline of how the app would work.
After and before moving on to the computer, I like to draw by hand, the sketch of what I have in mind. Quickly with the pencil or the pen, I can lay out my ideas

The phase that follows is the simplest UI design of App screens. In my case i drew in Balsamiq Mockups, that could quickly lay out and plan all screens of the app.

Despite being almost black and white, with some appoitments of color, at this stage we can already notice what will works and what does not. At this stage it helps to structure the workflow and also helps us to build visually
the app itself. We have already at this stage have a perspective of what works in terms of size and positioning of buttons and usability. I can also understand if some elements are to little, or are in the right location or is missing visual elements to create a good user experience.

In this phase we can also do tests to people that are external to the project. The best way is to export all screens, and make a prototype in the various apps available in the market such as POP, Marvel or inVision.

Watch the demo:

My UX/UI Weekend

15 de September de 201518 de September de 2015 authorLeave a comment

Last weekend I had the opportunity to attend a workshop UX / UI Design for Mobile app. In renowned digital school in Lisbon.

It was really great, get to know the methodologies and best practices to design a mobile app. Because drawing an app for mobile is very different to a designing a website.
Over the next days, I will share with you some of that knowledge I have acquired and share to the exercise that I did.

Some points to remember:
– The idea is critical and we need to know the concept and who will be the audience for the app;
– Do mockups on paper. Yes, despite to seem a little old school, it is important to organize the ideas and have a basis for designing to digital;
– Make digital mockups:
and test … test over and over till is perfect;

Well for now is all .. Wait for my next posts!