Avant
Challenge
Creating an easy to use app for small business and at home hairdressers, makeup artists and beauticians to market themselves to thousands of customers who require a service.
On this platform, people trying to grow their businesses can operate at their own preferred business hours and charge their own fees, providing them with the opportunity to achieve financial freedom and work under their own terms on a purely independent basis doing what they are passionate about.
My Role
- Defining the Information Architecture
- Devising key User Flows
- Wireframing
- Creating the UI Design
- Animation
- Prototyping
Screens
Information Architecture (IA)
I first created an information architecture. This required me to study the content, organise and group them to create sections and achieve a flow in the information. After multiple iterations and team discussions I reached a definitive version of information architecture.
User Flows
1. Registration Flow - Business
The registration flow ensures professionals looking to offer services have a selection based registration rather than taking inputs for each small action, meanwhile ensuring that on completing the flow, all information regarding the business is available.
2. Customer Flow
This app flow was designed for the customer side of the app. I kept it simple and intuitive and in line with most other apps we use without doing anything radically different since ease of use was the key focal point in designing this app.
Wireframes
Paper wireframes help me visualize the UI in my mind and also ensure all elements required on a particular screen have been placed. This is also beneficial for making changes quickly as the time taken to implement new changes increases exponentially as we move along the development process so it’s always better to have a keen eye over these wireframes, find and correct any errors as early as possible.
Design Specs
Loader Animation
This was my first time using Lottie Animations and I used Adobe
AfterEffects to create it. The client had requested for a simple circle animation with rotating elements denoting the function of the app.
Prototype
Click anywhere on the region around the Phone to see interactive hotspots.
Press 'F' to view and interact with the prototype in full-screen view.