UI / UX process App Design – Part I

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

drafttdraftt2
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.
homeBudget-Toresults-favorite
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

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.

app-surprise-me-katia-amaro

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;fotografia
– Make digital mockups:
and test … test over and over till is perfect;

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

In few words…What is it UX and UI Design?

Well…i should i begin? When i was a student in visual, i don’t remember the concept of UX and UI design. Maybe i had my head in the clouds, but sincerely this subjet was never be talked with depht. When i started to heard about that i became curious and make my own search to learn a little more about this area.

After some search, i realize that in my years as webdesigner,  I was already doing that job, this kind of analysis, but in a way more intuitive and base at common sense.

The wikipedia definition:

“User experience design (UXD or UED) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.”

In other words, User Experience is how the user feels when is using and interating with a system. It could be a app of a mobile device, a website, a desktop app or a software. Is the interation human-computer (HCI).

Ux-areas

User Interface Design or UI Design,   it’s the way how the person interacts with and controls a device , software or application. This control can be done by buttons , menus and any element that provides an interaction between the device and the user.
A good UI design anticipates the user’s needs and ensures that the interface contains elements of easy access and use. It will provide what is called a user-friendly experience , that is, an experience that is friendly and does not cause the user frustration.
Example of UI Kit – From http://designmodo.com/flat-free/

http://designmodo.com/flat-free/