Enhanced user experience by optimizing responsiveness & acces...
Hassan Ali
Web Designer
Product Designer
UI Designer
FigJam
Figma
Whimsical Wireframes
Optimized Responsiveness and Accessibility
Mockup of the hero image
Overview
Problem: The website has an outdated design, non-intuitive navigation, heavy text content, and poor mobile responsiveness. These issues compromise user engagement and reduce the likelihood of conversions.
Outcome: A revamped website with modern UI/UX principles enhances user engagement, improves navigation, optimizes mobile responsiveness, and increases conversion rates.
Role + timeline: Product Designer, 11 days
Research Phase
Difficult to navigate & find information
The existing website lacks modern aesthetics and usability, making it difficult for users to navigate and find information quickly. There is also a significant opportunity to streamline content for better readability. Difficult to navigate & find information
(Previous Design)
Identified content & design patterns
I analyzed 3-to 4 top expatriate websites to understand what type of experience visitors get when they land on the websites. I also identified the content and design patterns for different sections and formed a hypothesis about what should be included in a website and how it should be displayed.
(One of the competitor of expatriate global)
Hypothesis
By implementing a modern, user-centric redesign focused on intuitive navigation, streamlined content, prominent CTAs, and enhanced mobile responsiveness will significantly improve user engagement and conversion rates.
Ideation Phase
Organizing & structuring the pages
Created a sitemap to define the hierarchy of pages and ensure intuitive navigation, making it easier for users to find information quickly and efficiently. The sitemap served as a blueprint for organizing content and improving the overall user experience by providing a coherent and navigable structure.
(Redefining the flow of the expatriate website)
Early visualization of design layout
The creation of the wireframe allowed for early visualization of the design and helped identify potential usability issues before detailed design work began. They served as a foundation for discussing and refining design ideas, ensuring that the final product would meet user needs and business goals effectively.
(Wireframe of the website)
Design Phase
Reflecting brand's identity & values
A comprehensive style guide was developed to standardize the website’s visual elements. This ensured a unified look and feel, enhancing the user experience and reinforcing the brand’s identity.
(Typography and color palette)
Redesigning the interface with a better UX
Revamped the previous design by making it visually appealing with improved navigation, streamlined content, emphasized CTAs, and enhanced accessibility features, which you can see below.
(Close mockup of the home page)
(Mockup of the home page)
(Close mockup of the service section)
(Close mockup of the process section)
Prototyping
Walk through to show what's inside
Check out the prototyping of the revamped website design by clicking on the mentioned links below.
Final Takeaways
Collaboration: I've collaborated with different departments for this project, from copywriting to graphic design to development. Every person played their part, and their feedback helped me refine the outcome.
Continuous learning: Since I didn't know anything about expatriates and their benefits. Through research, I gained an understanding of its application, which helped me acquire new knowledge.
Time management: Collaborating with other departments to deliver the outcome on the deadline helps me manage time effectively and use resources wisely.
