Portfolio Walkthrough

Essential UX Projects

The portfolio section focuses on revealing four fundamental projects as we continue with our 79-UX solutions as part of my usability user walkthrough series. Workflows, learnings, design devisions and successes are fundamental particles of creation which keeps me motivated when working with clients. The portfolio section is designed using a scrollable method by illustrating projects that cover a range of useful technical qualities. Ranging between front end design using HTML5/CSS3 with client side JS libraries and design thinking UX tools for generating rapid prototyping screens. 

Design Workflow

The Social Zine project presented an opportunity to engage on designing a water flow method which focused on following a rigid agile process. Define, Empathize, Ideate, Prototype and Validate using qualitative A/B testing research tools. 

Agile Workflow: In Chunks 

  • UX research note-taking
  • Usability principles and Scrum swim lane development
  • Design low fidelity Issues prototypes while maintaining Stand Up product iterations
  • Iteration Hi-Fidelity rapid prototyping with stakeholder feedback: UI components
  • Responsive design validation methods with user personas models 

 

Social Zines

View SZ Prototypes

Learnings

Rose Amor restaurant is a revolutionary idea where the concept between hospitality services and automation technology meet full circle, in one infinite loop. The restaurant investor group aim is to build a physical hospitality environment to mimic social digital environments ie: Facebook, Instagram and SnapChat. Using automation services such as internet of things devices with touch screen displays while re-creating the restaurant boutique experience are the basic building blocks behind the project.

Useful Findings

  • Designing for multiple screens is extremely challenging.
  • Following Agile methods was a critical benchmark.
  • I was able to develop a method between creating function level interaction principles and screens that where pixel perfect using XD.
  • Connected UI devices have a potential of reaching a target audience beyond the traditional mobile to desktop experience. 

 

Internet Of Things

Internet of Things UI Device

Design Decisions

The Compass web portal was a front end design project where I was given the opportunity to create a web interactive UI to showcase an enterprise product. I worked with the lead engineer on the project, making sure the prototype was simple, modern and responsive enough to cover an array of screens. The client UX was created for a K-12 education audience with millions of users nationwide. 

Design UI Decisions

  • Developed prototype components using PhotoshopCC
  • Designed front end templates using HTML5/CSS with Bootstrap Dreamweaver-CC integration
  • Generated custom CMS with custom post type client side admin Dashboard
  • Lead digital marketing style guide product decisions while implementing user testing feedback 

UX Web Portal

Successes

The YipTV team allowed me the opportunity to design several UI forms as part of their customer on-boarding process. The usability forms needed to encompass simple sign on methods while being flexible to accommodate several payment portals. 

The forms needed to follow YIPTV engineering technical guidelines. These included connecting the forms to our backchannel API's which loaded a custom CMS build for the "precious" marketing team. As per the forms themselves, I developed each template layer using HTML5/CSS3, Javascript with PHP for designing front end validation methods. Using Adobe Illustrator CC as a vital prototyping tool before jumping into code. 

This analogy lead me to some obvious design decisions for both the engineering and marketing team. By developing a subject-specific vocabulary to go along with the form's design pattern, I was able to formulate a clear call to action for our intended target audience.

Successes 

  • Effective user signing benchmarks where effectively targeted by marketing using the build in CMS Admin Dashboard.
  • Form templates actively connected to our back channel API tools. 
  • User feedback was positively engaging after revealing forms user metric data
  • The UI forms where actively used to sign on over 100k user generated leads with little technical oversight. 

UI Front End Forms

UI Forms