Crowdz Mobile App
Goal: Creating a mobile app to allow sellers to easily accept offers for their unpaid invoices on our platform.
Restrictions and needs:
- Need: The mobile app should present the same information that's available on the desktop app.
- Need: The mobile app should provide the same functionalities available on the desktop app.
- Good-to-have: The mobile app should appeal to crypto enthusiast users without discouraging users who aren't.
Process Summary: We've developed a user journey and mapping followed by wireframes. We've then applied the branding and created prototyping. A design system was created in Figma for the Version 2 which allowed us to communicate effectively with the developers.
Software: Figma
Team: 1 UX Research, 1 UI Designer and 1 Project Lead
My role: UI Design & Branding
The challenge: Translating complex tables from desktop to a mobile experience targeted for busy small and medium business owners.
To create excitement about the app, we built this kinetic prototype to have an eye-catching idea to propose. This prototype was done based on our web desktop app using Anima.
Back to the drawing board, we created a map using Lucidchart to allow for collaborative input with different stakeholders in the company. We then completed the flow with low res wireframes. LucidChart was useful to have interactive sessions where we would iterate live on our user flow. It was also essential to communicate our intentions to the rest of the team.
One challenge was the complex tables available on larger screens. After exploring multiple ways to make tables responsive, we've decided to keep our mobile tables to 3-4 columns only. Those columns would contain the necessary information for the user to make a decision. They could still dig deeper by tapping on the invoice number. That way, we kept the information available on mobile the same as the desktop. Here we see a larger screen table, a mobile screen equivalent, and the 2nd level of information available on tap. Good-to-have: A placeholder is available to show the physical invoice. If no images are available, AI generates an image based on the buyer's industry.
We split the onboarding into 2 sections: a pre-registration and a post-registration. The pre-registration contains simple questions and the OTP to create the account. Users are vetted after this pre-registration. This avoid frustration from a user who wouldn't meet the requirement to transact on the app. The post-registration contains steps needed by the user to start transacting on the platform. The split had many advantages, such as filtering MQL for marketing. Additionally, each step of the post-registration leads the user to a section of the app, making them acquainted to the interface while filing out necessary information.
The offer screen is the main screen of the app. It is the most appealing to the user as they use the app to get cashflow for their business. In second is shown the acceptance state. We are using snack bars from the Material UI library to communicate events happening within the app. We added confettis to this one as this is the most exciting event that can happen. The third screen shows a dashboard with an overview of the user's data.
Showcased here is the left nav menu available on tap. As we kept the app simple with only 2 levels deep, the hamburger menu turns into a back arrow if navigating further. It's then possible to quickly go to that menu. This navigation also allowed us to keep the desktop pattern with which the user was familiar with.