Mobile app and experience design for a home IOT device security monitor.
The goal is to create a user experience that is simple and removes the complexity surrounding device security. Dojo is personified and presented as a conversational app that guides the user from on-boarding, notifications and monitoring. It learns overtime and communicates only when needed — it is an app designed to not be used (often).
Iconography is an essential design feature for quick understanding at what's happening in the home. The ripple UI on the Pebble and app is an extension of the physical product.
By designing a holistic user experience from the layers of notification, app interaction and physical UI, Dojo stands out with a human voice in the world of complex IoT market.
A conversational app that talks to you and let you know if your home IOT data is secure
The Ripple UI is designed to compliment iconography of connected home devices.
But dissecting the Ripple UI, the icons in the app are designed to represent "All Good", "Alert" and "Attention" that can be easily understood by the user. A deliberate but simple color scheme inspired by traffic lights (good, watch out, stop) provides a bold color palette.
Designing the product experience and interaction for a home network security product. Developing the product vernacular that spans the industrial and visual design. The idea is to have a strong, yet quiet product that can live in the home. It gives a zen and at peace feeling when you know that your personal data is safe. The ripple UI is displayed on the device and app to show different levels of alert.
User Interaction Map
Mapping the product flow and customer touch points
Designing the user flow from on-boarding to usability overtime.
Low-fi partis visualizing the setup and use flow. This allows the client and the team to understand the high-level interaction and product touchpoints.
Play Impossible is the ultimate convergent of physical and digital. Magical play is unlocked when the sensor-packed gameball is connected to the digital app. Through the app, players can pick different games and have a platform to play, hear sound effects (bomb explosion, water splashing etc.), and keep score.
The digital experience bridges the gap of video games and physical play. Designed to be used in proximity, the UI is deliberately bold and simple: with legible bright colors and big, simple text. The UX is design to respond quickly to the users physical play with the ball, and to give feedback on what the sensors.
It's a really fun product and a fun project on creating the voice of the brand to be whimsical, fresh and innovative.
Where technology meets physical: digital game injected into ball-play.
Now available at the Apple Store
Where digital and physical meets
The digital app is directly connected to the gameball via bluetooth. During our research phase, we observed that as soon as someone holds the ball, they can't help but start juggling and playing with it. With that in mind, we built the experience with the ball as the controller (you want to toss it around, so use it to start the game!).
As users toss the ball, they are guided by the simple and bold UI from the app screen. Creating an immersive game play calls to take the complexity out of a fun experience.
UX - Product architecture
Exploring the product architecture for digital app and physical gameball.
Framework of the game app experience.
Iconography thats simple and staying within the geometric brand vocabulary.
Serena & Lily
Visual design for Serena & Lily digital marketing campaign. Creating dynamic email designs for seasonal promotion, animation for social outreach through Facebook Canvas and print collateral for store events.
A whimsical animated gif keeps the email design short and simple.
Letting the shapes and pattern of the beautiful rugs shine on its own, the design keeps the email from feeling too static.
An animated swatch list to quickly highlight a few of the season's favourites.
Designing the visual language and modular template layout for blog post designs.
Telling a story with beautiful imagery of location, featured products, social events and typography, each blog post showcase a unique side of Serena & Lily.
Creating a dynamic layout with hero and product shots, combined with elegant typographic treatment.
Facebook Canvas Animation
After Effects animation featuring simple and elegant typographic treatment.
Facebook Canvas Animation
Serena & Lily Event Collateral
Signage and hangtag designs featuring a bedding pattern.
Room.co UI/UX Design
Lead the ideation, visual design and development of the private beta of Room.co, a simplified video chat platform. Room is designed to take you to a video "room" with just one-click, standing out from any other video platform on the market.
Designed out of a hack week project at Spreecast, the product kept to its fun beginnings from experimenting with custom-shaped dropdown menus, rotating homepage backgrounds featuring local artists, and a sleek and transparent UI.
Designing the site homepage that supports a rotating roster of background images. The visual design needed to be simple yet stand out against any kind of imagery that gets displayed.
We worked to connect artists and designers to showcase their work and show something unique instead of stock images.
Saved Room List
Designing the UI for the saved room list. Working closely with engineers to design to iterate and refine the user experience. The final interaction and transitions to allow users to collapse the chat panels and have a light visual impact.
Wireframes - Initial Concept
The initial way how users can get into Room would be through a landing page. As the first time user experience, user will go through a tutorial. After iterations and to align the product with the mission to simplify video chat, the decision is to simplify the experience. The FTUX will let users jump right in to the experience - a light layer of guides/tips will fade in at key moments.
Wireframe - Login
Initially, user is taken from the normal chat platform userflow and had to log in as a user or a guest to join a room. The goal is to get user start/join a chat within 1 or 2 steps. So, to simplify the UX, the extraneous steps are taken down. User can simply click on a (shared) url and be taken straight into a room.
One click, and you are there!
Initial architecture of Room
Initial Visual Design Concept
Wireframing the chat experience with a light layer of UI. After a few rounds of iteration the site was distilled into a simple "2-page" experience: Home and Chat page.
Spreecast Mobile App
Spreecast mobile app redesign
A redesign of the Spreecast mobile app for the web experience to be translated seamlessly to mobile. The previous design has a black background and very dark, this design brightens the user's experience and makes it easier to navigate. The homepage is broken up into sections highlighting live, archive and upcoming events. Users can RSVP for an event simply by swiping on the event tile from the homepage.
Creating the wireframes to map out the mobile experience framework.
CONCEPT AND CREATING WIREFRAMES OF THE MOBILE WEB HOMEPAGE EXPERIENCE. THE GOAL IS TO IMPROVE THE ABILITY FOR USERS TO BE NOTIFIED OR SHARE AN EVENT EVEN WHEN THEY ARE ON-THE-GO.
IMPROVING THE MOBILE EXPERIENCE IF THE USER DOESN'T HAVE THE SPREECAST APP.
Spreecast.com & collateral
Spreecast was a great social video platform that was going through a facelift redesign while not wanting to overhaul the site for an abrupt change for users. The goal was to work within a framework and improve the visual and user experience in phases. The dark and crowded UI was stripped down to a clean and more polished design. To improve retention and engagement, we surfaced related/recommended content on-site.
For off-site user engagement, we launched weekly reminder emails to get users back to the events they expressed interests in. We also designed templates that would recommend other users/content creators to follow; increasing number of follows and engagement on site.
The continuation of user engagement campaigns successfully increased the metrics since the facelift.
Exploration to update the existing main navigation. Worked with engineers to create quick implementation on the site for user testing. The final design complimented the existing header, revealing a big dropdown menu that showcased the same title art and video information consistent with the rest of the site.
This allowed a great moment to showcase the new feature and let users know of the new update with a bold dropdown where the new menu dropdown would be.
Spreecast Curtain page
For new visitors, the landing page is a great sneak peak into what the site offers once they sign up for the platform. The previous curtain page only list out features and links off to separate pages for Media Partners or Content Creators. With the new design, visitors can jump right in to explore, or read about all the features and benefits to using Spreecast.
Common Sense Media
Common Sense Media site redesign
Common Sense Media is a nonprofit advocating for better media choices for kids. The mission is to help parents find great media for their kids; things that are age-appropriate but still fun to watch, play, read, and do.
Common Sense Media iPhone app
Common Sense Media iPhone app
Media reviews on-the-go. Developing iconography for the iPhone and iTunes store for a clean and efficient browsing experience for parents' who needs to make quick decisions.