Amber Waves is a farm in Long Island, NY that sells produce to restaurants in New York City. They also supply their on-site market and restaurant. Although business is great, they had issues with their wholesale ordering process. In the past, ordering was done manually via texting and email. Despite having recently built an online wholesale ordering platform, clients kept texting and emailing, causing business challenges for both parties. I help them rethink their wholesale ordering process and redesign their app to optimize efficiency (while reducing the amount of manual orders).
Amber Waves wanted all of their orders to go through the app so that they are processed uniformly. The app is only used by clients they already have a relationship with, they decided that product content and promotions weren’t a priority.
IMPORTANT NOTE: You can't pay through the app. Amber Waves sends an invoice with the fulfilled order and payment is collected at delivery and pickup. While I urged them to consider a payment feature, at the time they felt that their current size made it a less important challenge to solve.
Isabel is responsible for reviewing and fulfilling orders through the app. The farm has 6-7 main wholesale clients, and a few fringe customers who only place orders from time to time. Almost all of their clients are restaurants. Some order 1-2 times a week, but the main clients order up to 7 times a week, and while her customers use the app to place orders, the bulk of her coordination efforts are still made through texting and emailing.
She organizes all of her texts and emails into an order list to hand off to her field crew, and because the team harvests from 3 different fields, it’s critical that orders are accurate and clear. Having the crew go back to fulfill a missing item would waste a lot of time.
When I asked her if she thinks the app should be completely redesigned, she backed away a little, telling me that the backend system they have in place is very effective, and she wouldn't want to change it too much for fear of having to retrain her staff. “Perhaps some smaller tweaks,” she suggested.
Jack runs the on-site restaurant at the farm and is one of Isabel’s “main” customers. His kitchen uses places pantry orders twice a week (onions, garlic, lemons, etc.) and daily orders 7 times a week for menu items and specials to ensure freshness.
Talking me through the process, Jack told me that he is constantly keeping track of stock as he’s walking around the kitchen. He usually writes it down on a big chalk board that he and his staff updates whenever they notice that they are running low on items. At the end of the night he reviews the board and makes an order on the app. Sometimes, however, he runs really close to the 10pm order cut off, so in those cases he texts Isabel. Other times, he places an order and texts her to add notes and substitution requests. He admitted that sometimes it’s easier to text her directly if he needs really specific items, such as an items in a single color, or smaller/larger sized items.
Based on my interviews, and reading over the kinds of emails and texts at Isabel receives every night, it became clear to me that while some users were placing orders through the app, they often had special requests that they needed to text the farm about. Because their app didn’t have customization or note features, users felt less confident that their order would be accurate, and stopped using it, especially when getting close to the cut-off.
Taking all this into consideration, how might we redesign the app so that users can add customization for specific items they need, while not changing the experience so much that they and the Amber Waves staff would have to be onboarded again, improving efficiency for both parties?
I created a persona with an ideal user flow for placing an order on the app. Then, I sketched out some features that could support both user and business goals. Ultimately, I chose to focus on prioritizing a reorder feature and a customization feature in the product description page. Not only would these improve ordering speed for regular/pantry items, but also provide users with confidence that their placed orders are accurate. This in turn would encourage them to use the app more, consolidating orders through a single channel to improve efficiency for Amber Waves.
I provided a few ideas on how to redesign the three pages, and sketched them out for the team to review. As I moved on to wire frames, I made some adjustments to these features. Above are examples lo-fi comps I made for the Shop Page, PDP, and Cart.
The ‘Order Again’ section not only features items that they’ve ordered in the past, but also displays the amount they ordered as well as prices. The horizontal scroll means that minimal vertical space is lost.
I decided to cut down on scrolling by listing products in 2 columns. This will make it easier for users to quickly scan for the items they need.
Users can click into the product to make special requests, or add to cart directly on this page.
‘Special Requests’ lets users make specific requests for a more accurate order. Users can add notes to the farm.
The ‘Substitutions’ section has been simplified. Rather than having a field for users to write notes, there is a simple choice - contact the user, or cancel the item.
The ‘Special Requests’ and ‘Substitutions’ sections are open by default.
Items in the cart are displayed neatly with ‘Special Requests’ and “Substitutions’ info.
Contact information in case there is a question or issue about the order.
Initial user testing returned positive results. Chefs were able to place an order with special requests and notes without having to text Isabel. So far they have not run into issues with inventory or botched orders, though we'd like to gather more user data over the next few weeks before recommending improvements.
Obviously, some chefs have developed a close business relationship with Isabel, and will still order through her despite having a more efficient app. How might we encourage them to use the app? Would faster ordering or an “Add to my order” feature be a solution? Or would it take a more personal experience to get them to use the app?
As the business grows, how will the platform scale? What would it look like with 50% more items (especially if the farm decides to itemize color, size, etc)?
Design Buddies is an inclusive community of 30,000+ designers from around the world, to learn, hang out, and meet peers. It doesn’t cost anything to join and is open to anyone. It's a great place to get quick advice and feedback from other designers and peers via chat, but there is a growing demand within the community for members to find expert mentors “on demand” to answer more specific questions in detail. So, they built a separate app called Mentor Buddies, where members can find an expert to chat with in 15-minute private sessions in exchange for donating to the mentor’s chosen charity.
However, early beta testing revealed that although interest was high, the number of users who actually signed up for sessions were underwhelming. Their product team brought me on to help them make improvements to their onboarding process to increase conversions.
Reviewing their onboarding process for the first time, a few things really stood out to me. I thought the topic choices were too broad and the level of commitment was very forward heavy, such as creating a profile or verifying a phone number. Though the mentor profile was helpful, it didn’t share anything about their personality or include any sort of user rating system.
Despite enthusiasm from the community, Mentor Buddies hasn’t seen a lot of engagement. When I asked Grace why, she gave a few really good reasons to dig deeper into. She didn’t think the initial onboarding screen asked enough questions, so users would fear that the system wouldn’t match them with an appropriate mentor. Then, when they got to the mentor list, there were too many choices, leading to decision fatigue and a sense that it wasn’t personalized enough.
Of the ones who did chat with mentors, they had very positive feedback about their experience, and some even wanted to sign up for more sessions or longer sessions. The idea worked, but how do we get more people to sign up for their first session?
I asked the product team for access to their data and analytics, including task completion rate vs. drop off rate, and heat maps. The data confirmed a few assumptions I had, especially that the most drop-offs occurred during profile creation.
The team ran usability tests with a few participants, and I worked with them to help organize their feedback into an affinity map. Although it was immensely helpful to have specific comments for each screen, our map helped expose the larger problems users were having with the onboarding process, namely that there are not enough topics which makes search results too broad, profile creation happens too early, and that there is not enough information about the mentor on their profile page to commit to a session.
It became clear that the users, who were already skeptical of limited topics to choose from and the early profile creation task, didn’t feel confident that the mentors in their results would be helpful. We knew that even those who were highly motivated to find a mentor were ultimately discouraged by the lack of information on the mentor’s profile page as well.
Therefore, we set out to reorder the onboarding process to make it easier for users to find matches, and redesign the screens that were most problematic, starting with the topics screen, match list screen, and profile screen.
We decided to place the profile creation and verify phone screens at the end of the flow, so that users would have a chance to view mentors going through the work of setting up an account. They would be more likely to create a profile if they’ve reached this stage.
I provided a few ideas on how to redesign the three pages, and sketched them out for the team to review. As I moved on to wire frames, I made some adjustments to these features. Above are examples lo-fi comps I made for the Shop Page, PDP, and Cart.
We broke topic selections down to several screens in order to refine the user's interests and match them with better mentors. We used visuals as well as copy to guide users through the entire process.
Many users felt overwhelmed with choices, so we decided to give their matches some visual hierarchy. The first (and most closely) matched has her profile preview open by default, while the others has theirs closed. We also added filters for easy searching.
For the open preview, we will show the mentor’s user ratings, number of people she’s currently mentoring, a brief profile statement, and a her expertise. Users can “Chat Now” or “View Profile”.
“Matched Interests” assure users that they matched with the right mentor.
Mentor profile gives users idea of her’s professional achievements and a peek into her personality. This is critical for an effective and enjoyable session.
Reviews are now a horizontal scroll to cut down on vertical space, though users can opt to see all reviews at once.
The “Donate” section remains the same, but the CTA changed to “Create Profile and Start Chat.”
Once the user requests a chat, they will be taken through profile creation, where they'll be asked for basic information, then to verify their phone number and enter payment info. Once that is complete they will be taken to the chat.
In limited testing, the results showed great improvement on drop off rates. We are currently talking to development to see how long it will take to implement these changes, but the Mentor Buddies team is very eager to work with me again to help further optimize their onboarding process and to help modify and improve the rest of their app.
Northwestern Mutual, a financial services company, needed to overhaul their “Find an Financial Advisor” workflow on their website to not only match their new rebrand aesthetic, but make it more user-friendly and modern. For this project I worked closely with product managers, engineering, and marketing to revamp this feature.
Observing the friction between different teams while working on past projects, I recommended that a developer from engineering should be present at our kick-off meeting. While some stakeholders thought it was not necessary, I eventually convinced them that looping in development at this stage would reduce production time in the future since they can provide insight on our ideas and solutions. This strategy would prove to be critical to this project's success in meeting its deadline.
Among other insurance companies, most do not have elegant forms to draw inspiration from. However, my team and I really loved the Oscar Health’s policy match form for its simplicity and sleekness. The form presents one question at a time, though they keep it short at four (very basic) questions so as to not overwhelm their users. We also liked how your previous answers are grayed out so you can see your information.
I presented a few options to stakeholders, who eventually chose the one below. While almost everyone liked Oscar’s policy match flow, we ultimately decided on a layout that displays all the questions at once, since matching with a financial advisor would require more information from the user.
However, we did decide to feature one question on the landing page which has a drop down menu. We felt that the user’s goal was the single most important data point for this tool and wanted to highlight it accordingly. We also went with a drop down rather than a free type form to accommodate for the database we were working with.
To make the form more friendly and conversational, we laid it out as a paragraph.
I provided a few ideas on how to redesign the three pages, and sketched them out for the team to review. As I moved on to wire frames, I made some adjustments to these features. Above are examples lo-fi comps I made for the Shop Page, PDP, and Cart.
The page hero includes instructions broken down into 3 steps for users.
Users start with a single question - the most important question. After selecting an option from the drop down, users are then presented with 7 more questions as a friendly 'fill-in-the-blank' statement or "Mad Libs" format.
With the engineering team present from the start, handing off was simpler than ever. The feature launched a few weeks after the new branding was introduced, and provided Northwestern Mutual's customers with a more approachable way to find an advisor for their biggest financial goals.
Burt’s Bees, a beauty and skincare brand under The Clorox Company’s portfolio, launched a new product line in Fall 2020 based around an exciting (and controversial) ingredient - Cannabidiol, otherwise known as CBD. I was hired to lead the design of their digital launch, working closely with marketing, UX, product, and development to tell their story in a fun, yet tasteful, way.
There were many things to consider about CBD. As a by-product of marijuana, members of our team had varying feelings about it (imagine the diversity of opinions among their customers!). While recent legislation to legalize marijuana has made the drug more accepted in American society, there was not doubt that the success of their product hangs in the balance of how we portray CBD.
After many brainstorming sessions with the rest of the team, we realized that in a saturated CBD space, Burt’s Bees’ name and reputation would be the biggest selling point. In order to win over their loyal customers, we needed to talk about CBD in the same way we talk about their other products - positive, approachable, socially and environmentally responsible, and all natural. Rather than avoiding its relationship to marijuana, we decided to be honest and feature it throughout our creative assets. However, we also wanted to be educators and inform audiences that CBD contains no psychoactive properties and is not only safe to use, but also an important component of a beauty and wellness regiment.
After we established our messaging, it was time to moodboard. Reviewing how competitors were talking about CBD, I came up with a few directions. The team chose these to talk about sourcing, application, and product.
One of the first tasks we completed was developing a site map to help in our presentations and also to help organize our thoughts, process, and priorities.
The product team already had general ideas about layout and customer journey, but I was thrilled to help them create wireframes. Below are some of our early iterations that we felt comfortable sharing with other teams. Although e-commerce sites typically follow broad rules and design patterns, it was important to be more precise with smaller details.
After a few rounds of design critique and iterations, we made some notable departures. For example, in the Shop All page was completely rethought, as marketing and product felt that the current layout was too generic. In reworking this page, I found an opportunity here to have some fun with layout, and decided to make this page look more editorial, like a beauty magazine. This would accommodate concerns that the page was too drab, as well as provide another chance to talk more about CBD and our product line, reassuring customers about CBD's benefits.
I provided a few ideas on how to redesign the three pages, and sketched them out for the team to review. As I moved on to wire frames, I made some adjustments to these features. Above are examples lo-fi comps I made for the Shop Page, PDP, and Cart.
For Burt’s Bees, web accessibility is of the utmost importance. During our weekly internal design critique, the product team looked at my work and made sure that my designs were ADA compliant. Although I always design with accessibility in mind, some critical points were brought up in these meetings, such as mobile font sizes, call-to-action colors, and line-height. It’s easy to overlook these details at the early stages of design but I was thankful to have a team that was sensitive and inclusive.
Once we got sign-off, I worked with the copy writer to coordinate content for each page, and our art director, who was managing both the product and on-location photoshoots. To meet our aggressive launch date, it was important for us to work in lock step to ensure that we would deliver everything to our engineers on time.
Replaced the overlapping product shots in the hero with a lineup of our products.
Vertical tab module that explains the benefits of CBD.
Shopping module that took users to the product page.
Blurbs that talk about product application gives this page an editorial feel.
The products are organized with a skincare routine in mind: "Head-to-toe CBD Goodness."
Instead of hiding additional information behind a tab module, we decided to lay it out. Though initially we thought this would create clutter for users, we wanted to be more upfront with information like ingredients.
HCL Software wanted to encourage Lotus Notes users to switch over to their modern platform, Volt MX Go. The audience for this campaign was small, and we needed to be very focused. The message to those who were still holding out:
Migrate your aging Lotus Notes apps and transform them into engaging, modern web and mobile experiences without the risk or cost of rebuilding.
Given the short time frame of this project (4-6 weeks total) and limited resources we had to move fast. After the kick off call I got straight work with developing concepts, while also working with the team on user flows and copy ideas with our content writer.
Surveys showed that many of the remaining Lotus Notes users left did not actually have great things to say about the decades-old program. Go figure. Most of the feedback gathered revealed that developers and IT professionals felt that they were trapped in the Lotus Notes environment, unable to migrate their apps to a modern platform. The triple threat of time, cost, and ability meant that they were stuck. This informed me during the brainstorming phase.
We determined that most users will be directed to contact a migration expert by following a general sequence:
Social media/email > Landing Page > White Paper Download > Contact
After taking some time to brainstorm ways to deliver the message, I developed 3 concepts that took different approaches, created pitches and moldboards, and mocked up a few social ads to show how they would look in the wild.
The Pitch: We've all been there - Late nights at the office. Countless doses of caffeine. Telling your friends and loved ones not to wait up. As day drifts into night, the pressure, tension, and frustrations of meeting deadlines start to mount. Can you imagine how much faster it would be if you weren't stuck on Lotus Notes? Volt MX Go provides the fastest way to migrate your aging Lotus Notes apps.
Volt MX Go. Get Unstuck.
The Pitch: Not everything ages like fine wine. Take Lotus Notes, for example. At one point in time, Lotus Notes was lightyears ahead of everyone else. Since then the growing cost of money and time to keep these apps running makes it painstakingly clear that it's time to get your apps up to speed. Volt MX Go makes modernizing Lotus Notes apps easy. So easy you’ll hardly notice. And they’ll be future-proofed to ensure your apps keep running even longer. Now that’s getting better with age.
It's time for the future. It's time to GO.
Any pit crew will tell you that maintaining race cars isn't easy, and if you don't have up-to-date tools and resources, it can go on forever. The same is true for apps. The tech world moves at a breathtaking pace, and if you're still working with tools that haven't been updated in 20 years, you're not going to keep up.
Turn your Apps into Frontrunners with Volt MX Go.
I provided a few ideas on how to redesign the three pages, and sketched them out for the team to review. As I moved on to wire frames, I made some adjustments to these features. Above are examples lo-fi comps I made for the Shop Page, PDP, and Cart.
While stakeholders loved all three concepts, “It’s GO Time” resonated most with them. We tweaked the idea to make it more widely appealing, adding track & field and cycling imagery to create a broader racing motif. Once we got sign off we were ready to go.
HCL Domino is a client-server cross-platform application runtime environment. Their millions of active users have created a cult following of this beloved app, but since being acquired from IBM, there have not been any major updates or releases until 2021.
The Domino v12 Launch would be the first in years and to match the fanfare generated by devoted users, we decided to create a live, day-long event with key speakers, product demos, and interviews, with the goal of getting users to upgrade. We also wanted to promote the update release of their messaging app, HCL Sametime, which runs on Domino and launched concurrently.
Since this took place during the COVID-19 pandemic, the event was completely virtual. We also had to speak to users who remained loyal to Domino despite the lack of updates, and encourage them to upgrade.
Most design assets were completed in-house, with me as the lead designer working with a content writer, product manager, and digital strategist. We wanted this event to have a global appeal since their users were based around the world. We also needed to create ways to engage registrants who would be viewing presentations remotely, instead of in a conference space. For this, we decided to work with a virtual event production company to create interactive virtual rooms where users can chat with each other and learn more about Domino’s history and usage. We also sent event swag to attendees - cocktail recipe cards, stickers, and usb drives, all packaged in a box that resembled software CD packaging from the 1990s (when Lotus Notes had the most users).
4.3k registrations
1.5k live attendees
1.8k playbacks
40 qualified leads (for new clients)
I provided a few ideas on how to redesign the three pages, and sketched them out for the team to review. As I moved on to wire frames, I made some adjustments to these features. Above are examples lo-fi comps I made for the Shop Page, PDP, and Cart.
Using Ceros, I designed and built an interactive event page for users to register for the launch event. Using Ceros allowed our engineers to focus their attention on updating and improving HCL Domino's site.
Leading up the the launch, we published blog articles outlining the benefits of upgrading. Here are a few examples.
I animated teaser videos that were promoted on social channels in order to generate hype for the event.
A few examples of the swag we mailed to attendees.
Manchester United asked me to explore designs of their U.S. ecommerce store for an entirely new product line - one of high-quality fabric and refined tailoring meant to appeal to a more upscale audience - called M.U.F.C. Although this new line of clothing will still include sportswear and be closely tied to the soccer team (they made me call it ‘football’ at their office) it will also feature trendy, fashion-forward styles and tasteful branding.
The marketing team made it very clear that they want an upscale web store that moves away from the organization’s team store, and asked me for an idea of what the customer experience would be like.
At the time, many professional sports teams with large fanbases, such as Real Madrid, the New York Yankees, and the Los Angeles Lakers, do not sell branded lifestyle wear. Of all the top athleisure brands that were relevant during this phase…
Puma would be MUFC’s closest competitor, it has both fashion and sportswear brands, as well as links to the teams that they sponsor, such as Arsenal, Borussia Dortmund, and Italia.
Adidas has products that are meant to be work as fashion pieces, but they are not featured prominently. They also do not do cross-branding with any pro teams.
Nike is mostly known for their athletic products, though they do a great job of tasteful logo placement.
Lululemon has a robust collection of work-to-workout products that are both stylish and functional, but do not do cross-branding with pro teams.
After taking some time to brainstorm ways to deliver the message, I developed 3 concepts that took different approaches, created pitches and moldboards, and mocked up a few social ads to show how they would look in the wild.
Using best practice design principles, I laid out wireframes for what their site could look like.
I provided a few ideas on how to redesign the three pages, and sketched them out for the team to review. As I moved on to wire frames, I made some adjustments to these features. Above are examples lo-fi comps I made for the Shop Page, PDP, and Cart.
I provided a few ideas on how to redesign the three pages, and sketched them out for the team to review. As I moved on to wire frames, I made some adjustments to these features. Above are examples lo-fi comps I made for the Shop Page, PDP, and Cart.
This series of cinemagraph emails kicked off in Fall 2016. We wanted to show our users what is possible with beautiful premium content available at OFFSET.
Our interactive Fashion Week email was also featured on the email marketing design site, Really Good Emails.
Animated emails that serves as both an announcement and demo of new products.
In the summer of 2016 a few designers and I were asked to design a digital poster for the blog with subtle, "cinemagraph" animation. The theme was retro-inspired travel posters of hometowns of movie villains, and I chose Star Wars' Darth Vader's home planet, Tatooine. This poster was made entirely of images and footage found on Shutterstock, to highlight the depth of their collection.
I provided a few ideas on how to redesign the three pages, and sketched them out for the team to review. As I moved on to wire frames, I made some adjustments to these features. Above are examples lo-fi comps I made for the Shop Page, PDP, and Cart.
Working with a designer/animator and a product marketing manager, we produced a short informational video that explains PSD2 regulation and Forter’s solution.
A few examples of the interactive landing pages we were producing as demand gen assets.
