Introduction

Featured by Apple!

Apple featured the redesign in their Special Event that just took place on September 10th, 2013. They featured our app along with a few others like Facebook, Twitter, Path, LinkedIn, etc.(It is the fifth screen on the first row)

Brainstorming and Early Sketches

I was hired at Travelocity to be the lead of all of our native applications for mobile. The apps that were currently available had many issues with them, they were designed without the customer in mind, unstable, and the last design change was about 4-5 years ago on the iPhone. After ramping up and updating the current Travelocity App with the latest functionality available, we also made it to a point where we felt comfortable to focus on a huge overhaul. We gathered several requirements and ideas that we wanted to incorporate in to the app, followed by making a road map for development.

The redesign started process started in March with a focus on iOS. It started out with making sketches based off of the functionality we wanted to include. This process went through many iterations of low and fidelity wireframes as we solidified a direction that we wanted to take. Shortly afterwards I created an HTML prototype of the app to start testing functionality in front of customers. You can check out a video of the HTML early prototype I created here:

You can see the HTML prototype here.

Prototype and Usability Testing

We had a Usability Testing Lab on site which we would frequently use whenever we wanted to test out our products. We tested out the prototype and updated it as we got the feedback, which in turn allowed us to continually improve the product. We would also make Starbucks runs and put it in front of customers to see their thoughts. We would perform some A/B testing comparing the old design with the new design to ensure we were improving on the existing experience and not hindering it. The idea was to make sure that we had consistency across all mobile platforms (Android, iOS, Mobile Web); Basically a user of any device could easily pick it up and use it without having to relearn interactions or where things are placed.

iOS 6 to iOS 7 Transition

apple-event.jpg

A few of us, including me, had the opportunity to attend WWDC 2013. Upon hearing the new direction, we had decided to halt development and rework the existing design to have a very iOS 7 look to it. Given the fact that we found out in the middle of June (with an expected release in September), we needed to determine the new direction rather quickly. I went through Apple's UI documentation as well as noted all interactions, patterns, styles, layouts that were used by Apple in their beta. I was able to rework our current design, incorporating what we had learned from our usability testing and research, to ensure we had ample time for development.

Android Development

Our Android team grew significantly and so as we were prepping the iOS design, we also were designing for Android. We made it a point to understand all the differences between iOS and Android, and cater the best app catered to each platform. You can check out some earlier comparison shots between the Android and iOS designs here:

Android vs. iOS Comparison

Documentation & Communication

Throughout the process of design and development, I made it a point to make myself very accessible. I provided comprehensive documentation listing out things like colors, effects, font sizes, type, etc. You can see an example below of a page of the documentation that I created for the developers. Additionally, I had created app flow diagrams and several prototypes like the one linked above (here), so that developers understood the interaction and flow of the app.

Before & After

The Travelocity app has went through several iterations to greatly improve the experience the user has. It has tested positively and even preferred when put next to our competitors. We have put in place many methods of tracking key metrics so that we can see the increase in conversion (also to fix any places which may be hurting conversion).

Release

Apple has chosen our app to be a launch partner. Our app will be featured by Apple and launching with the release of iOS7 in September. It will be followed by a release for the app on the Android platform in late September.You can see more screens for the Travelocity app here:

iOS 7 Screen Shots

Introduction

The Concept

I was chosen to be a Google Glass Explorer and so I jumped on the opportunity to get one. I instantly became immersed and intrigued by the new interactions and it's implications for future technology. Since I work at Travelocity, I proposed the idea of launching a last minute hotel deals app for the Google Glass. The pitch was well-received and so I began making sketches, determining user scenarios and laying out the flow of the app. After this stage I began to make a visual diagram of the app so that the developers could understand. You can check out some of my sketches and screen flow below. The app is currently in development and slated for an October release.

Introduction

The Exercise

Introduction

The Project

Introduction

The Project

Introduction

The Project

Orange Consulting has been doing business for years and it came time to update their ancient website to represent who they are. They approached me to conduct analysis on how to get across the most important information to the users. They also wanted to keep the professional integrity of the brand but at the same time give it a very modern look to it. This required hours of research and many mock ups before this was decided on. Once Orange Lion Consulting approved of the prototype I began the front end development which consisted primarily of HTML, CSS, Jquery. The project was completed and the customer couldn't be happier as to how it turned out.

Introduction

The Project

We were approached to complete a Conference website for Bayyinah Institute. The client had already determined the functional requirements and had the content in hand.

I primarily designed the website, graphics, promotional material etc as well as aided in the front-end HTML and CSS of the website. The colors were chosen to give a very bold/distinguished look because it was their first conference. Worked very closely with the client and provided many mock-ups before going with this design.

Introduction

The Project

This project was to take a widely used book (used for prayers/supplications) and fit everything we could into an app version. Not only did we want to do this but we also wanted to increase the functionality of it. Started out at the drawing board and moved on up. The way the book was structured was there were over 200 prayers but in no specific order or flow. Listed out all of the prayers and them broke them into categories, eventually breaking the original ~250 prayers into 15 main categories. From here, made a few mockups of a user interface that would essentially work given the iPhone's screen size.

The Goal

The goal was that the user can find whichever prayer they are looking for within seconds and with a very limited number amount of taps to get there. The way it was designed was just that, as soon as the application is opened, you will notice the 15 category icons displayed vertically to fit to ensure the most number of categories on the screen at a given time. once a user taps on the category, they now have limited the 250+ supplications to about 15. Alternatively, the user can avoid all that might using the search that is located at the top, so they can instantly find what they are looking for. Including, audio support, social media sharing, language options, font options, and many more features.

Introduction

The Project

A client reach out to us in regards to making a personal scheduling app jam-packed with features without taking away from its aesthetic appeal. I was contacted by the client to do some information visualization and rapid prototyping. So without any hesitation, I got right to it, dissected the functional requirements and made a few mockups.

The Client was elated with the final UI design iteration and decided to move forward with development with this design. I will also be aiding in the testing of the beta before it is released publicly. This was designed for the iPad 3 resolution (2048x1536). Hopefully, this app comes out sooner than later. :)

My Responsibilities

1. Formulating mock-ups and information flow
2. Involved with wire framing
3. Designing the User Interface and visuals throughout the app
4. Heavy usage of Photoshop/Illustrator

Introduction

The Project

Working with 'Simplified' was a unique and enriching experience. The project had many challenges because the goal of the project was essentially we want this app to do everything. And so I took that into consideration when designing the optimal user interface for the end-user. Made many prototypes and concepts before finalizing on this design. This company was a start-up so they wanted to make sure to hit the app store with a bang.

Researched each social media website to see the features they offered to ensure that the design takes that into account when making the overall design. The app is well into development and should be available in the fall of 2012 (from the last I've heard).

Also, I was asked to design their website and promotional material.

Introduction

The Project

I was requested to develop an app website to accompany the design of the app which I did. I created a website that was straightforward but gave the feeling of professionalism. Given that this app deals with sensitive data, I took an approach that would comfort any user that visits their website. I constructed the graphics as well as coded it in HTML5, CSS, and JS. In addition, I incorporated Responsive Design so it looks beautiful on any device.

Introduction

The Project

In my spare time, I usually sketch out any ideas that come to my mind. This idea of a mobile keychain charger that is the size of a key fob came to me and I had to make it into a reality. I started by sketching a few mockups and then right went into Illustrator and Photoshop. I designed a final product so when I was submitting my proposal for critique (on Quirky), I received an overwhelmingly positive response. Because the audience was able to see how the end project could potentially look like, they were more receptive of the idea and its potential.

Introduction

The Project

Before I completed this website, there was a prior version. Although it was 'pretty', the way it was designed would not accommodate my growing needs of showcasing my work and talking about it. So learning from the drawbacks of the first version, I set my sights on creating a better experience that incorporated responsive design. The 3 areas I wanted to focus on was: About Me :), My Work, and My Contact Info…and so this current design is a blend of all three without the clutter.

Introduction

The Project

I was approached by a small group of individuals that were given the opportunity of a lifetime. They were allowed to compete in an 'incubator' program. Basically, this allows them to come up with an idea, draft a proposal, and even get a beta demo running. They came to me seeking assistance in doing the user interface for their application idea. The concept was very similar to group on and other 'Deal-Offering' companies with a few twists in the implementation. Long story short, their idea was to make it more personal to each user and much more relevant. The task was certainly exciting and learned a lot by researching the competition and design trends in that market. I enjoyed working with them and hope them the best. UPDATE:They passed the first round of presentations and demos!!!

Introduction

The Project

Contacted to make a sophisticated icon design for a watch.

Introduction

The Project

Contacted to do a poster for a conference geared towards the youth and the choices that they make.

Introduction

I always wanted to go to Japan but just never got the chance. So I photoshop'd the environment and put myself there as well. :)

Introduction

The Project

Contacted to make a visual poster for an annual conference, this conference had 30,000 attendees

Introduction

The Project

This project was a logo design for an organization named Noor located in Orlando Florida. The arabic word 'Noor' means light, and so I wanted to combine the colors, style and meaning of Florida & Noor into the logo design.

Introduction

The Project

Here is the accompanying icon design for the Supplications App. It is modeled after the Kaaba(located in Makkah), which is the central direction of worship for Muslims.

Introduction

The Project

Contacted to do a poster about spirituality and so incorporated elements to reflect the mood of serenity.

Introduction

The Project

Contacted to do some poster art for a Night Program being held at MCMC.

Introduction

The Project

Contacted to make a poster for a seminar that was being offered on stories of the past. I took a few of the stories and showcased them in the poster.

Introduction

The Project

Contacted to the poster for a seminar they were holding on the Role Models of the Great Men/Women of the past. I wanted to portray that and following in their footsteps to reach new personal heights.

Introduction

The Project

Designed a wallpaper for Desktops and Mobile devices that was featured in the Smashing Magazine monthly wallpaper contest.

Introduction

The Project

A seminar on time management and how to control your time.

Introduction

The Project

Personal experiment in visual design and branding using Photoshop & Illustrator.

Introduction

Tje Project

Personal experiment in visual design and branding using Photoshop, Lightroom, & Illustrator.