Mobile App

1. UX RESEARCH

Before jumping into design I like to learn more about my users, their problems and their priorities.  In this case the majority of it was done through the ample amount of information to be found on the internet about influencers.  

What problems do influencers experience?

SCATTERED TOOLS:

‍Influencer marketing is a new field. Few tools exist in this space to manage campaigns and even major advertising campaigns are carried out informally over email and direct message, using various means of payment. 

RISK:

The field is also highly unregulated, and though the FTC does have guidelines on rules to explicitly inform their audience when their posts are advertisements, there are still ares where the influencer is at risk. Predominantly it is uncommon to find legally binding contracts that ensure the influencer gets paid after they perform the service. This leaves the influencers at the whim of the brand, who may decide, if satisfied by their work or simply because, not to pay the influencer. Additionally both the influencer and the brand are unsure of each other’s credibility, as the influencer doesn’t want to do free work for a scammer and a brand doesn't want to hire a fake influencer. 

UNSTANDARDIZED SERVICE:

Many brands are “just figuring it out” when it comes to influencer marketing. There is no standardized process. Thus influencers are given inconsistent instructions and inconsistent compensation.  

PAY WITH PRODUCT:

‍It had also become common for brands to compensate smaller influencers for brand collaborations with free products rather than monetary payment. Many smaller influencers we spoke to felt strongly on this topic, nearly all agreeing that they prefer being paid with money for their service.

What platforms does influencer marketing occur on?

By far the most preferred platform for influencer marketing is Instagram. #Ad has over 12 million posts and it increases exponentially each year. 

Facebook, Youtube, Twitch, Snapchat, Twitter, & Pinterest are among the other platforms that influencer marketing occurs at, though at a lower percentage. 

The founding team decided to focus exclusively on Instagram for the first version of the application. So it made sense for me to do more research into Instagram. I had never been an avid user of either Instagram or Facebook (Instagram’s parent company) so this portion of the research involved studied all the capabilities of Instagram. 

I made a creator's account in order to see the post insights that came with it. I also experimented with making Stories and Posts using the expansive  filters, text, and other features that Instagram was known for. This research was especially important for understanding what the contract instructions would look like. How specific could brands get? What kinds of things could they ask for? 

If I knew these things, I would also know what fields to design in the post/story instructions.    

Competitive Analysis

We compared several of the existing tools for influencer marketing, and the other similar services and digital solutions among them. We evaluate them for their strengths and weaknesses to assess how our solution would compare.   

We also spoke to some influencers who shared their experience on other platforms. That helped us get insight into how they worked, what frustrations were experienced on them, and what we could do differently. 

2. PLANNING

App Architecture Mapping

A mind map of the application architecture down to every page and error use-case that would need to be rendered. 

Phase Zeros 

One of our first steps was to build a document holding all the features required on each page. Took several iterations to get this document properly, lots of back and forth. It was the most time consuming part. 

3. IDEATION

Sketches

I began ideation by sketching out several ideas on dotted paper before moving into Sketch to build out the designs.

Wireframes

Here are the early wireframes for the influencer-side of the platform. These were for the essential screens only, but later expanded to all the different edge-cases.

Aesthetic Mockups

Despite the dedication to wireframing early in the process, I also mocked up two more polished looking frames to show the team what the app may look like after several iterations. This was in an effort to show them to trust the process. The final design deviated quite a bit from these mockups, but they served their purpose to help my team imagine the final product while looking at the wireframes, and gave me a mental exercise to make sure the brand was working with the way I was designing the application.

4. DESIGN

Switching Tools

Around the time I was done with the wireframes, Adobe XD had released a major update which allowed for greater prototyping capabilities. I had been following UI UX news and heard many designers recommending a transition. After more research into XD’s offerings,  I approached the team to allow me to push back my deadlines to buy several days to transfer everything from sketch to XD. After hearing my reasoning they allowed it. 

Low Fidelity

Importing sketch documents into XD does a remarkable job transferring but many assets get screwed up. For the low fidelity prototype, I had to clean up the wireframes and make a duplicate to work on. 

The focus this time was to iterate on the feedback given to me by the team on the wireframes without too much stylization. There were some details that needed fixing, some functionalities that were lost in translation. 

Medium Fidelity

Another round of feedback left me with small tweaks to implement, while I focused on stylizing the medium fidelity prototype to fit the branding I had created

I ran into some challenges. The brand colors I created were far too colorful to be appropriate in the app. Apps in general have increasingly been having trends of increasing white space and using grayscale color themes. 

My research showed that instagram was also following this trend, despite its incredibly colorful branding, the app’s internal branding display next to no color outside of black, white, and grey. 

Although it was clear that I shouldn’t let the Nfluence blue dominate the interface, I still experimented with using color to signify urgency in the contract posts. When comparing the two I felt the white color scheme overwhelmingly outperformed the colorful one. 

Around this time our end-developers were already hard at work. The front-end developer asked for the designs to begin structuring the pages while I polished the document in high fidelity. 

Hacking Together a Usability Test

Around the time the Medium Fidelity prototype was finished, I was flown out to Seattle to meet the team in-person. There we were able to arrange a ‘health and fitness’ influencer to come in for a usability test. 

Some deadlines got pushed on the app development, which was already underway, and our front-end developer was unable to have the app done by the arranged date. Since I was in Seattle for only a week, I didn’t want to lose the opportunity to get feedback, so I hacked together an interactable prototype using XD and set it up as a series of tests for the influencer to go through on a spare phone. 

1. I drafted a testing procedure, booked a room at a quiet public meeting room, and asked the influencer to join me there. I explained the procedure, then started the test, taking notes along the way.

2. I asked her questions to encourage her to speak out loud as she went through the app. She gave me her first impressions, thoughts, surprises, and frustrations. Although using XD instead of the real app was limiting, I was still able to learn a lot. 

For instance I learned what information I need to emphasise higher on the screen based on what she looked for first at each step. The test also helped validate the problem we were solving, as the influencer mentioned countless times how much she wished she had an app like this.   

Unfortunately I was unable to do more testing on the app during that week, but one test was better than none. I had extracted an incredible amount of valuable feedback, which left me with a lot to think on for the next iteration of the design. 

High Fidelity

The final iteration of the mobile app came after I processed and documented the learnings from my hacked together usability test. With this final level of polish I exported all the relevant assets and shared the prototype for development. 

From that point forward I began working on the web application for the brands, while maintaining close contact with our full-stack developer to make sure implementation was going smoothly. Below are the final renditions of the project, plus a a screenshot of the design system I built to share with future designers and developers.

Outcomes

Learnings

Overall, throughout this project I learned a great deal about collaborating with developers. I gained an intuitive understanding of the effort level for building some components over others. 

I also learned the best practices for working on IOS apps. I read through the entirety of the Apple IOS guidelines and learned how to design for different sized screens. There were spacing consideration and user experience conventions that became obvious after several iterations. 

I was also reminded of the incredible benefits of getting user feedback at every point of the design process. I wished we sought out feedback earlier. But despite the inaccessibility to proper users, I was lucky that influencers’ are content creators, meaning they have written extensively about their experiences online. These things helped me infer information relevant to design decisions we made. 

The next part of the project, the brand web app, will go into more depth around what I learned from the project as a whole.