Vanan's Translation
Web page revamp
- Ux Case Study (Interview Task)
Vanan prides itself as the leading provider of professional services online. Providing services like Transcription, Translation, Captioning, Subtitling, Audio Description, Typing, Voice Over and that is 100% Human-generated on-demand services.
Challenge:
Client Insight:
1. Page is generating less conversion
2. Spaghetti Ux
3. Bring more conversion with proposed layout
4. Create Microcopy, Interactive prototype.
I decided to create revamped ultra light-weight page (Responsive), with clear Ux in-oder to convey clear vision about the translation service with better UI/ Visuals. Where to make the user to upload queries, quotation, conversation, as simple as few clicks on any device. And it should be easy to understand and informative about the options and choices the users have.
Let's dig deeper!
_______________________________________________________________________
Research Process:
User Research | Job Card | Persona | Problem Statement
Before starting to brainstorm about the revamp of this website, I wanted to know how business people, PA’s, Developers, Marketing strategist feel about this website. I had asked my connections over linked-in, fb to help identifying the website Aged between 30 - 48 after conduction test with these people.
These are the basic issues as they could find on the existing website.
_______________________________________________________________________
Existing page speed test:
After referring through various speed test websites, I have decided to go with google speed test.
Though the desktop version scored average, but the mobile page is at critical.
This gave a clear vision to think mobile-first and design better approach.
_______________________________________________________________________
Website Traffic Route Map:
I had put down the routes or the ways how the user is coming into the website. into three major sections:
1. Primary (Web, Ads, Social)
2. Secondary (Qr, Blogs, Hyperlinks, Keywords)
3. Other (Various Channels)
_______________________________________________________________________
Design Process:
_______________________________________________________________________
Basic Wireframe (Scribble):
I spent about 2hrs to put in paper with multiple iterations, and have collected a bin of trash after this basic scribbles :).
I have made more than 6 options to replace with the updated Ux.
_______________________________________________________________________
Low-Fidelity Wireframe:
I have used these following online apps to bring the low-fidelity wireframe to re-look or make sure that I dont spend time on visuals rather than spending time to bring more simple Ux.
a fun experience and a new learning and it was easier than Balsamiq or Axure. I have made the annotations just to depict my ideas on the low-fidelity wireframes.
Here you go with the low-fid wireframe.
_______________________________________________________________________
Visual Design (Design System):
_______________________________________________________________________
Hi-Fidelity Designs:
Desktop Version:
Mobile Version:
Desktop & Mobile Screens (Full View)
_______________________________________________________________________
Launch Script:
A/B testing with old and updated web layouts
Informative elements (Top banner on homepage) before a week/month to inform the visitors about our upcoming-revamp page.
Have a clean and simple survey to read minds or feedback about the revamped pages.
Introduce Heat-Map to bring live data where the user click and read around to improvise pages.
Making sure there are no dead-end.
Making sure the page works with (Guerrilla Testing).
Speed Test, Ui Audit, Ux Audit conducted.
Support and chat, message support link tracked.
Working with omni-channels like, when users redirected from social links,
page is adapted to the information where the user comes from.
_______________________________________________________________________
Feedback:
"Gilbert Design looks neat and clean - Luc"
"Has many conversion point, love the way slider used for pricing table - Sarah"
"I hope you did your best, hope you pass your test - Rahul"
_______________________________________________________________________
Reflection:
Working on this project helped me learn that user research is crucial for the whole process of design application. Responsiveness is another important point in the UI/UX design. When the page shows the user immediate consequences of their action, there is a more personal connection. There are many people who support the idea that digital products of today should be minimalist and purely functional. However, my experience and practice shows that people want to both solve the problems and feel aesthetic satisfaction using services.
The balance of these things was my responsibility as UI/UX designer on this project.
