When asked by best friend to design and print the programs and reception menus for her late summer Newport RI wedding, I couldn't help but feel overjoyed! I loved choosing two very distinct, yet complementary fonts to use consistently throughout both print projects. Wanting to match the feminine, and classic wedding theme that she had curated for her big day, I chose to use a light gray, navy and a rose colored pink.
The results were beautiful - just like the bride :)
Swirl Networks, Inc. is an iBeacon-tech focused company, focused on helping leading retailers, brands and publishers connect with shoppers while they are in the store. I joined the Swirl team as their Visual Designer and immediately took on the mission of polishing the existing brand and overhauling the current company website to communicate the launch of their new product, the Swirl Ad Exchange.
Because Swirl is an exciting startup that is developing a brand new technology poised to completely disrupt the retail shopping industry, I felt that it was important to communicate that excitement! I did so by implementing a vibrant new color scheme, modern web-friendly fonts, simple, yet effective icons and engaging UI transitions.
The website was designed for Swirl clients - retailers, publishers and advertisers and therefore the user experience is focused toward those three specific groups. Clear CTAs drive each group towards important industry-specific information, and the static primary and secondary navigation allow users to access other content at any point during their visit to the site.
ChoiceStream is a fun, vibrant ad tech company that implements audience targeting algorithms to drive ad campaign performance. I joined ChoiceStream fresh out of design school as a part time junior designer, ready to learn and eager to contribute to the marketing team.
Within 5 months, I was asked to join the company full time and work with the Art Director to head up a major brand relaunch within an 8 week time period. I was given a lot of freedom and encouragement from the Art Director to present my designs, sketches and wireframes for the new CS brand and website- a lot of which was ultimately used for the final launch.
Along with rebranding ChoiceStream to reflect the unique, modern and innovative company that it is today, I also supported the marketing and account management teams. I spent a lot of time designing invitations for events, creating one pagers for new products, and updating web pages. My Art Director helped me greatly expand my Flash knowledge, and I began designing and delivering interactive, animated banner ads for our clients.
In 2014 I enrolled in General Assembly's UX Design class. Within the class, we studied the entire UX Design process- from creating user personas to completing usability testing. Within the class, I designed a mobile recipe sharing application called Tastebuds. To download my full presentation, click the link below.
Infographics are one of the best ways to communicate big data. I love tackling big data and breaking it down visually, allowing users to digest complex information quickly and clearly.
Click to view an infographic >
A collection of various logos designed for companies, small start-ups, and fun personal projects.
I was asked to create a product page featuring a banner ad and a detailed product page for a custom-made engagement ring. I was provided with a PSD UI toolkit file (similar to a style guide) in order to complete the project on-brand. Below are the interactions, which correlate with the labeled numbers on the full page view. To view and read the interactions PDF, click here.
1. IDEABOARD icon & link
I made the decision to replace the FAVORITES icon with the new feature, IDEABOARDS. This will be the link that users click to view their own personal boards.
The icon is a lightbulb (which will replace the “How It Works” lightbulb icon) with a tiny heart in the center. Lightbulbs typically represent new and innovative ideas, making it an appropriate icon for the new feature.
2. Promotional Banner Ad
This ad is the promo ad this is displayed to a user that has not yet signed up to CustomMade. It illustrates different phases of the process of designing an engagement ring (sketches, the real deal, and then finally the product on the finger of the person is was intended for), and I chose the background image to communicate the “path/journey” of custom-making a special piece of jewelry.
This is intended to be an animated ad, and the messaging changes in frame 1 to frame 2, since there is too much copy to fit within the 728x90 size. My original JPG shows the first frame, while the interaction JPG shows the second frame. Both have the same CTA, encouraging a user to Join now!
3. Add to Ideaboard Icon & Button (see sketch for better visual)
Since Ideaboard will be a new feature to the website, my first thought is to incorporate a hover feature that explains what the Ideaboard is. When a user hovers over the Button or Icon, a message will appear to the right side, displaying a message such as, “Feeling Inspired? Add this product to your personal Ideaboard!” Once a user begins using the feature, the message could be eliminated.
I added a drop down chevron to the button. When a user clicks “Add to Ideaboard,” a menu drops down, allowing a user to click and add to a board they have already created, or add a new board. (The menu will feature a list of current boards, with checkboxes on the left hand side. To add to a current board, user clicks the checkbox and the product is auto added.) Once a user has made a decision, the menu disappears, and the button will change. The button will then read, “Added to Ideaboard” with a green check that replaces the chevron. The heart in the middle of the icon will also change to pink, and the lightbulb will become a slightly darker gray. (In order to change their board, or undo action, the user would just click the button again, and the menu would appear again, with checkboxes, add new board, and a cancel button.)
4. Thumbnail Interactions
When a user hovers over a thumbnail, a slight opacity appears over the image. When a user clicks, it updates in the main large image.
5. More by this maker (project # listing)
The fourth project by a maker will have slight opacity over the image, and showcase how many other projects the user has featured on their Maker page. This communicates to the user what they can expect to see on the next page, and help set expectations. If there are 4 or less projects, then there is no link.
6. Favorites (see sketch for better visual)
This button allows a user to “Favorite” a project. Once a user clicks this button, the text updates to “Saved to Favorites (X)” with a number (X) that communicates how many other users have also favorited the project. This communicates the popularity of the project, and also adds a social element to the page.
Once a user favorites the item, it automatically is added to a “Favorites” list that is within their Ideaboard page. My idea is that there is a lefthand column list, with thumbnails of the projects a user has favorited, and a user is able to drag and drop items into their specific board categories they have created. (A user can also delete items if they decide they do not want to keep them on their Ideaboard.) This feature allows a user to quickly browse the website, favoriting items, without committing to adding them to a specific board. It allows a user to keep track of projects they have liked, and provides them with the opportunity to return to Ideaboard and organize their content as they please.
I incorporated the heart into the lightbulb icon because FAVORITES will be a part of IDEABOARD.
Once a user favorites a project, the message within the button changes, and the heart turns pink. To undo the action, the user will once again click the button.
7. User name
The user name is a blue link, allowing users to click the user and view their Ideaboard, or potentially follow that user and the projects they are creating. (I would imagine that users could make projects and Ideaboards private if they choose to do so.) If a user does not want to be followed, or does not want others viewing their boards, their name will not be linked, and therefore will appear gray.
In 2012, I joined Northeastern University's IDEA Venture Accelerator Program with a business concept. Working with a coach, I drafted my very first completed business plan for an Eco-Conscious clothing company called Harper Lei.
Along with the written business plan, I developed an identifiable brand for Harper Lei and directed my first ever photoshoot. In order to do this, I put together a few clothing pieces to photograph (using a sewing machine and serger), hired a local photographer and scouted an abandoned attic in Worcester, MA for the shoot location.
The photography was included in my business pitch, which I presented to the board at IDEA and as a result, earned IDEA Gap Funding to continue developing the business.
Harper Lei 2013 summer lookbook
This poster series was a project I completed while a student at CDIA. We were asked to choose objects to photograph, and then create a poster series from our photographs. I purchased the most interesting soaps I could find, deciding to create a faux ad campaign for the cosmetics company LUSH. After smashing the soaps on the pavement, I collected the pieces and arranged them on top of opaque light boxes. The soaps were photographed by a fellow photography student, who did a fanatic job bringing out the beautiful colors within each product.
I completed this project while a student at CDIA. The class was given a Word Doc of specific content (a list of upcoming concerts, dates and descriptions) and asked to create an engaging magazine layout for the "up-coming events."
I decided to source images of each band and artist, and create "polaroids" of each event - connecting the event description to the image with a very thin and subtle white line. This remains to be one of my favorite pieces of work, 4 years later!