Bank Project
Role
Completed 20 hours course, Abobe XD.
Independenly adapted whole design to 4 devices using graceful degradation method.
Exported Assets.
Modified images in Photoshop.
Searched for appropriate images and optimized them with Riot.
Goal
Per provided Brief main goal of this project is to attract more users to the website, by providing great user experience, bring new customers. Objective is to decrease the bounce rate by 40% in the first six months once the site goes live.
My personal Goal - to obtain knowlege on Adove XD, obtain understantding of UX/UI, practice skills.
Target Audience
Age - 20 - 45
Gender - 40% female, 60% male
Media consumption habits - 60% Instagram, 20% YouTube, 10% Twitter, 10% TikTok
Daily habits - Social media consumption, daily work commute, eating healthy, working out at the afternoon.
"Entire design does not speak well with the target audience they are trying to reach"
Per provided Brief the Project is focused on a redesign of their current NU Bank website, which looks outdated and far too complicated to use. User experience of their current website requires immediate change in order for users to have better experience while on the site. Text is cluttered, images are old fashioned and entire design does not speak well with the target audience they are trying to reach. Project is going to consist of research, architecture, wireframes, design and deliverables to the client. Their main problems at the moment are attracting more people to the website and when they are there, converting them to users, while up selling them services in the background. This is their main objective because currently they are doing that all in store, when people visit the bank, so it's teller's job at the moment. They are trying to move as many things online as possible.
We created paper wireframes with notations for six pages of the website, Dashboard's main page and Log in/Sign up.
We practiced creating Lo-Fi wireframes for 6 pages of the site, Dashboard's main page and Log in/Sign up.
Mockups and Prototype
During the Course we have created Mockups and Prototype for 8 pages of the website for big screens up to 1920 and 7 pages for the dashboard. See Prototype for Website and Dashboard.
For the project I used premium images and icons from Envato Elements.
Responsive Design
For the purpose of training, I practiced adapting whole design additionally to 4 devices using graceful degradation method. See Prototypes below.
Examples of adapted pages
We used colored and black and white versions for icons for hover states.
For the purpose of practice, I have exported assets for 14 pages Big Screen variant
SVG for icons, PNG foir images without backgroud and JPEG for images.
My Future Steps with the project
Bank project is my first UX/UI study project; it gave me understanding importance of paper wireframing, digital wireframing, layers proper naming and organization of layers, frames from the first steps of the project; understanding how prototyping works, components, nested components, different states of components; different approaches to exporting assets.
of As far as color palette was provided for the project, my next step would be to check several aspects of accessibility: to check if colors, text meets WCAG standarts. Will practice adding image descriptions, add captions.
My next step will be to explore Webflow, I will re-create pages of this project on the Webflow.