Skills
App Design | Web Design
Softwares Used
Adobe XD | Illustrator | Maze | Invision
Project Overview
Connected is a platform for micro content creators to find paid and gifted campaigns from their favorite brands. Creators are matched with campaigns that align with their skills and interests and have the ability to apply for the campaigns they see fit.
The Challenge
Current offerings in the market only provide gifted campaigns and very limited paid campaigns. Services and platforms offering paid campaigns are usually reserved for mid to macro creators and can sometimes require payment to join.
The Goal
By the end of this project, users will be able to do the following:
- Connect with major brands
- Receive paid brand deals
- Have a unique media kit that sets them apart from other creators
My Role
I worked as the UX Designer for this project.
Responsibilities
My responsibilities were to conduct empathy interviews, conduct a competitive analysis, create paper and digital wireframes, low and high-fidelity prototypes, conduct usability studies and iterate on designs.
01. Research & Analysis
Competitive Audit
I started by conducting research on 3 direct competitors and one indirect competitor. The 3 direct competitors were brands that offered content + posting campaigns, meaning the creator has to post the content on their social platforms as well as giving the brand access to the content. The indirect competitor provided content only campaigns. After conducting the competitive audit, I compiled my findings into a competitive audit report.
Top Findings
Users have to pay for some products in exchange for large discounts.
Some paid campaigns are actually in exchange for gift cards only.
Most platforms do not make it apparent that most campaigns are gifted campaigns only.
There are a limited number of available campaigns on all platforms.
Some campaigns require a lot of work for little pay.
Requirements are not clear when signing up.
User Interviews
At the discovery phase of my project, I conducted user interviews in order to get a better understanding of the problem. I was most curious to find out how users currently reach out to brands for brand deals and found the answers to be very intriguing and helpful for app design.
After conducting interviews, I created empathy maps to understand the needs and pain points of the users I’m designing for. The most surprising discovery is that most users will use both their phone and desktop to contact brands, organize their outreach and create content. From these surveys, I identified a few commonalities amongst interviewee responses and summarized those in the empathy map.
User Pain Points
Using the empathy map, I created user pain points that needed to be addressed with the app.
Lack of Resources
Users expressed their frustration with not having the knowledge or access to contact brands.
Transparency
Users expressed the need to fully understand what brands are looking for before reaching out to ensure that their values align and they are capable of landing and completing the campaign.
User Persona
Based on the interviews and research, I created a persona to encompass the feelings and actions of the target market. I referred to this persona throughout the entire product development process.
User Journey Map
I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.
Problem Statement
Ciara is a micro content creator who needs a way to find brands willing to partner with micro creators because she wants to monetize her platform.
02. Ideate & Design
To start the ideation phase, I conducted the Crazy Eight’s exercise to come up with ideas for the app and responsive site as a whole.
Sketch 1: Users will be able to swipe left or right similar to dating apps using the mobile app. The responsive site will allow users to click arrows to “swipe” left or right on brands.
Sketch 2: Brands will have detailed descriptions regarding important information.
Sketch 3: Creators will be able to set their rates for content only (no posting on their personal profiles) and content + posting on their personal profiles on their own or with the help of a rates calculator.
Sketch 6: A creator profile similar to a portfolio website but for creators.
Sketch 8: Users will be able to integrate their social media accounts for live analytics updates to show an accurate depiction of their current engagement rates and other important social media KPIs.
Paper Sketches
I thoroughly researched the design of many different apps operating in the same space. I also researched a few more indirect competitors, such as job boards, to view their designs and process of matching candidates with the right roles.
Digital Wireframes
Prototyping
After creating the digital wireframes, I entered the prototyping phase where I connected the screens using various transitions, overlays and interactions.
Low – Fidelity Usability Study
Mobile Affinity Mapping
Mobile Study Findings
Refining The Mobile Design
Desktop Usability Studies
During usability studies, users expressed their desires for a desktop version of the app for various reasons. The desktop version mirrored the mobile app because the most common reason for wanting a desktop version is users like to use a desktop to browse and apply for campaigns. However, when asked if users would also like to access the site on mobile, users expressed that they would prefer to just download the app so a mobile site was not needed.
Desktop Affinity Mapping
Desktop Study Findings
Refining The Desktop Design
Visual Design
The next plan of action was to create color palettes and typography that would help communicate the brand’s identity and also give the product an exciting feel.
Sans Serif Typeface
Taking the user into consideration, I chose a typeface that is relatable and welcoming.
Sans Serif gives off a feeling of:
- Being casual
- Informal
- Friendly
- Approachable
Gopher – A Unique Sans Serif Typeface
I wanted users to know that they’re unique and capable of achieving their goals. This is why I chose a unique font that goes against the typical rules of Sans Serif.
Gopher is a reverse contrast, geometric sans serif typeface. A typical contrast has thicker vertical strokes and thinner horizontal, but Gopher provides a unique look by switching that contrast.
All Round Gothic – A Fun Sans Serif Typeface
Users should be able to have fun while searching for brand deals. I chose a fun and sweet font that would illicit this emotion from users.
Blue – Calmness & Freedom
Users expressed they feel anxious when searching for and reaching out to brands so I chose a color that would help alleviate some of that stress.
The color blue gives off a feeling of:
- Relaxation
- Peace
- Tranquility
- Inspiration
- Freedom
Tan – Warmth & Security
Creators expressed feeling anxious when applying to brand deals. Tan gives off the feeling of warmth and security. I chose this color so that users feel empowered and safe when applying to brand deals.
High – Fidelity Mobile Mockups
High – Fidelity Desktop MockUps
High – Fidelity Prototypes
Moving Forward
This has been my favorite project to date. I learned a lot and gained many skills. I also gathered lots of feedback from my usability studies to continue iterating on the designs. Future iterations of the platform will include more ways to customize the media kit and continuing to ensure that users have enough information to decide which brands to work with. Users really loved the idea of this platform and are very interested in using it so I will continue to perfect the designs and provide an optimal user experience.
What I’ve Learned
During this project, I challenged myself to learn how to create micro interactions. I played around with component sets and different workarounds to create the desired interactions. One of my favorite interactions from this project is the way that the brand deals slide up and down as you move through the different options.This animation is not something you see often when clicking left to right on different campaigns. I believe that this slight animation provides an engaging and visually pleasing experience for users making them more excited to use the app.
Let’s Connect!
Thank you for taking the time to review the Lamond Fashion E-Commerce app! If you’d like to see more or get in touch, feel free to contact me below.
View comments
Leave a comment