2014 | SKETCH, INVISION, ILLUSTRATOR
Responsive web design for rate and review platform
VouchedFor
Challenge
The client has an existing rate and review platform that requires a redesign for the ever-growing mobile market.
Early insights
Preliminary meetings with the client identified that in the past they had struggled with design consistency and the platform now had a cluttered interface - they wanted the redesign to focus on a providing an excellent user experience and to optimise the interface for mobile devices.
The platform was used to find financial advisers so it was important that users feel confident about using the platform.
UX/UI
The platform had two types of user:
Client - focus on providing a smooth and intuitive experience to give the user confidence in using the platform
Financial Adviser - focus on creating a strong onboarding experience for new professionals joining the platform
Client personas
Adviser personas
The creation of user personas and mapping out user flows helps to understand the thought processes of the user, and how they will interact with the app.
Mobile first
To optimise the platform interface for mobile devices a ‘mobile first’ approach was taken to design. Wireframes were created for each device size and used to create a basic click-through prototypes to test and refine key functionality such as searching for an adviser and the review process.
Using tools like InVision to create clickable prototypes at the wireframe stage is valuable in testing user interactions and understanding the app architecture.
Search
Searching for an adviser is the core function of the platform so the search bar is situated promiently on home page.
Three main search criteria were identified to help get the user started; location, type of adviser and distance prepared to travel.
Additional parameters with pre-populated lists are made available on the results page which helps the user refine their search.
Visual design
The information gathered during the user research phase fed into the design choices with particular attention given to accessibility criteria such as colour, contrast and text readability. A design system was created to help maintain consistency during development and expansion of the app.
A/B tests demonstrated that green was the most successful choice for call to action buttons such as 'contact'.
The client was advised to encourage their members to use high-quality profile photos to convey quality and professionalism.
#0099BC
#E2F2F6
#78A252
#A49DFD
#F3B25D
Members area
The redesign was extended to the members area to improve the onboarding experience for new professionals joining the platform.
Tasks flow diagrams help to map out key interactions for users and are useful for understanding site structure and required components.
The account set up process for new members was broken down into steps to make it more manageable. A progress bar helps the user know where they are in the process. Tooltip and hints are used to help the user know why and how the information they're providing will be used, so they can optimise their profile.
Summary
After the re-design VouchedFor went on to secure significant investment, allowing them to expand their services and reach new markets.