WHAT IS COSMOBODY APP?
CosmoBody is an iOS Tablet + Smartphone subscription-based fitness video service that brings you strength, cardio, new yoga, and dance workouts from celebrity trainers.
WHO IS IT FOR?
It is for people who like working out but don't have the time to attend a gym. Users have access to professional workout videos, challenges, trainers advice.
Wireframes + IA were in place.
MAIN PROBLEMS TO SOLVE:
• Define a modular system to give the app structure + achieve internal design consistency
• Craft the look + feel of interface (many modules)
DESIGN PROBLEMS I SOLVED:
PROBLEM: The app content is dynamic. (Workout videos refresh daily). We need a flexible design system.
MY SOLUTION: A card-style design that is attractive and very practical.
Why this UI pattern? Because the card is a small container that allows me to present a beautiful image of our workouts along with one line or 2 of copy with a strong cta.
PROBLEM: We will design a lot of modules (Hero, Editor's Pick, Motivational, Branding-Related, etc.) How do we achieve consistency?
MY SOLUTION: Let's create a design system and organize modules by category + hierarchy. Ex: Hero module will only appear on a landing page and will expand full width. It can only present 4 elements: An image to the right, an eyebrow, title, and a max count of characters for copy deck.
PROBLEM: What's the rationale for establishing the visual treatment of modules/overall look and feel of app?
MY SOLUTION: Look and feel should be coherent with Cosmopolitan Magazine brand attributes: Bold + Sexy combined with elegant typography
We have beautiful licensed photography of the trainers who convey the active style that our audience loves. So let's propose an image-driven app. We should stay away from using embedded fonts and use only system fonts. Follow the Cosmopolitan Style Guide and use Fuchsia as primary color but combine it with black for a contrast and elegance.
PROBLEM: How can we give the app visual structure?
MY SOLUTION: With a grid system we can create any number of columns that will accommodate all the modules and will make it easier for people to navigate and find content. The grid will also allow me to quickly add or delete elements without breaking up design.
I had the opportunity to craft the interface for Citibank mobile app (android & Ios). The sketches here show my design methodology. I start by sketching on whiteboard or paper the initial user flows and IA for a Citibank app feature. They illustrate part of my collaborative design process with copywriters, UX's, and Creative Director.
These designs are part of "Lock your Card" " project for iOs and Android.
• Lead the look & feel of new features such as "Lock your card", "Track your New Card", and "Setting Up Profile & Preferences".
• Lead and advocate for doing solid interface & modern interaction models research before executing.
• Design not just one but multiple design solutions to solve interface problems.
• Follow & push the Citibank Design Language
• Solid knowledge of iOs & Android UI kits
• Participate/Present design reviews internally to team and product owners.
• Establish a team efficiency by introducing Zeplin to Creative Director & Developers.
• Challenge UX & IA to improve overall user experience.
• Involved in the Agile Methodology to achieve team efficiency by having daily stand ups & "scrum" boards.
• Collaborate & support UX team by concepting and sketching user flows, entry points, and light site/app architecture.
• Helped formalized a design process by having internal design reviews,
sitting down with my copywriter to align designs with messaging, updating project manager on design request from stakeholders.
• Led and foster a design culture within the team by scheduling and leading weekly design inspiration meeting.
• Introduced an efficiency by using ZEPLIN to submit design specs to developers. (see last 3 slides)
Credit: Joe Jennings + Brooke Halls
CITIBANK RESPONSIVE SITE REDESIGN
In collaboration with Art Director I generated ideas for how to best adapt the browser layout for the mobile experience.
Techniques used for RD:
• We had a multi-column layout with a fluid grid for browser which allowed the content to scale and fit on smaller mobile screens & stacks the columns vertically
• I carefully cropped the background images without loosing their concept and made sure the overlapping elements (logo, heading, cta) would still fit, breathe, and be very legible.
• The "Calculate your rate" module had input fields. From usability standpoint I optimized and made them big enough to be tapped.
USER INTERFACE RESEARCH: MOBILE FORMS USABILITY
• I know filling out forms on smartphones is not easy for users. That's why I did usability research and reconfirmed: find a way to minimize the number of fields or use a slider ui (prices/budgets) to give people control over their actions.
Followed and evolved Citibank design language
WHAT IS THIS PROJECT?
• It is a native ios app called Cosmobody. It is a video subscription-based app that shows you great fitness, yoga, and dance workouts done by professional trainers.
• Solve interface problems for this ios app
• Apply mobile usability principles as I design
• Propose primary and secondary navigation systems for mobile
• Familiarize with video controls for mobile
• Work along photography editor to define best imagery
• Design look and feel of confirmation pages
• Met with BA print magazine team to discuss brief, explore the challenges and goals of the site.
• We discussed current site architecture and branding.
• Defined full scope and vision of the project.
• Content Strategy was developed with BA editors and our lead IA.
• User stories that defined what we want the user to accomplish/tasks when navigating the site.
WHAT PROBLEMS ARE WE SOLVING?
How do we convey that BA is not just a "site for recipes" but a space for culture and food?
Content strategy along with BA editors suggested interesting content such as entertaining + style, people, events, etc.
On high level pages such the Article page, how do keep users engaged even after they have read the article? What design/Ui tactics can we use?
• Placed 3 beautiful images inside article.
• Placed a Related Articles module.
• We explore placing the Search bar both at the top & bottom of screen.
• Placed Sponsored content module.
• Added a 'Write a comment about article".
WHAT ARE WE ASSUMING?
• From design standpoint, do I need to design components that will be fed by a third-party(Outbrain)?
MY DESIGN METHODOLOGY
• Mood boards suggesting a visual direction.
• Typography Research
• UI Research: rotators, t-rails, text content modules, grid-style recipe, marketing banners
• Low fidelity wiresframes for home page and recipe page.
The assignment was to optimize the Bon Appétit magazine website for mobile devices. I began pencil sketching layouts for homepage keeping in mind client would keep the same content from the desktop version. By doing this, I realized that some content such as Popular Recipes could work nicely in a 2-column, but other features that contained text and images worked in a 1-column. Also, eliminated unnecessary graphics for faster loading, left enought white space between features, and improved readability by increasing headings/body copy font sizes, and clickable areas.
Showed to the right: Homepage sketches wireframe, interface for homepage, recipe page, and article page with rotator.
USE OF TECHNOLOGY:
Photoshop and Illustrator
A mobile game for iOS, Android, and windows 8 targetted at teenage girls. Players make a runway roundtrip without tripping, losing balance or taking the ultimate spill. Advance by earning achievements, dodging obstacles and banking bling.
• 3-D graphics with simple tilt, acceleration, and swipe gesturing
• Variety of 3D characters with signature story vignettes, and sounds.
• Game Center Leaderboards, Achievements, and Power-ups.
• Purchase character packs and ringtones and game wallpapers.
USE OF TECHNOLOGY:
Photoshop and Illustrator
OVERVIEW: Condé Nast's internal campaign to promote their online video channels showcasing fashion, food,wine, andbeauty. Banners displayed across CN's brands.
• Worked along with Product Manager and Creative Director for conceptualization.
• Designed iconography and visual presentation for all banners
• Proposed banner formats for both desktop and mobile formats
• Prepared production-ready files for outside developers.
TECHNOLOGY AND DESIGN:
html, css, jquery, illustrator
A fun way for parents to create and share a Christmas list with their kids. Parents control the access, can set limits on budgets and decide what item can or can’t be shown. Parents and “Santa” can then send messages of encouragement to children such as reminding them to take out the trash, or telling them if they do well on that spelling test.
As always, I started doing design research. My audience was parents and children so my design direction had to strike a balance and appeal to both. First I examined the aesthetics and best practices of beautifully design kids sites such as PBS and Disney's. Discovered using elements from nature like landscapes, animation, or illustration can be effective with children. After that moved on to using design patterns for forms and considered the Bootstrap frame for efficiency. Proceeded to create wireframes and visual designs for site including parent's list view, children's list view, shopping cart, etc. The site launched succesfully during 2011 Holidays.
Responsible for look and feel, interface design of registry forms, wireframing of some pages, iconography, and print marketing pieces.
USE OF TECHNOLOGY:
Photoshop, Illustrator, HTML and CSS
These are some in-store interactive experiences for Saks Fifth Av.. You will see design comps for large touch-screens, video walls to be located at department store's floors, and a wayfinding kiosk.
• Work along Creative Director in Conceptualization and ui/visual execution of in-store experiences.
• Work collaboratively with 3-D artist to make sure my designs were functional and met screen/kiosks technical specs
• Created animated comps to show basic interactivity and views using html 5(edge animate) and photoshop animated gifts
This is the Bon Appétit branding visual system for web. I was creating it in parallel with my design comps and evolving it as the design process continued. It contains: use of typography, graphic elements, web image sizes, page structures, page templates, button hierarchy, etc.
Vr. is an experience I created for the Upper West Side amateur adult soccer league. A local world cup was organized, where players from fifteen different teams/nationalities formed their own teams and scheduled games on Sundays at a rented field in UWS. Through the website, players were able to get excited and motivated out of seeing and tracking their game performance via personal stats such as goal assists, shots on target, fouls committed, won headers.
USE OF TECHNOLOGY:
Photoshop, Illustrator, php, j-query.
Concept Development, Visual Design, Interface Design, Interaction Design
Sze, an amazing developer who wrote php code and j-query.
DESIGN PROBLEM I SOLVED: How do we make a health insurance website look modern and easy to use?
• Working in collaboration with design team I created quick storyboards to show different visual directions.
• One technique I used to convey a modern feel to this site was using large typography treatments and generous white space.
• Sketched out a few layout solutions keeping content hierarchy in mind. Then shared my layout sketches to teammates, get feedback, and finally execute those designs.
• To establish content hierarchy I carefully thought out what modules needed emphasis. For instance, I knew the Products modules was very important so I proposed we should have a hero image that expands full browser width & then use a two column grid to nicely center align the hero title and small conversation below it. Center aligned layouts create great space on both margins making content look important and let it in breath.
Source Media provides market information including news, analysis, and insights to the financial services.
• Not access to photography
• Old CMS had technology limitations
DESIGN CHALLENGE: About three of their most high-profile websites (American Banker, Wall Street Journal, Financial News) lack design personality & look so outdated. From design standpoint, How do we improve these sites look & feel without doing a full site redesign?
MY DESIGN APPROACH & RECOMMENDATIONS:
• My CD and I agreed that we needed to do incremental enhancement to the styling of each site.
• So first thing I did was a design audit. I took screenshots of high level pages of each site: Homepage, Video page, and Slideshows Page & posted them on wall. This allowed me to easily find stylistic inconsistencies in navigation systems, page titles, article titles, carousels, pagination, iconography, sponsored content modules, and spacing misalignment.
• As I addressed these discrepancies I documented the enhancements in a style guide.
• Some high-level pages needed "some love" in terms of refining the page composition, interaction models, and usability. Ex: The problem with the Article page is that its title, editor's module, and social element are not placed in order of importance. So I designed multiple interfaces to solve for this.
OVERVIEW: Interactive Banner Campaign for Lindt Chocolates. The formats are static and expanded banners.
• I refined the look and feel of the campaign.
• Cleaned up all disorganized psd files left by previous designers who worked on this campaign. So I defined naming conventions for each layer and created layer comps to mimic interactivity and the different views or frames of banners.
• Worked along with Creative Director to create storyboards.
I am an Interactive designer from New York City with a passion for design and technology.
I specialize in designing intuitive user interfaces that translate into good experiences for people interacting with web and mobile devices. No matter if I am designing a mobile app, an e-book, a social widget, or a rich-media ad campaign, usability and interaction design principles must be applied so that people will enjoy interacting with a product.