The project itself :
Project Overview
Credroad a personal credit-management responsive website which enable users easily to track and improve their credit score as well as review and apply for new credit cards based on criteria such as lowest interest rate.
Problem:
Most existing credit services fail to clearly and simply explain how to improve credit scores, recommend the best credit cards, or provide other essential information all in one place for the average user.
Goal:
Project which allows pass the crediting process step-by-step with all the information and hints in easy way.
My role:
UX designer leading the CredRoad website design.
Responsibilities:
conducting research,
storyboarding,
paper and digital wireframing,
usability studies,
iterating on designs,
making high-fidelity prototype
All about the user :
User Research
I conducted user interviews and created empathy maps to gain a deeper understanding of the target user and their needs. I found that many users struggle to understand how to navigate credit resources. They want a straightforward, easy-to-use product without needing to dive deeply into credit complexities. The information overload is confusing, and they simply seek a smooth, successful experience when obtaining credit.
Pain Points
Information:
Credit resources are often overloaded with information, making it unclear what actions to take. A simple, user-friendly personal credit solution is lacking in the market.
Interaction:
Websites often contain numerous unclear elements placed in the wrong locations
Experience:
Existing sites usually provide unclear user experience.
User Personas
Personas were selected by conducting user research and identifying common pain points, that frustrate and block the user from getting what they need from a product.
User Journey Map
It is the series of experiences Carlos has as he achieve a specific goal. It was built on the his experience.
I developed a user journey map of Mark's experience with the site to pinpoint potential pain points and identify areas for improvement.
Goal
Check and improve credit score, apply for an appropriate credit plan and related credit card.
The project schematically :
Starting the Design
Here I built some schemes and storyboards to clarify and understand information and architecture of the app. After I created paper wireframes and than proceeded with building digital wireframes with a low-fidelity prototype in order to conduct usability studies with stakeholders.
Sitemap
It's a structured scheme that outlines the pages and content hierarchy of the app.
Next step: creating the website map. Initially structure of the project was more complicated, and contained more services, sections etc. But the goal was to make it as simple as possible, and at the same time with all the info.
Paper Wireframes
They initially oriented on the basic structure of the homepage and highlight the intended function of each element.
I sketched several different layouts for how the homepage's information structure could appear. After reviewing all the versions, I merged them into a refined design. Additionally, since Credroad customers access the site on various devices, I began working on designs for different screen sizes to ensure the site is fully responsive.
The goal was to explore different ideas with wireframes.
Digital Wireframes
More "clear" version of wireframes in a digital form. Also all the important pages are added
in it.
On this step I used the Figma design tool to create digital wireframes of all the pages. Then I bonded all of them into the clear and smooth structure.
The goal is to show how all the pages and things interact with each other.
Usability Studies
This is an examination of users and their needs, which adds realistic context to the design process.
Initially, I conducted unmoderated usability studies with several participants, who answered various questions about the site and shared their observations while interacting with the low-fidelity prototype. After gathering the data, I analyzed and synthesized the information. Ultimately, I identified key themes and generated several insights.
The goal was to identify pain points that the user experiences with the app designs so the issues can be fixed before the final product launches.
Credit score:
Make the credit score image more understandable visually, add bureaus description.
Card comparison:
There is no clear way how to add cards to comparison, or remove them.
User dashboard:
On the dashboard user don’t have an information how to improve his credit score, it’s great to have all the things here.
The clear version :
Refining Design
On this step, first I created a static, high-fidelity Voo's app design (keeping in mind all the conclusions from the previous phase of usability studies) that is a clear representation of a final product called design mockups.
After that, I created a high-fidelity prototype of the app.
Mockups
These are a high fidelity design that represents a final product
I created all the app pages mockups, incorporating the right design elements such as typography, color, and iconography. I also included captivating and visually appealing images, and developed all the necessary components and elements.
The goal was to demonstrate the final Voo's app in as much detail as possible.
The project schematically :
Outcome
Now, finally, it remained to pay attention to several takeaways and plan some further steps.
Takeways
The series of hand-drawing frames that visually describe and explore a user's experience with a product.
Impact:
Our target users have described Credroad's design as intuitive and user-friendly, allowing them to easily check and improve their credit scores, find all necessary information, and choose the most suitable credit plan.
What I learned:
The main thing I learned that even a small change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user.
Next Steps
The series of hand-drawing frames that visually describe and explore a user's experience with a product.
Conduct follow-up usability testing on the new app iteration.
Identify any additional areas of need and ideate on new features.