Retina Global Responsive Design | In Progress
Role:
UX/UI Designer
Tools:
Figma, Adobe Creative Suite, Adobe Illustrator, Wix, Google Suite, WebAim/Accessibility Checker, HTML, CSS
Skills:
Responsive Web Design, Branding, Logo Design, Style Guide, Prototyping, Accessibility, User Flows, Wireframing, Graphic Design, User Interface Design, Sitemaps, Cross-functional collaboration
Retina Global
Accessible, Mobile First Website | In Progress
Branding & complete web flow redesign including accessibility standards, logo design with Adobe Illustrator, site map, user flows & style guide in Figma.
Problem Statement:
Individuals facing retina complications and their caregivers require a secure, user-friendly, and reliable online platform to access essential information, offer support, and foster meaningful connections.
Design Process
Empathize
Define
Ideate
Prototype
Test
To redesign and rebrand the Retina Global website, offering customers, sponsors, and those seeking retina-related assistance a professional, secure, and user-friendly interface that resonates with the organization's mission to sustainably combat global blindness and easily allow volunteers to regularly update the website.
Objective
Lead UX/UI Designer, collaborating closely with Retina Global's CEO and the development team.
My Role
Context
Incohesive
Unencrypted
Lack of CTA's
Not Accessible
Solution
The Retina Global website and branding have been designed over time through volunteer efforts, necessitating a cohesive, professional overhaul.
Users expressed concerns about the site's credibility and security due to the lack of encryption, emphasizing the need for a comprehensive redesign that both attracts users and aligns with the nonprofit's goals.
There were no clear calls to action (CTAs) on the website, and there was no established user data collection funnel for email marketing, resulting in missed opportunities to engage with users meaningfully.
Inconsistent branding and UI design, a challenging-to-read logo, and non-responsive website presented obstacles to effective digital marketing and accessibility
The redesign will address these challenges by creating a responsive and user-friendly web application that aligns with Retina Global's objectives. This transformation will enhance readability, accessibility, and the overall user experience, ultimately building trust with site visitors and helping combat global blindness.
User Personas
Rose, Patient
"As a person struggling with retina issues disrupting eyesight, I want to learn more about my options for treatment."
-
Background: Rose is a 60-year-old retiree living in a rural area. She was recently diagnosed with age-related macular degeneration.
-
Goals: Rose wants to learn more about her condition, find local resources for treatment, and connect with others who have experienced similar challenges.
-
Pain Points: Limited internet access, difficulty reading small text, and concerns about the cost of treatment.
Goals and Solutions
-
The website will prioritize high contrast and accessibility for users with retina issues.
-
It will adopt a modern and uniform branding that resonates with Retina Global's professional mission and vision.
-
The new, encrypted website will be designed to facilitate easy updates by volunteers, adhering to the style guide and consistent templates.
-
In addition, strategic placement of CTAs throughout the website will be employed to boost user engagement.
User Flows
Low Fidelity Prototypes
Logo & Branding
Site Map
Conclusion
-
I designed a responsive mobile website that fully complies with retinal accessibility requirements, branding standards, and professionalism.
-
I also revamped the logo and branding to convey a fresh, modern, and professional image that underscores the core values of "education, outreach, and support." The original logo was illegible, lacked accessibility compliance, and featured inconsistent colors and fonts.
-
The new logo incorporates the orange color, symbolizing retinal health, and combines it with a globe to signify Retina Global's global mission in supporting those with retinal issues. This logo adheres to all accessibility standards for individuals with eye concerns.
-
In response to the original website lacking essential functionalities like subscription, donation, contact, and connection options, I strategically integrated prominent Calls to Action (CTAs) throughout the site, including buttons for donating, subscribing, and getting involved.
-
To maintain consistency and professionalism, I developed a comprehensive style guide for branding and website guidelines.
-
We enhanced the website's security by implementing encryption measures to ensure user data safety.
