materialize ideas
materialize ideas
Having worked with multidisciplinary teams across many countries and different styles of design processes, I have developed a direct and adaptive approach to designing products, from ideation and understanding the needs of end-users to research and prototyping, as well as creating information flows, wireframes, pencil sketches, and UX writing. The visual samples I am presenting here are examples of the different approach strategies I have used in previous projects.
Recently, I have incorporated the Google Ventures Sprint approach into my process, which has proven to be a fast and efficient way to tackle product improvements and ideation of brand new products. However, I believe that my greatest asset is my flexibility and ability to adapt to different teams, tools, ideas, and ways of working, which has been valuable in my experience.
I will take as an example Practice, Practice needed to revamp their curent product usability and UI in general, this are the steps and direction I followed.
Even before starting new ideas it was necessary an analysis of the current information architecture.
This is an example of the interaction happening in this particular process, with this type of diagrams is easier to identify pain points or improve processes.
This is a preliminary improvement to the previous diagram, the deliberations to reach this point were jointly agreed with developers and product owners as well as Customer Success managers with is proven to be very useful as they brought a different dimension to the ideation of solutions.
After the Information structure has "thumbs up" from engineering and other product owners I start some ideas on paper and create rough pages to go even deeper details with the team. Usually a pen and pencil process as is quick and easy to iterate.
Next is to refine and have a more clear and objective visuals for the wireframes so the whole team including higher level executives can easily understand and contribute if necessary.
This step usually involves some wireframe options and directions, from this step usually after deliberations I end up usually building a final wireframe document including all the feedback from the team. Most of the time components from all the wireframe options are assembled together for the final document, this might involve the creation of analog versions (for a responsive web-base app for example), depending on the need and targets the same app can have have multiple wireframes if necessary this for different displays or devices.
I usually build a global general wireframe and then I break the individual tasks or processes of the app in secondary wireflows (wireframes with destination connectors) that include greater detail for exaple a wireflow only for sign-up process and another for Recording a video, this method has proven succesful as is easy to share segmented wireflows depending on the focus at the time.
Mapping allows to link the interaction design map with actual design steps (pages or screens), and also is a way to have a general view of the app in general.
Once all the above has been defined comes the User Interface design, this step - depending on the project - can be a straight forward stage if the product has established guidelines from UI style-guides or a design system, however many times the UI is being built (in start-ups mainly) paralell to the definition of the brand or when the brand is evolving, this gives a little more flexibility and room for creative exploration.
Paralell to this stage or when the stage is completed I usually try to generate a few prototypes to see if the UI is working the way was envisioned, for example you can see a couple of examples below, in this example I've had to present ideas to product owners when I was workign for GREE. Interaction 1 and Interaction 2.
For developers the points 2 and 4 are very important because based on those points they define an abstract idea of the structure and logic for the app.
Understanding the technologies I am working with and limitations is very important, it allows more flexibility in designing the UI and building interactions, however as I work on frameworks such as Angular, React, React native, Swift, etc, different projects with different teams require quick adaptation and flexibility. Nowdadays most teams work with InVision and Zeplin to deliver UI ready for developers to start building it.
The components for this stage are similar in my experience: I tried to always output graphics as Scalable Vector Graphics (SVG), or in native code build as much as possible. For icons I deliver an icon font set that can be easily mantained and updated. Basically minimizing the dependency on actual images or assets, this for greater performance and faster download times.
Another important component is the creation of a Design System, which comprises a document with all the modular parts of the product or service UI, from large "organisms" such as stadistical graphs with filters, text fields and buttons to "cellular-level components" such as search input or switches.
A simple pen and paper are always the beginning of ideas, however in order to present them to others more clarity is always necessary. I list some tools that helped me to quickly transmit visual or interactive abstractions to others.
For icon design and illustration: Adobe Illustrator CS. For designing UI: Sketch, Figma, Framer Studio, Adobe Xd or any other design tool that the team or context requires. For presentation: Sketch Cloud, InVision, Zeplin, Keynote. For icon-font creation and management: Nucleo. For prototyping: Keynote, Framer Studio, Compositor (Lab + Iso), Atomic, InVision. For graphic manipulation: Photoshop. For Markup and CSS editing: Atom. For ducumentation and sharing: GitHub, Dropbox and Google drive. For communication: Slack, AppearIn and Zoom. For taking notes: pen and paper, Ia writer and Evernote.
Always willing to try new tools!