Anonymous Agent
BACKGROUND Social media marketing is a fast-growing industry and provides lucrative opportunities for both merchants and influencers. However, this partnership has traditionally been limited to influencers with high followings and merchants with large marketing budgets. Anonymous Agent aims to bring the power of social media marketing to everyone, with a focus on transparency, simplicity, and effectiveness.
I was hired by the team at Anonymous Agent to design both the UX and UI of their mobile app platform. This process began with defining their brand vision, and creating a thorough design system with reusable components and iconography. The app itself was split into two discrete user flows, depending on the user’s role as a merchant or influencer. While building the user interface for both these flows, I focused on creating a consistent and recognizable design that would appeal to both groups of target users.
TIMELINE6 weeks
AREAUI/UX Design
Mobile UI
Project Goals
OBJECTIVE #1Create a design system and define brand guidelines, including a color palette, typography, and reusable components.
Design a platform that allows merchants to formulate their own marketing campaigns and accept contracts on their terms.
Design a platform that allows influencers to filter and search for contracts and complete contracts in interactive interface.
5 Elements of UX Design
The design framework I utilized for this project was the 5 elements of UX Design, which utilizes five essential layers that bring an abstract idea to a concrete product. The five elements are Strategy, Scope, Structure, Skeleton, and Surface — each element represents a layer that is dependent on the one below it.
1. Strategy and scope
1.1 Determining features and content to be included
The ideation and strategy stage had already been completed with this project, and the AA team had an existing bare-bones version of their app that provided a useful structure and starting point to formulate scope.
I used these initial screens to help inform the layout that they wanted with each page, while still having the freedom to change elements to make the overall flow more intuitive. Most importantly, their existing screens contained the features and content that they had determined as crucial for their product.
2. Structure
Since this was an app with two discrete user flows, it was crucial to define these flows early on and denote the ways they interacted with each other, overlapped on some features and were separate on others.
2.2 Information architecture and sitemap
3. Skeleton
3.1 Low Fidelity Wireframes
In the Skeleton stage of designing, I use low-fi wireframes to visualize the layout of the app without any visual distractions. It's an efficient way to map out the hierarchy of elements and plan out the interactive nature of each page. Since this app had two distinct user flows, I made two sets of wireframes.
4. Surface
4.1 Brand Identity
Before getting into the UI and visual aspects of the design, I had to first create a set of brand guidelines. This made sure that there would be consistent and recognizable visuals throughout the app, and also provided a set of guidelines that could be used and referred to in the future with any new versions, updates, or features. I kept in mind that this app would be used by two different groups of users, and both groups would be quite varied in demographics and preferences. The merchant user flow would be primarily used by older business owners and companies, and the influencer user flow would be used by younger people with social media presence.
4.2 Design System
The design system contains valuable information about the color palette including hex codes and transparencies, and typography, including font types, weights, and sizes. Additionally, I created a set of components on Figma with appropriate variants that could be reused throughout their design journey.
5. Bringing it together
Visit live website
Download app
Client Testimonial
"We had a wonderful experience working with Vasuki on the UI design of our mission critical project. Vasuki is talented, considerate, organized and responsive. Vasuki always quickly grasps the gist of the product concept, listens and accommodates to our feedback. The UI system is modern and sleek. The deliverables are highly finished. We highly recommend Vasuki if you are considering evolving your UI/UX system."
— Mike Wang
Co-Founder of Anonymous Agent