App development workflow for beginners, Ui/Ux in 4 simple step

Selene Grandi
Digital Brainstorming
3 min readMay 28, 2020

I always read comments and questions about the right UI/UX Design process. I thought I would make a short and schematic guide on the correct workflow from the beginning to the end of a typical project.

My explanation method, that I like to call “The four D’s steps for Ui/Ux”, is perfect for explaining to the beginners the design stages of an App or a WebSite.

DISCOVER. This is the first step, where everything starts. Here, it is important to learn about the purpose, who the user is, his/her needs, and gather information about the competition. During this phase, the information is collected. An expert Ux designer knows how to move, identifies which data is relevant or not, and how to interpret it.

Keyword: Data
Tools: Survey, swot system

DEFINE. Here, analysis, psychology, personal experience, and usability engineering come into play in a very messy story board. During this phase “persona”, the user journey and ideas are translated into a paper map first, and a low-fidelity wireframe after. The information architecture is completed at this stage and everything is ready for the Ui designer.

Keyword: Analysis, information architecture, usability, wireframe
Tools: Pen & paper sketch, Balsamiq, Adobe Photoshop, InVision

DESIGN. The Ui Designer gives life to a user interface. He focuses on the look, the layout, and the accessibility. At this point he projects a semi-functioning prototypes. The information architecture is translated into colours and takes shape.

The User Interface is the “visual soul” of the project.

Keyword: Accessibility, visual design, testing
Tools: Sketch, Adobe XD, Figma

DELIVER. This is the last step of the journey. All testing, implementations and second analysis, are done. The product is ready to be developed. During this phase, the Ui designer and the developer are working closely together under the supervision of the Ux designer.

Keyword: testing, JavaScript, HTML,CSS
Tools: Ionic, Buddy, HeadSpin

I understand this explanation is very reductive and schematic, but itwants just to give a simple idea of the fundamental steps of the Ui/Ux world.

--

--

Selene Grandi
Digital Brainstorming
0 Followers

•Marketing Specialist •Ux designer •Journalist •Assistant Manager