2020-2021
User Experience
Interface
Illustration
Product Design
Web Design
Branding
Emotional Commerce is a video messaging and marketing platform. They specialize in video hosting via QR driven landing pages.
Emotional Commerce was expanding their customer segments and needed to implement new billing structures, and increase usability. Their product needed to be redesigned so that it could accommodate use cases ranging from personal messages between individual customers, to marketing campaigns from large companies.
We spent just under 6 months to deliver the final product. Our budget did not include formal user research or testing, so it was imperative that we held our design decisions to a high level of scrutiny in order to validate any and all assumptions made.
Our contributions to their system solved hierarchical issues in the creation and management of content and gave users more control of their customization. Following the redesign, Emotional Commerce saw product adoption from high profile clients like Sam Edelman and Redbull and increased clickthrough by 70% across 2M users.
In order to update billing structures and implement new features, I needed to understand the system. To get a clear picture of the system architecture, I conducted an audit of the product. After creating user flow maps of the system, our design team began informal usability testing to identify pain points, hierarchical issues, and where we could integrate new features and task flows.
Our usability testing had revealed that navigational pain points were likely caused by unintuitive design decisions. Some cross examination of popular tools validated our hunch. The pain points directly correlated to where Emotional Commerce's product strayed from established design patterns.
The product’s original menu operated like most web navigation: centered on top of the page with a horizontal list of navigation links. We assumed this caused confusion for users because popular products with similar features use a sidebar for navigation.
Moving the menu to the left of the screen allowed us to direct users with improved hierarchy. In the revised design, only task-specific information like page titles and progress meters are positioned at the top of the screen. Additionally, the original menu was completely word based, so we improved visual reference of the navigation options by implementing the use of icons.
The original design only displayed 4-5 QR packages at one time, even though most users have dozens of them. It became very apparent that users were stuck in a never-ending-scroll on their way to find a given QR package. To save users time and effort, we restructured the layout to display QR packages in a grid and added a search bar to the top to match design patterns in content organization.
The product management team also outlined architectural revisions to the architecture of the system. Instead of billing by individual QR’s, Emotional Commerce would bill groups of QR packages, known as campaigns. We used the grid layout and search functions there as well.
Our challenge while creating the template editor experience was keeping users focused and engaged. We needed to create an interaction which indicates progress to help users stay motivated. We decided that the way to do this was to implement a waypoint progress bar that corresponds to template completion.
Emotional Commerce’s users’ only preview option was for desktop. Users needed their landing pages to work on a variety of devices and were forced to guess what worked best. To solve for this pain point, we provided users with the option to preview their pages in mobile, tablet, and desktop resolutions and video orientations.
Emotional Commerce proposes video as a way to add value to products. However, apart from stock imagery, they didn’t have a visual language to aid their brand narrative. So, I collaborated with their PM’s to create an illustration library they would use throughout their product to display their value and story. We started with stock line illustrations and worked our way into a three dimensional character. Their newfound mascot brought life to their logo, interacted with product and merchandise mockups, and demonstrated their brand values in a series of analogical illustrations.
Following the redesign, Emotional Commerce saw 80% click through rates from their marketing QR packages, an increase of 150% in click rate overall. Our contributions to their system solved hierarchical issues in the creation and management of content.
This project made me proud because it represented a tremendous amount of learning on my part. It was the first time I directly interacted with software devs, project managers, marketing managers, and all those other stakeholder titles. Not only that, this was the first time I ever saw my designs become a real, functioning product. It felt like I had learned more about myself, my work, and how I collaborate than I did in the two years of design school prior. The things I learned might be enough to write something entirely different, however, here are the four biggest lessons I learned.
Collaboration always means compromise. During this project, I found it difficult to know when to let go of ideas, and when to hold onto them. For instance, I was attached to the idea of a row of recently active QR campaigns. I ended up omitting it when our creative director pointed out that users were likely to sort their content by recent activity by default, and the removal of the row provided more visual real estate for the file grid. But not all suggestions are equal. A couple weeks before shipping the product, I was behind schedule and our lead developer called out my illustrations. He said they were child-like and unprofessional. His suggestion was to redo them and create more sophisticated visuals. Although he had helped our team with difficult design choices in the past, I decided to defend my illustrations. The client was fond of them after multiple rounds of iteration. Furthermore, creating a different feel for the visual identity didn’t present a quantifiable increase in value, and would have taken more resources. I am proud of my decision, and it helped me learn that valuable critique begets unreached potential value.
I had never seen any of my designs go through the process of development. My design approach for the landing page and product was led by what I deemed possible, and not what was always achievable. A specific instance of this was when I was designing an explainer video for how the product worked. I animated a phone scanning a QR code on a shoebox, but I didn’t confer with our devs to understand web constraints or the best format for the animation. I had planned for it to function as a looping gif, but when it came time to make the asset ready for web viewing, it was too large of a file. We spent an extra week figuring out how to modify the size of the animation. Another time I failed to consider conventions was how I created my prototype wireframes. I designed the system to look good as a stand alone software. When it came time for devs to build it as a web platform, they had to modify the layout for common web scale. I could have saved our team a lot of time and effort if I had taken the time to sit down with the developers to understand how my assets should function for handoff.
Working on a team for the first time was an invigorating experience. I felt important, and needed. Engaging in the process of collaboration makes me realize why I love design. But sometimes, I can lose sight of other important things in the pursuit of reaching a perfect design. While working on Emotional Commerce’s product, I was taking calls with developers on our team in Lebanon at 3AM talking and then waking the next morning for 8AM classes. It was unsustainable. I had to reevaluate the way that I approached my responsibilities. I had to become realistic about what I could produce. Biting off more than I could chew meant that my school, personal relationships, exercise, and rest were suffering. I ended up approaching Hi Dev’s CEO and explaining that we needed to delegate some of the work, and I started tracking my time to make sure I was conscious of my output.
We all experience some level of perfectionism, and boy do I struggle with it. During this project, I was scared to my core that imperfect work would somehow alter the way people viewed me. Not being honest about my process affected my efficiency, and caused stress for others. By isolating myself, I limited my access to good feedback, ideas, and expertise. If I could do it again, I would have communicated with my team early, every time and asked for help as often as possible.
