Advertiser Web App
A browser based responsive web app to help brands search, select, and manage their campaigns with influencers.
After the influencer IOS app, I began the brand’s web app. This time my goal was to design a smooth user-experience for the business/brand facing web app in a prototype to hand off to the front-end developer.
Lead Product Designer
Part of this project was set during the summer which meant I had more time available to work which is partially why I this part of the project took only two months as opposed to the five months the mobile portion took.
This was also done entirely remotely, much like the rest of the project. However the second product designer I collaborated with was also based on the east-coast so I was able to meet with them in person for our collaboration sessions. We had begun dabbling in version sharing products for XD documents when Adobe XD released an update to allow file sharing on adobe cloud, which helped improve our workflow than otherwise.
Overall, thanks to the work done in earlier phases, the bandwidth of another designer, and a clearer schedule, we were able to complete this part of the project at record pace. We hit the deadline we set out to meet, just in time for working with a potential customer who had been interested in our services.
This time we took on another product designer part-time to offload some of my work, while I juggled a lot of other things. It was my responsibility to onboard this designer to the project and direct them towards the tasks needed to be done.
Through this process I learned how to effectively onboard and work with another designer/collaborator, as well as how to organize my documents for another designer to easily pick it up.
In addition to that designer I also collaborated closely with a team of top-class software developers and marketing specialists. The front-end developer in particular was very helpful and working with them unlocking insight into their process. This knowledge helped me get a feeling of the implementation effort for different designs, and learned when to compromise to help manage a strict timeline.
1. UX RESEARCH
When I began working on the web app I had already done a lot of research for the mobile app prior. In order to design a good influencer experience, I had to understand the brand’s experience and frustrations with the manual pipeline as well. Which is why I did most of the web app’s research while working on the mobile app.
So in truth, I didn’t have a research phase like I normally do in the beginning of this part of the project, as I already understood the pipeline to a typical influencer marketing campaign rather well.
However, for the sake of better reading continuity in this case study, I will lay out the findings that were relevant to the brands here anyway.
What does a normal influencer campaign look like?
There are three ways for a brand to conduct influencer marketing. They can either hire an advertiser, use a tool like Aspire IQ, or they can do it manually. Since the first two options cost a lot of money, many smaller businesses choose to use the third option.
A manual influencer campaign looks like this.
- Searching for influencers over Instagram, jotting into spreadsheet
- Contact them over DM or email with a collaboration proposal.
- Negotiate compensation until they come to an agreement.
- Here they send contract instructions, but there is no standard process for contracts. So some are more formal than others.
- Shipping the product and waiting for the influencer to receive it.
- The influencer prepares the post and the brand monitors for progress, answers questions, and gives feedback. Some brands review the post before it gets published.
- After the post is published they wait for the likes, comments, and views to accrue.
- Request a screenshot of the post insights from the influencer.
- Compensate the influencer if they asked for monetary payment rather than free product.
- Thank the influencer and prepare a report of the campaign results.
What tools do they normally use?
It is a long and tedious process and occurs between email, direct message, spreadsheets, and instagram.
What problems do brands experience?
The problems faced by the brands are much the same as the problems faced by the influencers. Influencer marketing is a new type of advertising as therefore there are no formal procedures or tools to conduct it. Searching for influencers is done manually and takes a largest portion of the effort during the campaign. Additionally managing the campaign back and forth between emails can take weeks, making it impossible to manage more than one influencer at all.
What kind of brands do influencer marketing?
As of today, Instagram has 1 billion monthly active users. Brands who are looking to appeal to a younger demographic (from teens to people in their thirties) might choose social media as a channel for advertising. But why use influencer marketing rather than just instagram/facebook ads?
Well studies have found that when an influencer recommends or sponsors a brand, there is a higher chance of conversion than through traditional online advertising methods. Influencer marketing can be one of the most effective forms of advertising because they emulate word-of-mouth advertising (otherwise considered casual brand endorsements from a friend or family member).
The brands who benefit most from this are also the types that benefit from word-of-mouth (WOM) types of advertising. This means brands that do best when normal people talk about them to hype them up. Brands selling experiences such as restaurants, theme parks, events, concerts can all be examples of brands that rely ONLY on WOM advertising.
While experiences ONLY rely on WOM, this isn’t to say WOM advertising isn’t beneficial to brands selling products and services. On the contrary, the majority of businesses that use influencer advertising today are selling physical goods.
I leaned on the prior competitive analysis document we built during the user research portion of the mobile app. It had been regularly updated so all it took was a quick read through as a refresher this time.
App Architecture Mapping
Considering the web app was a mirror to the influencer's mobile app, I had already mapped out the application architecture down to every page and interaction that would need to be rendered in the previous project.
P0 (Phase Zeros)
The developers built out a detailed features list for both the influencer and the brand in the prior design process, so all I had to do was review it once more. Although now that I was working on it, I noticed minor clarifications I needed, but those were quickly resolved over document comments..
Since this time I was working with another product designer, my brainstorming process was a little different. I wanted us to be on the same page by the time we hopped on Adobe XD , so we did an in-person brainstorming activity to hash out all our ideas.
We hand-sketched the first set of ideas on paper to lay out what needed to be on each page, with little regard to how it would look. Once we agreed upon this we moved on to paper wireframe sketches.
I carefully thumbnailed wireframes for each of the major screens on paper so we could discuss them in person before presenting to the team. Once we were both satisfied with them we presented them to the team for feedback.
I have to admit in hindsight paper wireframes were a bad choice for remote presentation. I took a screenshot of the sketches, then a picture for each frame and went through it like powerpoint slides. The founders, who I was screen-sharing to through Zoom had difficulty following the user-flow. As a result their feedback wasn’t as rich as I had hoped for. It wasn’t until the next fidelity wireframes that we actually received relevant feedback. Although perhaps if I prototyped the photo together with InVision it may have worked better.
This was a learning point for me. When working with a remote client I now know to avoid presenting non-digital wireframes.
For earlier marketing material I had been asked to mockup two high fidelity pages of the web application. It was entirely for promotional purposes, so I didn’t concern myself with accuracy or content. But it gave me and the designer I was collaborating with a lot of inspiration for how the final product would look like while we worked on the wireframes.
We wanted to work faster this time as there was a potential client waiting for the product to be ready. Therefore we jumped from the hand-sketched wireframes right into a medium fidelity design.
This round of team feedback was extremely helpful, as it revealed some incorrect assumptions we had about one of the steps, as well as other minor changes. Overall the team loved our take to the product concept and encouraged us to move forward to high fidelity while the front-end developer began structerin the web app with what we had.
The high fidelity prototype was made in record time between the two of us. We prepared the assets and shared the document for development. The hand off went well and the development began with our guidance available when needed.
Overall the web application portion of the project taught me how to collaborate smoothly on building out a product design prototype with another designer. This certainly wasn't the first time I had worked with another designer on a project, but it was the first where we worked on the same XD document together.
I learned how to properly divide responsibilities with a project like this, as well as the importance of spending some time in the beginning to catch everyone with the research that has fueled prior decisions. Also allowing them this time to ask questions to clarify any confusion that can maximize efficiency down the line.
Since this designer hopped onto the project well after I had been working on it for months, there were a lot of things that were obvious to me that were not obvious to them. I accidentally made assumptions that they knew things they had no reason to know, belatedly realizing that I should have spent a longer time on-boarding them before diving into a brainstorming session.
I wish I could talk about how the product performed after implementation but the founding team decided to pivot shortly after the designs were finalized and in-development (due to strategic reasons unrelated to the design).
My training has taught me that the one of the first steps in the design process (especially for a startup) is problem validation; that is to find research supporting the problem your product/service is solving is meaningful to the user. Despite my insistence that we do user interviews early on, the founding team decided to push off on that until after the product had been designed, trusting my design intuition.
We had built the product in almost entirely the wrong order. We designed a full platform from start to finish rather than using the AGILE design process as many entrepreneurial classics encourage.
Although the design for the mobile and web application were fully prototyped and passed onto the developers and we nearly finished developing the front-end, ultimately Nfluence strategically paused development. The founding team realized belatedly that in order to gain the learnings they were seeking, they could take a manual approach with minimal technology.
This was a learning point for the company which completely changed their approach to future projects, focusing on small low effort MVPs to gain quick and impactful learnings to influence the next MVP instead of diving straight into long high effort polish products from the get-go.
Through this project I learned the importance of the iterative design process. Rather than jumping straight into designing a final product, we should have approached it with smaller prototypes and used user feedback to steer the direction of the project.
I also learned to be more vocal about user research and smaller prototypes early on, as my training has taught me to be. I feel that if I was more outspoken, we would have saved more time and effort down the line.
Overall, the Nfluence’s platform remained a fantastic learning experience for me, as it was the first end-to-end software product I had completed for a client and alongside a fantastic development team.