Bitbns
Bitbns
Embedded Files
Revamping home page of India's largest cryptocurrency exchange platform
Revamping home page of India's largest cryptocurrency exchange platform
Project background
Project background
To redesign the homepage of bitbns into a more intuitive responsive website for desktop, tablet and mobile devices. The goal is to make understand diverse users about cryptocurrency and allow them to create wealth in crypto by investing.
To redesign the homepage of bitbns into a more intuitive responsive website for desktop, tablet and mobile devices. The goal is to make understand diverse users about cryptocurrency and allow them to create wealth in crypto by investing.
My role
My role
I am the product designer responsible for revamping the homepage of bitbns, The project duration is four months, from Aug 2020 to Nov 2020.
I am the product designer responsible for revamping the homepage of bitbns, The project duration is four months, from Aug 2020 to Nov 2020.
Process
Process
My team has conducted a usability study to understand more about the user needs and their pain points, edge cased while experiencing the current homepage of bitbns. I have observed strong patterns and themes with the user response. My team and I have analysed and synthesized the information by creating an affinity diagram. Later on, the themes were converted into more actionable insights.
My team has conducted a usability study to understand more about the user needs and their pain points, edge cased while experiencing the current homepage of bitbns. I have observed strong patterns and themes with the user response. My team and I have analysed and synthesized the information by creating an affinity diagram. Later on, the themes were converted into more actionable insights.
Affinity diagram for bitbns
Old homepage with actionable insights
Wireframes, lofi and hifi screens
Wireframes, lofi and hifi screens
Created paper wireframes for arranging the various elements. Finalised wireframe with the selected layout styles from various wireframes. I have made the low fidelity screen for the homepage in figma. I have included my team, CEO and CTO for design critique to get different perspectives of the approach. Insights from them helped me a lot to understand more on the business goals also while putting the users front and centre of the process.
Created paper wireframes for arranging the various elements. Finalised wireframe with the selected layout styles from various wireframes. I have made the low fidelity screen for the homepage in figma. I have included my team, CEO and CTO for design critique to get different perspectives of the approach. Insights from them helped me a lot to understand more on the business goals also while putting the users front and centre of the process.
Lo-fi and hi-fi screens of homepage
Illustration process
Illustration process
I have created a more visually appealing hero illustration to replace the old one. I have chosen an isometric illustration style and added in-depth details to each element to convey the brand value of bitbns. Spent quite a good amount of time getting inspiration and scribbling some raw sketches. Added purple as the primary colour theme, chosen vibrant gradients to emphasize more on key elements like the tokens.
I have created a more visually appealing hero illustration to replace the old one. I have chosen an isometric illustration style and added in-depth details to each element to convey the brand value of bitbns. Spent quite a good amount of time getting inspiration and scribbling some raw sketches. Added purple as the primary colour theme, chosen vibrant gradients to emphasize more on key elements like the tokens.
Final illustration for hero section of bitbns homepage
Iteration
Iteration
I have iterated many times on the wireframe stage to reduce the reworks at a later stage. It does help me to save more time and energy. I hit the road with more meaningful insights when I did another study with the revamped homepage. So, I have iterated the designs based on the first version of homepage study insights and came up with the final version of the homepage.
I have iterated many times on the wireframe stage to reduce the reworks at a later stage. It does help me to save more time and energy. I hit the road with more meaningful insights when I did another study with the revamped homepage. So, I have iterated the designs based on the first version of homepage study insights and came up with the final version of the homepage.
First and final versions of homepage
Major changes
Major changes
I have made the changes as per the actionable insights gathered from the study. Have a look at them below.
I have made the changes as per the actionable insights gathered from the study. Have a look at them below.
Merged the input fields for more intuitive buying experience
Language support to make it more equitable. Organised and categorised few sections.
Cleaner token ranking table with improved hierarchy
Replaced all the line graphic assets to isometric to match overall style
Testimonials
Testimonials
I have added users testimonials to increase the trust value between the users and bitbns.
I have added users testimonials to increase the trust value between the users and bitbns.
Addition of testimonials from bitbns users to provide more trust and transparency
Final designs
Final designs
I have picked the 'graceful degradation method' to design for the desktop first, since the majority of bitbns users will access the product from their desktops and laptops. Later I have created tablet and mobile screen sizes as well. So the user will have a seamless user experience irrespective of devices.
I have picked the 'graceful degradation method' to design for the desktop first, since the majority of bitbns users will access the product from their desktops and laptops. Later I have created tablet and mobile screen sizes as well. So the user will have a seamless user experience irrespective of devices.
Outcomes
Outcomes
Users were delighted to see the whole new revamped user experience of bitbns with visually appealing illustrations.
Users were delighted to see the whole new revamped user experience of bitbns with visually appealing illustrations.
What I learned and next steps.
What I learned and next steps.
I have learned how small changes in the design can impact many users in their daily life. There is always room to improve and grow. I will keep on conducting different studies individually and also with the team and iterate the designs to give more meaningful and delightful user experience to all the users of bitbns. The next steps would be accomodating a dark theme and adding different modes of experiencing bitbns according to the users like Complete beginner, Trader and Investor.
I have learned how small changes in the design can impact many users in their daily life. There is always room to improve and grow. I will keep on conducting different studies individually and also with the team and iterate the designs to give more meaningful and delightful user experience to all the users of bitbns. The next steps would be accomodating a dark theme and adding different modes of experiencing bitbns according to the users like Complete beginner, Trader and Investor.
Closing thought
Closing thought
I am the product designer for this project and created this project from scratch. I had a great experience working closely with my project manager, design team members, my fellow colleagues like Front end developers, Ux writers, and Marketing team folks. Bitbns gave us a great outcome of what we expected and also delighted many users.
I am the product designer for this project and created this project from scratch. I had a great experience working closely with my project manager, design team members, my fellow colleagues like Front end developers, Ux writers, and Marketing team folks. Bitbns gave us a great outcome of what we expected and also delighted many users.
Thanks for reading all the way here :)
Thanks for reading all the way here :)
Page updated
Google Sites
Report abuse