Overview
My role in this project took on a comprehensive in complete redesign of the core application, leveraging feedback and insights from the MVP to guide the process. My responsibilities included establishing a design system, defining and standardizing UX, visual design, and brand guidelines, and ensuring consistency across all aspects of the application. I also focused on creating a cohesive mobile experience, developing wireframes and user flows for new features, and setting design targets for the team. In addition to managing a team of designers, I maintained clear communication with stakeholders and product managers, providing updates and working closely with them to address any developer queries.
Scope: Interactive Design Course
Duration: 12 months
Tools: Sketch
Role: Concept, Wireframes, Prototype
Discover & Define
A Complete redesign of the core application
Project Background
Using feedback and learnings from the MVP to re-design and re-write the entire application UI, Front-End and Back-End.
#My Role and Responsibilities
-
Gain insights from the MVP.
-
Establish a design system.
-
Define, standardize and document UX, visual design and brand guidelines.
-
Define the experience for mobile.
-
Create wireframes and user flows for features.
-
Set design targets and manage a team of designers to achieve those targets.
-
Keep stakeholders and product managers up to date.
-
Work with product managers to clear doubts for developers.
#Process and Insights
Before the start of the project we had a MVP that was available for customers who were interested in our product idea to use and experiment with. For the application re-design I:
-
Went through customer feedback and screen recordings using Fullstory to analyze problem areas in each feature.
-
Had continuous discussions with stakeholders to align with business goals and their vision.
-
Was involved in discussions with the Marketing and Sales team to gain more information on their interactions with potential customers.
Design system
To establish a design system, I worked with a Visual Designer to explore different themes and ideas. Once a theme for the application was established I started defining all the different components, variations and states we needed now and for future use.
It is a sophisticated framework designed to ensure consistency, efficiency, and quality in their digital products. Although specific details of Santander’s design system may not be publicly available, here’s a general overview of the process involved in managing a design system that could apply to Santander or similar large financial institutions:
Established a core design principles that reflect Santander’s brand values and user needs. These principles guide the design decisions and ensure consistency across various platforms. Developed a comprehensive library of reusable UI components, such as buttons, forms, and navigation elements. Ensure these components are flexible and adaptable to different contexts.
Conducted research to understand user needs, pain points, and preferences. This may involve usability testing, surveys, and user interviews. Analyzed design systems of other financial institutions to identify industry standards and best practices.
Develop & Deliver
Once a design system was established I worked with Product Managers to plan the work needed to be done by the design team. Once a plan and timelines were established, I used a Design Process I defined for us to deliver designs smoothly.
The design process has the following steps:
//Step 1: Intake
Designers will meet with Product Managers to learn and exchange knowledge, ask questions and understand what they need to do.
//Step 2: Ideation
Designers will come up with different ideas and solutions for a feature or a problem.
If the feature is complex, the ideation step will involve a discussion between all designers where designers can present different solutions and collectively come up with a good design solution.
If the feature is simple, individual designers will work on coming up with ideas and wireframes and discuss with me.
//Step 3: Alignment
Designers will walk Product Managers and other stakeholders through the solution to ensure that everyone is on the same page. Depending on the feedback we receive we will either move forward or go back to Ideation.
//Step 4: Design
Once a solution is approved, designers will work on the high fidelity mockups. These will be reviewed and tested.
Here designers must:
-
Design the mockups for all the different states and scenarios.
-
Design the mobile experience for the feature.
-
If new guidelines are to be created, update the guideline documentation.
//Step 5: Review
The high fidelity mockups will be reviewed by Product Managers for the last time to ensure everything is in order before it is moved to development.
//Step 6: Hand-Off
Designers will add the relevant documentations and walk the developers through the feature before implementation starts. Here designers will clarify any doubts developers have.
//Pre-Flight Check
Once a feature is developed and added to the staging environment I will conduct a quick check to make sure everything is according to the design before QA starts testing.
Development
During development, I work closely with the developers to clear any doubts they have in features that I worked on end-to-end. For features that are fully owned by another designer, I encourage developers to directly work with them. In situations where both the designer and the developer needs further assistance I will step in to sort out their problems so they can move forward.
