Globie.net

This is the website for one of the Obie Technologies applications. I worked on and pitched the UX wireframe, UI design, icon design, motion design for the responsive web design. It includes launch screen with explanation of how app works, FAQ and tutorial links, download page, Globie Out rates and plan purchase, rates look up, and promotional giveaway guideline and requirements worked up with Globie partners.

It is made to look fun and lively while maintaining a modern sleek interface and friendly centric navigation.

Eye-tracking is constantly monitored by development end software to gather useful insights and then I would rethink designs and make improvements to increase user engagements when new features are implemented.

Sitemap

Site map is the first thing I worked on to pitch the idea and design flow of the Globie website. It includes all the necessary components of what the site needs. It is crafted based on multiple user scenarios, 3-click-rule is in use here, that lets user to navigate to anything they need in the site within 3 clicks make everything on the site simple and easy to find. Call to action is promptly displayed on the homepage to sign up for Globie app with information and illustration that helps users to understand globie app usage provides a pleasant on-boarding experience for even user with no technological background.

SKETCHING

Sketching is an important design process that allows me to quickly put down layout ideas I have, and quickly chose ideal interface for the website. In this case, this was done and presented at the same time as sitemap.

Font Usage

Measurements and Design Guideline

The measurements are carefully crafted in absolute precision in pixels using the Sketch app and then exported onto Zeplin along to developers. Zeplin tells the developer everything they need to know about the design including measurements, font choices, color usage, icon size, and it even allows developer to download image assets and copy and modify an autogenerated CSS and HTML codes for faster development process. However I always include an exported asset folder and design guide along with my designs as well, just in case, Zeplin is there for convenience and faster look up, but the design guide is there for absolute certainty when there are questions about the design.

Illustrations

Banners

Others

Prototyping and MOTION DESIGN

Motion design is the final but perhaps an equally important aspect of web design. I use principle for mac to create interactive final design that developer can play with along with video export that tells them how each interaction looks like and how long an animation should take.

In globie.net, both realtime and non-realtime animations are used to make the site look fluid and friendly to use.

Realtime animation includes mouse over effects, parallax scrolling, and non-realtime animation includes easing and and click effects, and page loading animation to allow the illusion of fast loading speed when an image is taking some time to load in with slow internet connection.

Presented below are example of the parallax effect used on the homepage to create a fun interaction for user while the site demonstrates globie app’s value.

Edit: The page has not been renewed since the company shut down; it cannot be viewed at Globie.net anymore.