Israel Bautista, UXMC.

Designer, Developer, Dad

Portfolio

An overview of my process.

Information Architecture

1. Information Architecture

Part of my UX process involves developing an information architecture which is fundamental in the creation of the system(s).
The mission is simple, but not always easy...make things findable and discoverable.
Helping users complete tasks, find what they need and understand what they've found is all part of the Information Architecture's goals.


For this reason, I employed several methods within my IA toolkit:

  • Task flow analysis
  • Content inventories
  • Usability testing
  • User research
  • Tree testing
  • Card sorting
  • Task flow sketching
  • Design thinking

A well-planned information architecture allows for growth, expansion and increase ROI.

2. Mental modeling

Another key part of my process is creating mental modeling graphs, using the sky scraper technique. It is a helpful way to begin optimizing mental models for complex situations.


I employed this technique while developing the IA for a whole new section of an application, in this case a dashboard. This technique allowed me to quickly identify the activities where the user would be focusing the most.

Information Architecture - skyscraper

1. Wireframing

Wireframing is an essential part of my UX/UI Design process. It allows me to quickly present initial concepts to users and validate or invalidate design ideas. This process is very hands on and very visual, as it makes the jump to creating an interaction prototype much easier.


Wireframing is a very helpful way to find the parts that you need to focus your attention on when prototyping the interaction of your application.
Trying to prototype every single aspect of your application can be a very costly mistake. When I wireframe, OmniGraffle is my preferred tool.

Information Architecture wireframing

2. HTML5, CSS3, Javascript Prototyping

Sometimes you need a level of interaction that is above what Axure or other tools can do for you.

For me, coding a prototype using HTML, CSS3 and Javascript can have many advantages. For one, the user gets to interact with an application that looks and behaves as close to the final product as possible.

Another big advantage is that by using code that is semantic and follows best practices the development process can be shorten and the project can move to the next phase quickly.


The following is an example of an HTML5, CSS3 and Javascript prototype I coded in order to validate some design assumptions. I wanted the interaction to be as close to the final product as possible, in order to observe the user interaction and determine the next steps.

3. Axure Prototyping

Axure is my favorite tool for creating interactive prototypes because it offers flexibility, high definition, and rapid prototyping with asset sharing capabilities and version control.
I can design a prototype with a high level of interaction very quickly and test my design assumptions early on in the process. This allows me to iterate and respond to design issues on the fly.
This proved to be an extremely important ability at my previous job, since I could modify the prototype immediately after getting feedback from usability testing, even in cases where those test were conducted out in the field.

My team and I could easily modify the prototype based on user feedback, then upload the new file to Axure's file sharing systems. The team could see the newly updated prototype within seconds of me deploying the new solution. A time and money saver for our team and company.

You can review this prototype in more detail by following this link:
Interactive Prototype - Sign Up process.

1. UI Filters

These are part of a series of UI filters designed for a Social Media application.
The filters were meant to allow the user to fine tune the content displayed.

ui-filters celebrity
ui-filters games
ui-filters music
ui-filters dates
reports

2. Reports Dashboard

Dashboards are an integral part of many applications. I was fortunate enough to be part of the initial concept and design for this client's dashboard. The design consist of two main information areas and one supportive section.


The idea for this project was to provide the user with the most relevant information needed for the user to make informed decisions about the performance of their social media campaigns.

1. SocialCentiv

I was in charge of developing and improving the CSS of the application, as well as making sure it was responsive and cross-browser compatible.


I was also tasked to help improve the User Experience by utilizing different UX methodologies like: Usability test, Card sorting, Experience View mapping, etc.


One of the biggest accomplishments I was part of, was to reduce the time required for a new user to sign up. Taking the process from nearly 30-45 mins to complete, down to 3-5 mins.
This allowed the user to quickly begin to use the application and realize its potential value, thus increasing the number of signups.

SocialCentiv signup process
MeteorJS application

2. Meteor JS App

As someone who wants to keep improving his javascript skills, this framework brings the best of javascript in my opinion, not to mention that it can also be used with Angular if you wish. For that reason, I decided to start building an application to gain a better understanding, of Meteor and its components. Using the MovieDB API to obtain the data and display relevant information.


3. My Codepen Experiments

At codepen you can see a showcase of some of my experiements and perhaps get a sense of the technologies I'm learning and experimenting with.
It is always a work in-progress!
Codepen Showcase.

4. My Github Repos

Browse my Github Repos and review other projects If you wish to dig deeper into my code.
Some of the repos I think you might find interesting are:


  • Countries & Capitals. An AngularJS project that was part of a three month bootcamp curriculum course I took in Angular from Thinkful.

  • Waitstaff Calculator. Was another AngularJS project I made while taking the Thinkful bootcamp. The app is a calculator tool that helps wait staff at restaurants compute meal costs and track their tips over the course of a shift.

The focus of these projects wasn't so much on the design but making sure the application met the requirements specified. In essence, this was an exercise in creating an MVP (Minimum Viable Product).
Of course getting to feel comfortable with the framework was the main goal. My knowledge about Angular is something I strive to improve every day.

Profile

A little about me.

Israel Bautista
Israel Bautista
UI/UX Designer & Developer.

Hello!, I am a Front-End Developer and UX Designer. I have graduated with a Bachelor of Science degree on Web Design & Development, from Full Sail University.

I have a UX Master Certification from the Nielsen Norman Group. I love creating intuitive and beautiful products. My design process is both methodical and intuitive. I rely on knowledge of UX & UI best practices to make informed design decisions.

It's not about ideas. It's about making ideas happen.

Tools & Technologies

These are some of the technologies and tools I use on my daily routine. I claim to be Master of none. I don't advocate for any particular tool or framework. I adjust my work flow according to the project and select the best tool for the job. If I don't know something immediately, I figure it out!
This is a list of my skills in no particular order. I am ALWAYS learning or researching something new or exciting to me, so when I need it I know where to go. Areas that are in my immediate list of improvement are: Javascript and UX.
I enjoy being part of projects that require a blend of these two areas. If you are as passionate about them as I am, please let me know! I would love the opportunity to work together.

  • HTML5
  • CSS3
  • Javascript
  • UX/UI Design
  • MeteorJS
  • AngularJS
  • Git
  • ReactJS
  • Axure Prototyping
  • User-centered Design
  • Photoshop
  • jQuery
  • Sass
  • Sublime Text

Education, Certification & Bootcamps

Endorsements

See what people say about me

Lindsey Pennington

Lindsey Pennington
Owner at Anytime Fitness

Israel is a very driven, motivated, and hard-working individual. He gives his best in everything he does and is always open and willing to learn new skillsets to strengthen his abilities at work.


Danielle Quevedo

Danielle Quevedo
UI Developer

As the UX expert Israel helped guide the layout and behavior of the SocialCentiv app as it grew over the years in size and complexity.
Israel is all about sharing knowledge, working efficiently, pulling his own weight.

Tracie Pannell

Tracie Pannell
Sr. Quality Analyst

Israel is creative and comes up with great solutions to problems. He has excellent UX skills and is always helping the team come up with the best possible user experience.



UX Certified since May 2015.

UX Master Certification Badge from Nielsen Norman Group

Are you Human?, 3 + 1 =