Unicard App Redesign

Unicard App Redesign

Unicard App Redesign

Unicard App Redesign

Unicard App Redesign

Unicard App Redesign

Unicard App Redesign

Client

Unicard App Redesign

Role

Unicard App Redesign

Industries

Travel

Date

January 2023

As the only designer on the webpage redesign project, I was responsible for researching, ideating, and creating the design. I collaborated closely with stakeholders, including the project manager, developer, and client, to ensure that everyone was aligned on the design vision. I created wireframes, mockups, and interactive prototypes to test the design with users and refine it based on feedback. I also delivered design assets to the developer, including style guides and design specifications. Overall, my role was crucial in delivering a successful outcome that met the needs of the project and provided a positive user experience.

Goals of Redesigning

Improve user experience and satisfaction by simplifying the website's layout, content, and navigation.

Increase user engagement and conversion by providing a clear and intuitive path for users to achieve their goals.

Enhance the website's visual appeal and consistency by adhering to brand guidelines and incorporating modern design elements.

Streamline and optimize the website's information architecture to make it more relevant and accessible to users.

Problem statement

Unicard's web platform has experienced a decline in user activity and engagement, largely due to an abundance of information, a lack of clear goals, outdated design elements, and the absence of a coherent information architecture. This has resulted in high bounce and exit rates, leading to fewer new users and limited user interaction with the platform.

Business Opportunities

  • Attract new users: By improving the user experience and simplifying navigation, Unicard can attract new users to the platform and encourage them to explore its offerings.

  • Retain existing users: Enhanced user satisfaction and ease of use can help retain existing users, increasing their lifetime value and promoting brand loyalty.

  • Increase user engagement: With a more intuitive and visually appealing website, users are likely to spend more time on the platform, leading to increased engagement with various features and offerings.

  • Drive conversions and revenue: A streamlined user experience and well-structured information architecture can help drive conversions, such as new sign-ups, reward redemptions, and partner collaborations, ultimately generating more revenue for the business.

  • Strengthen brand image: A modern and consistent website design that adheres to brand guidelines will reinforce Unicard's brand image and credibility in the eyes of users and potential partners.

  • Attract new users: By improving the user experience and simplifying navigation, Unicard can attract new users to the platform and encourage them to explore its offerings.

  • Retain existing users: Enhanced user satisfaction and ease of use can help retain existing users, increasing their lifetime value and promoting brand loyalty.

  • Increase user engagement: With a more intuitive and visually appealing website, users are likely to spend more time on the platform, leading to increased engagement with various features and offerings.

  • Drive conversions and revenue: A streamlined user experience and well-structured information architecture can help drive conversions, such as new sign-ups, reward redemptions, and partner collaborations, ultimately generating more revenue for the business.

  • Strengthen brand image: A modern and consistent website design that adheres to brand guidelines will reinforce Unicard's brand image and credibility in the eyes of users and potential partners.

  • Attract new users: By improving the user experience and simplifying navigation, Unicard can attract new users to the platform and encourage them to explore its offerings.

  • Retain existing users: Enhanced user satisfaction and ease of use can help retain existing users, increasing their lifetime value and promoting brand loyalty.

  • Increase user engagement: With a more intuitive and visually appealing website, users are likely to spend more time on the platform, leading to increased engagement with various features and offerings.

  • Drive conversions and revenue: A streamlined user experience and well-structured information architecture can help drive conversions, such as new sign-ups, reward redemptions, and partner collaborations, ultimately generating more revenue for the business.

  • Strengthen brand image: A modern and consistent website design that adheres to brand guidelines will reinforce Unicard's brand image and credibility in the eyes of users and potential partners.

Project timeline

App Screen with open sidebar
App Screen with open sidebar
App Screen with open sidebar

Competitive analysis

Our competitive analysis study examined five similar companies in the loyalty program space, exploring their respective strengths and weaknesses in order to identify opportunities to improve Unicard's offering. By analyzing their websites and user experiences, we gained valuable insights into the industry and were able to develop a design that set Unicard apart from its competitors

User Research

Our user research process involved conducting interviews and surveys with Unicard's target audience to understand their needs, preferences, and pain points when using loyalty programs. The main goal was to gather direct feedback from users on the current version of the Unicard website, including their pain points and areas for improvement. By gathering this feedback, we were able to identify key opportunities to improve the user experience and ensure that our design addressed users' pain points. The user research findings played a critical role in informing our design decisions and ensuring that the end product delivered a positive user experience.

Participants

We recruited a diverse group of participants who are current or potential users of the Unicard loyalty program. Participants had varying levels of experience with the website and represent different age groups, genders, and technical backgrounds.

Research questions

  • What challenges do users face while navigating the current website?

  • How do users perceive the visual design and layout of the website?

  • Are users able to efficiently complete their desired tasks on the website?

  • Is the current website accessible to users with visual impairments?

  • What features do users feel are missing or could be improved on the website?

KPIs

  • Task completion rate

  • Time on task

  • Number of clicks to complete a task

  • Bounce rate

  • User satisfaction score

Methodologies

  • User interviews (one-on-one, remote or in-person)

  • Surveys (online, sent via email or social media)

  • Usability testing (remote or in-person)

Some of the interview questions

  • Can you describe your experience using the Unicard website?

  • What tasks do you typically perform on the website?

  • Have you encountered any difficulties or frustrations while using the website? Please provide specific examples.

  • How do you feel about the visual design and layout of the website?

  • Are there any features or functionalities that you think are missing or could be improved on the website?

Some of the survey questions

  • On a scale of 1-5 (1 being very difficult, 5 being very easy), how easy is it to navigate the Unicard website?

  • On a scale of 1-5 (1 being very dissatisfied, 5 being very satisfied), how satisfied are you with the visual design of the website?

  • Have you encountered any issues or difficulties while using the website? If so, please describe the issue(s).

  • Are there any features or functionalities that you would like to see added or improved on the website?

  • Do you have any additional feedback or suggestions for the Unicard website?

Here are some of the user pain points we have found during the research

  • Overwhelming information: Users are confronted with an abundance of information on the website, making it difficult for them to quickly find what they need and causing frustration.

  • Confusing navigation: The website's complex and inconsistent information architecture leads users to get lost while navigating through different pages, resulting in a poor user experience.

  • Outdated design elements: The visual elements, such as images and icons, appear outdated and unprofessional, which can negatively impact users' perception of the brand and its credibility.

  • Lack of clear goals: Users may struggle to identify and accomplish their goals on the website, such as redeeming rewards or exploring available offers, due to the absence of a clear and intuitive path.

  • Inaccessible content: Some text and background contrast issues make it challenging for visually impaired users to read the content, creating an accessibility barrier.

  • Irrelevant pages: Users may encounter pages with minimal value or relevance, which can cause confusion and detract from their overall experience on the website.

  • Inconsistency with brand guidelines: The website's inconsistent use of colors, typography, and other design elements can make it difficult for users to associate the website with Unicard's brand identity.

  • High exit and bounce rates: Due to the combination of the issues mentioned above, users tend to leave the website without completing any goals, resulting in high exit and bounce rates.

Analytics

In addition to conducting user research, we also leveraged Unicard's extensive web page analytics to gain insights into user behavior and address pain points. With over 12 years of data available, we were able to identify trends and patterns in user behavior that informed our design decisions. By analyzing user behavior and interactions on the website, we were able to address pain points and ensure that our design met the needs of the target audience. The use of web page analytics was critical in providing data-driven insights and informing our design decisions

Disclaimer* - Please note that due to the terms of our Non-Disclosure Agreement (NDA), we cannot disclose the actual web page analytics data for this case study. To protect the confidentiality of the data, we have replaced the actual metrics and statistics with random numbers. The metrics and statistics mentioned in this case study are for illustrative purposes only and do not represent actual data. Any resemblance to actual data is purely coincidental

Personas

To ensure that our design met the needs of Unicard's target audience, we created several personas based on our user research findings. These personas helped us better understand the needs, goals, and pain points of our target audience and provided a framework for making design decisions. By designing for these personas, we were able to create a user-centered design that addressed the unique needs of Unicard's target audience and delivered a positive user experience

Style guide

Design system

Our project included the creation of a comprehensive design system that was utilized throughout the project. This design system includes a library of reusable components, typography, color palettes, and iconography that ensured consistency and efficiency in our UI development. By leveraging this design system, we were able to save time and maintain a cohesive visual language across all screens and interactions. Our design system also helped us to ensure accessibility and usability standards were met throughout the design process. Overall, our design system played a key role in the project's success and will be valuable for future projects as well

Color Palette

The color palette is a critical aspect of our design, providing both aesthetic appeal and functionality. Our palette consists of a range of colors, each featuring a main hue with ten additional variations, all labeled with their name and contrast. The different colors are used for various purposes, including visual hierarchy and drawing attention to important elements, ensuring consistency and accessibility throughout the design.

We recognize the importance of meeting accessibility standards, including the WCAG 2 guidelines, to ensure that all users can access and use our digital assets. Our primary green color, Unicard Green, plays a vital role in our brand identity. However, we found that the original color lacked sufficient contrast, which caused difficulties in meeting accessibility standards, particularly for text and background elements.

To address these issues, we modified the original Unicard Green color from #96c11f to #86CB3C. The modified color provides better legibility, ensuring that our digital assets meet WCAG 2 guidelines for color contrast. Additionally, the new color supports our brand identity and provides a modern look for our digital assets. Overall, our color palette is designed to enhance the aesthetic appeal and functionality of our design while prioritizing accessibility for all users.

Typography

The Unicard Web has been redesigned using two different font families, "Helvetica" and "FiraGO", for both Georgian and English languages. The design style has been consistently applied to every line of text. Here are some of the styles used in the design, along with their respective font sizes and line heights.

Iconography

To maintain a cohesive Unicard web redesign, we carefully selected handcrafted icons from a library of over 2,000 with consistent style and patterns. Using these icons enhances aesthetics and user experience, promoting a recognizable brand identity. It's crucial to use icons from this library and ensure future additions are sourced from it to preserve visual integrity and prevent design inconsistencies. Consistency in design and user experience is vital for building a memorable brand identity.

Design system components

Here are some key components from our design system that were utilized in the project, including reusable components, typography, color palettes, and iconography. These components ensured consistency and efficiency in our UI development while maintaining a cohesive visual language.

Bellow you can see some of the components of the design system

Takeaways and future updates

The redesign of the Unicard website aimed to improve the user experience and address the main pain points identified through user research. The redesign process included several design improvements, such as a cleaner and more modern layout, improved navigation, and a simplified redemption process.

The redesign also incorporated several accessibility features, which received positive feedback from users.

The usability study findings showed that the majority of users reported increased satisfaction with the redesigned website, indicating that the user experience has improved. Participants experienced fewer difficulties navigating the website, with many users successfully completing their desired tasks more efficiently. The redesigned website's visual design and accessibility features received positive feedback, contributing to a more inclusive and user-friendly experience.

In terms of KPIs, the redesign resulted in improved user satisfaction ratings, higher task completion success rates, and decreased bounce and exit rates. User retention and loyalty program participation also improved significantly, indicating that the redesign was successful in addressing user pain points and enhancing the overall user experience.

However, some features could be further addressed in the next iterations, such as personalized content and recommendations, integration with social media and sharing options, performance improvements, ability to add the cards to ewallets, and improved account management.

User satisfaction ratings increased from an average of 6.5 out of 10 before the redesign to 8.5 out of 10 after the redesign.

  • Task completion success rate increased by 30%, with users able to complete their desired tasks more efficiently.

  • Time spent on completing key tasks decreased by an average of 20%, indicating that users could navigate the website more quickly and easily.

  • The bounce rate and exit rate decreased by 25%, with users spending more time on the website and exploring more pages.

  • The conversion rate increased by 15%, with more users signing up for the Unicard program and redeeming their rewards.

  • User retention improved by 10%, with users more likely to continue using the Unicard website and participating in the loyalty program.

These improvements demonstrate the effectiveness of the redesigned website in improving user satisfaction, engagement, and overall experience.

Thanks for diving into my case study
Ready for more?

LET‘S W🔥RK
TOGETHER

Email@email.com

© 2023 Levan.design