B2C, Redesign, Mobile, Guidelines
CLIENT
WeBookCare
PRODUCT
Freelancer
PROJECT TYPE
Mobile App Redesign
ROLE
Product Designer
DURATION
Figma, Photoshop
TOOLS
3 months
WBC is a Healthcare SaaS platform that connects care seekers with healthcare workers, managing job searches, hiring processes, daily activities, and payroll.
Redesign the WBC mobile app by updating the UI and design system to align with the new branding. Improve the app flows based on user and market research insights.
Understanding vendor integration to design components accurately.
It is essential to adhere strictly to branding guidelines and maintain the original concept.
Understanding project scope, variables and opportunities
Through company research, industry, and competitor analysis, we defined the goals, problem statement, and timeline for this project.
The app UI and flows are outdated, with inconsistent visual elements, font styles, and colors that do not match the new company branding.
Deliver a completely redesigned mobile app based on current data, incorporating the new branding and improved flows, such as profile creation, scheduling, screening, and payroll integration. The design system, handoff, and follow-ups should be considered in the implementation phase.
Design system, handoff and follow ups should be considered in the implementation phase.
– Restricted to using only one font family, Poppins.
– All branding colors should be used in their original versions along the app.
– Personas' names and artwork have already been defined and must be used.
Defining a clear, user-centric solution
Method to reveal unclear navigation, issues and potential opportunities to resuse or improve some component.
Was studied each feature in deep to understrand the context, usability and best practices and how we could reuse or redesign them.
Popular apps, competitors, and mobile trends were researched to identify the most suitable navigation styles, components and flows to create a consistent experience aligned with the best practices and native mobile guidelines.
For instance, the screening process was entirely redesigned to be clearer and more straightforward for Care Seekers and Caregivers.
Meeting requirements, improving user experience, interface, and more!
The brand’s colors are based on the sunset, representing the change of phases, warm colors represent youth, and the dusk blue represents maturity.
Using warm colors could be challenging when they are similar to semantic colors. The first step was to break the colors in 5 scales, light to dark, and then explore the palette properly.
Initially the red color was tested on some elements and buttons, once it is the most prominent color in the palette. However, that color represents destruction, negation, or danger, and the use of it would confuse the user since it requires more attention.
I also tested small elements using yellow, orange and red, but the use of many colors only brought confusion without a real UX purpose.
The best approach was the reduction of all colors and the use of only the dusk blue to represent touch points, which will guide the user along all screens. Gradient and Red colors were used only on the initial screens.
Once the features were defined, was explored the App from different perspectives, for those who are offering health care services (CareWorker), those who need HealthCare (CareSeeker). and then organize define the App information architecture from a users experience. Thought the Sitemap visualization was possible to understand the big picture navigation then was discussed and improved the user navigation.
Meeting requirements, improving user experience, interface, and more!
Meeting requirements, improving user experience, interface, and more!
Clear presentation of the target audience, health care workers and people who need health care services. Users recognize their needs since the first screen and procceed to the profile creation step by step.
I bring the daily tasks to the home screen to boost the user performance and reducing thetime spend in the app. Users can easily manage schedules, jobs, tasks, and check their account progress.
Complex flows required more attention and a totally customizable approach, for instance, job applications, screening process, and time shifts. To create them, I researched trends, mobile standards and benchmark to design the best user centred solution.
I had a close communication with developers aiming the perfect mathing app and design. Despite the guides created on figma and the presentation of each flow, I also revised weekly all test releases.
Some design artefacts of this project.