You are here: Home UX/UI Projects

UI-UX Projects

table of contents
www.bioluminati.org
www.kynded.com
www.vortxacademy.com
www.vicreative.com

responsive design code example
www.chicbydesigncollections.com
www.ncaosa.com
html coded email blasts

www.bioluminati.com
Kynded
» Current Project: Bioluminati Major Upgrade

A major re-factoring of this travel website's Technology & Look and Feel.

The site was moved from vps-link to webkeepers resulting in an increase in server quality and decrease in cost.

Django has been upgraded and the schema is re-factored to allow easy yearly updates and archival of content.

The front end will be improved using Responsive Design principles, HTML5 & CSS3 to allow use by mobile, tablet and desktop to enhance the UX.



www.kynded.com

Kynded
» Ideation Sketch:
This sketch integrates the goals and elements of the new app with the existing site.
  • Use of the existing style, CSS3 and Bootstrap.
  • App must have cross platform ease of use.

»
Wireframe:
  • Low-Fi wireframe allowed placement and refinements of style and layout elements.
  • App functionality was verified by agile team and end user testing.
vortx Academy
» Finished Site:
  • Kynded's user media management app usable functionality was made easy & intuitive to use.
  • UX design principles and practices were achieved to maximize the UI-UX experience for end users and other stakeholders.
  • Mobile functionality & Responsive Design achieved by using Bootstrap
www.vortxacademy.com


» Ideation Sketch:
The Vortx website was a brand new launch in which several marketing goals needed to me brought forward:
  • Promote the VortX Brand.
  • Lead prospective clients and students to information on ongoing classes
  • Efficient & effective signup.

» Wireframe:
  • Low-Fi wireframe was used to ease visualization of the pixel perfect implementation that was to be created.
  • Marketing goals as per Ideation sketch
    were confirmed with client.
vortx Academy
» Finished Site:
  • Marketing goals are fulfilled with a pixel perfect implementation.
  • New clients and students can easily find critical information such as: date and time for classes, signup information and other needed information.
www.vicreative.com

Vi Ideation
» Ideation Sketch:
This project is an extension of an existing site that allows Vi Creative to personalize & customize there messaging directly to clients within their Customer base. 


Vi Wireframe
» Wireframe:
  • A Low-Fi wireframe was created to verify placement & end user UI interaction.
  • End user UI interaction was reviewed and verified
Vi Creative
» Finished Site:
  • Improved site marketing, messaging and performance.
  • Site is much more visually rich with videos, and advanced jquery features such as fancybox and rollovers.
  • Because the UX, IA & business goals were achieved the website was able to make a real impact on end users and ViCreative.
www.chicbydesigncollections.com


» Ideation Sketch:
The CHIC by Design site UI-UX was broken and the site needed a redesign.
The above Ideation Sketch provided clarity and allowing the customer to gain understanding of the design changes. Other goals for this project:

  • Fix existing errors and bugs.
  • Provide UI-UX enhancements to allow users to make their purchases more easily.
  • Suggested innovative changes to provide new and custom feature for website.


» Wireframe:
  • A Low-Fi wireframe was created to verify placement and end user interaction.
  • UI interaction was reviewed and verified with customer and end users.
chic by design
» Finished Site:
  • Site performs to expectations.
  • Improved Ui-UX
    interaction with site's customers.
  • Access to key site features have been improved thus meeting the information architect/business goal of a more effective website.


www.ncaosa.com


» Ideation Sketch:
.
This project was a "Website Rescue" for Nacosa after a failure to execute by the previous engineering firm. Nacosa's goal was to have a Content Management System with:
  • built in editing capabililty
  • event calendaring
  • promotion of Ncaosa's brand
  • improved communication with their comunity

» Wireframe:
  • A Low-Fi wireframe was created to verify placement and end user UI interaction.
  • UI interaction was reviewed and verified with customer and end users.
ncaosa_sm.png
» Finished Site:
  • Business, Marketing, & Communication goals achieved.
  • Site performs to expectations.
  • Upfront design goals achieved.
  • Site rescued!


html coded email blasts

» Kynded Emailer:

.

» IRI Tai Chi Seminar Emailer:

.

» Custom Sweetness Emailer:

.

responsive design
» Responsive Design:
Click on the image below to view this example. Re-size your browser to see this design
dynamically change from desktop to tablet to mobile view.

responsive_design.jpg .














Document Actions