My first UX DESIGN PROJECT

INDIO DA COSTA STUDIO WEBSITE

Indio da Costa Studio is a 40-year Brazilian multidisciplinary group of Architects, Urban planners, and Industrial Designers, supported by a variety of specialists. I was offered the opportunity to change their website and said: “Why not? I can make this happen!”. And I did. It was one of the first steps that took me into the Digital design Universe and right from the beginning I had to learn that UX design was about the whole process of discovery and how to manage stakeholders gracefully, besides coming out with brilliant solutions.

These were the website development steps I took back in 2013:

1- Before starting to wireframe, a new information architecture was developed for the website, by gathering information from the main stakeholders in the 4 main areas of the company (architecture, urban planning, product design, and transportation design). The owners decided on the acronym A.U.D.T. related to the areas mentioned above. They asked for a website structure that could have a nice portfolio section and also could be changed by the marketing team regularly.

A WordPress template was previously chosen but was modified by an outsourced developer’s team according to the client’s specific needs.

Information Architecture first studies (Architecture and Urban Planning)

Information Architecture first studies (Design and Transportation)

The main navigation bar and the relevant areas of the Studio were defined as:

Projects (Portfolio)and Main Menu.

Main Menu: About, News, Contact, Press and Design Shop (and English/Portuguese button).

Projects (portfolio): Architecture, Urban Planning, Design, Transportation

Architecture and Urbanism menus

Product Design and Transportation menus

2- After this stage, I designed low-resolution wireframes (not uploaded here)

3- After a few UI tries in white background, the black colour was approved as the new identity and 4 images on the screen would help to quickly access the areas of the Studio, with a drop-down menu option coming from the navigation bar.

Meanwhile, the design and marketing team gave support to the project by organizing and gathering all the content needed: imagery and copyright.

Home page

Portfolio page example (Architecture drop down menu + mosaic style displaying the products)

4- The inner part of the portfolio had a slide carousel. On the bottom right side, you will find the product’s specifications. Plus you could choose to see either images or videos of that product, by clicking on the icons below

portfolio page — product page example

Contact page (Offices locations / Send as a message / Be a part of our team)

Press contact page (Press Info / Press Sign in form / Further Information solicitations form)

5- The mobile app followed the responsive quality of the project and it was the first mobile version created for this company.

Responsive Mobile App version. The online store button directs to another link, where the design items are sold.

Conclusion:

Besides ending with the Flash website version and getting the Studio into the mobile universe, the two main departments (Design and Architecture) were equally respected, showcasing their best work. Plus, the forms in the contact form and press area helped to filter the high number of solicitations from the press, students asking for job positions, international emails from museums around the world, and many other inquiries that considerably interfered on the marketing team workflow.