Case Study: iSafe Web App
Web-based Self service Portal for Eye-care Practitioners
iSafe helps eye-care practitioners (ECP) and companies to access data and manage their eye wear program through a secure Web-based app.
Role: Lead UX Designer & Web Dev Support
Client: Essilor of America
Timeline: From 2016 – 2018
Location: On Site (Dallas, TX)
📔 Project Overview
iSafety helps eye-care practitioners (ECP) and companies to access data and manage their eye wear program through a secure Web-based app.
The client is Essilor of América, the company manufactures and supplies optical products globally. They offer a wide range of eyeglass and lenses. The R&D team was assigned to work on the redesign and update of 4 internal and external outdated web apps including iSafety.
👥 End-users and Audience
Viajerologos.com is aimed at young and independent spanish speakers between 25-50 years old who are interested in related topics such as travels and photography.
As a certified User experience designer with multi-disciplinary skills, I defined requirements and followed the design process to create a new and engaging user experience to reach goals. All work was based on data gathered and insights from users during UX research.
🎖️ My Role as Lead UX Designer
The web app is aimed at eye-care practitioners and members from the portal, also project managers, engineers and other designers who work at the company.
As the Lead UX Designer, I collaborated across projects with other specialized team members to create and engaging user experiences for users, generate extensive documentation and provide guidelines en best practices to improve the user experience and user interface design.
Until now, everything that you see including the website, articles, photographies, videos in VR 360° and all the content on the social media channels has been created by myself. I’m using tools such as: Sketch, Figma, WordPress, MAMP, Notion, Adobe Photoshop, Illustrator, Lightroom, VN, Final Cut, Metricool, Google Analytics, etc.
Some of the first duties and milestones:
- UX Research and Analysis.
- Branding and logo design: Concept, guidelines, accessible color palette and typography.
- UX Design and user testing. UI user interface design and responsive layouts.
- Domain name & hosting configuration, web development, updates and maintenance of the website on WordPress.
- Define Growth Marketing strategies and data-oriented content creation that is SEO friendly and organic for search engines and social media channels through relevant content such as: Articles from the blog, travel phos, video reels for Instagram, TikTok and YouTube shorts.
- Recording and editing VR 360° videos (6-8K) in Virtual Reality for the YouTube channel.
Reviews about my work as UX/UI Designer
Feedback from Team Members & Colleagues
K. Thomas
Tech Manager at Essilor of America
A. Rodríguez
Software Engineer at Essilor of America
E. Jones
Software Developer at Rackspace Technology
During our time working together, Mario took ownership over our new design system. He worked with developers and product teams to ensure the design system was satisfying consumers. Our team being completely remote, Mario was very good at reaching out and staying in touch with all parties to ensure progress was made.
I believe any design team would benefit greatly from the skillset that Mario offers.
L. Fielder
UX Manager at Rackspace Technology
N. Arroyo
Software Engineer at Rackspace Technology
I. Garcia
UX Designer III at Rackspace Technology
🥊 Problem Statement
While iSafety has been running for almost 10 years, our challenge as the R&D team was to explore different ways to add more than 30 new features and complete overall redesign, site optimization, new look & feel with +50 custom Angular components and +30 new features that improved by +50% the engagement overall user experience.
Stakeholder requirements included:
- A dedicated website to access the design system to help developers at the company to build from scratch and update UI’s user interfaces faster and easier, because they are always busy working on other projects and the current web app is outdated and incompatible with newer systems.
- Optimize the time spent on tasks and level of complexity, therefore the developers can complete tasks assigned faster and easier.
- Generate Guidelines, Digital Assets and Documentation.
- The site and design system has to be accessible and WCAG 2.1 compliant.
- A components library and design system with guidelines that engage with the users and allow them to complete tasks.
🪢 The Challenges
Some of the challenges were to explore different ways to design and develop the new website that has to be accessible, adapt across devices and layouts sizes.
Key points and Requirements
- Collect data from the business and a variety of sources. Analyze requirements and business goals, estimate efforts to align roadmap.
- The current site didn’t have defined documentation. The initial version was not fully compatible, the components list was limited and overall usage is confusing.
- Define scenarios, user flows and screens needed for the UI. The brand needs a logo and defined guidelines. The website has to be functional, user-friendly and doesn’t require any support, allowing users to complete tasks easily.
- Create the UI style guide and Documentation for consistency, implementation and handover.
- The website has to be WCAG 2.1 compliant and accessible to all users. It has to use a custom typography and color palette.
- Developers were in charge of migration from ASP.net to Angular and AWS. Set up a new back-end and front-end environment using Angular 7 first, and then 8.
- New custom UI based on more than 30 customized Angular Material and Bootstrap components. I helped to style and develop 8 new custom components for specific user tasks.
- User-centered look & feel, compatible across browsers and fluid UI for desktop and mobile devices.
- During that time we also supported and improved 3 other web apps.
- For collaboration, the agile team and I worked on Jira, Slack, Zeplin, Invision, branches in Git for version control.
🎯 The Solution: Goals and Objectives
One of the team goals is to make an intuitive use-centered and aesthetic UI that is also responsive for mobile devices (Tablets and phones). I generated the HTML markup and implemented Flexbox for responsive and fluid user interface design, also integrated SASS to CSS for new variables as part of the front-end code improvements that I worked on.
- Users are able to access iSafety web app from desktop and mobile devices including tablets.
- Admin user can manage data and print reports with a new custom UI dashboard
- Users can print generated dynamic order forms.
- Track orders, eligibility and locate participating providers.
- Overall UI/UX design and increase engagement.
One key strategy was the collaboration with developers and other designers on the new components library, design system and the custom website where users can access easily to the components library and documentation from a browser on desktop and mobile devices.
Web App Complete Redesign
iSafety helps eye-care practitioners (ECP) and companies to access data and manage their eyewear program through a secure Web-based app. Some of the new goals and functionalities are:
- Users are able to access iSafety web app from desktop and mobile devices including tablets.
- Admin user can manage data and print reports with a new custom UI dashboard
- Users can print generated dynamic order forms.
- Track orders, eligibility and locate participating providers.
- Overall UI/UX design and increase engagement.
The Old Version
This is one of the examples that the stakeholders presented to me when they explained the current situation of iSafety and what are the challenges and goals. These examples helped to set a start point and a guide for further SDLC steps on the project.
We learned how, where and when the user will use the iSafety, and the main problems iSafety will solve.
- The app currently has a non-secure and basic “Login” system that allows users to access information presented on long lists of text and very limited functionality.
- The data displayed is not categorized and some buttons and links need to be uptaded.
- The UI is not responsive for mobile devices and some browsers are not supported.
- The look and feels is outdated and not very intuitive.
The New Web App
Overall redesign, site optimization, new look & feel with +30 custom Angular components and +30 new features that improved by +50% the engagement overall user experience.
The brand new Web Progressive App has easy access to information, It’s more than 50% faster and has +30 new advanced features including:
- New dynamic data tables with advanced filtering and search features for better user experience.
- New user roles, the Admin user can manage data and generate reports with a new custom UI dashboard.
- Responsive for mobile devices and cross-browser compatible.
- Reusable Angular Material Design components library for future steps.
iSafety will have more impact on users and generate more revenue for the company.
⭐ The Design Process
I began working on UX research to gather data from multiple sources in order to build User Empathy. I collected data from stakeholders and other sources related to the end-users. I Used the Design Thinking approach for solving problems and we followed the this process.
The UI design for the web app is desktop-frst and follows a graceful degradation strategy. It’s focused to be user-friendly by providing a clear navigation and helpful information on how to use the elements from the UI and features while keeping in mind accessibility and inclusive design.
📝 Phase 1: Discover & Research
The client provided the initial scope with requirements and first documents for evaluation. As a first approach, the team members and I shared comments and discussed with stakeholders in order to align the product roadmap from the beginning.
As the UX lead designer, I provided effort & time estimation, and how and what I’m going to be working on for the next 2 weeks, the tools I’ll use and the first rough concepts on pen & paper, I also wrote a list of questions regarding the workflow.
I started the process with the interviews we had with stakeholders and users to gather initial data. Then we generated empathy maps to analyze and better understand the end-user and their needs.
I conducted qual/quant research to collect data from: Interviews, surveys, competitive analysis, card sorting, usability tests and gathered user feedback.
Quantitative Research
Surveys: To gain more understanding of the users, I also conducted surveys to gather feedback and discovered that the audience want to have access to travel discounts and reliable content with tips and information related to travels and photography so they can explore new locations and take better pictures to capture those moments.
I wanted to find out which brands and destinations are in the top of mind of the users and what elements need to be prioritized. I asked a few questions to each participant to know their honest thoughts, keeping in mind that there were no right or wrong answers.
Use this link to see and answer the survey
- Users need a website where they can find travel discounts and valuable content to help them plan their trip without having to spend too much.
- The colors used on some websites and brands don’t have enough contrast ratio and the font is very small in some cases which makes the site less accessible to all users.
- For the development phase I will need to customize an accessible color palette and typography to spend less time and effort building and updating UI’s.
- Users mentioned that some of the current versions of the sites available online are incomplete and confusing to navigate, which increases frustration on target users.
- The analysis on social media is key and consists in gathering data from different accounts and then use that to monitor and improve marketing campaigns.
- The most used social media channel is Instagram.
- There are multiple tools available online for social media analysis. I customized a dashboard on Google Analytics, Facebook Insights and Dasheroo which is a tool that is free and allows you to create a custom dashboard, using KPIs and metrics most social media channels such as: Facebook, Instagram, Pinterest, Twitter and Youtube.
Market Research & CompetitOR Analysis (Secondary research)
During the research, I compared and analyzed the user experience, architecture information, site map, navigation, documentation and examples of each competitor’s site. I conducted a competitor analysis to compare the current solutions available online in order to detect areas of opportunity and learn a little bit more about the overall market in the travels and photography fields. I observed and analyzed various competitors and identified major challenges and some of the features they offer to users. Here are some insights:- Some of the websites are outdated or offline.
- Incomplete access to content because users need to pay for subscriptions in some cases.
- Overwhelming visuals and confusing content placement.
- Competitors don’t make videos in VR 360°.
- Content from different topics and locations.
Observations & Findings
The initial research set a base for my next steps in the design process of this project. It also helped me gain a clear understanding of the users, what are their main frustrations and goals. I was able to also detect the users who would be interested in the travel and photography website, and what they would expect of it. Analyzing the problems and struggles of these users allowed me to come up with effective solutions to their problems.Using the research findings, reference points and analysis while keeping in mind the needs and goals, I started to define user personas, scenarios, user journeys and empathy maps that helped to gain more context. I was able to detect what was currently available for users and what direction I wanted to take with viajerologos.com
- Security and accessibility are key for a better user experience
- Users want more discounts to save money when they travel.
- No direct competition in VR 360 content, but several existing brands posting travel and photography content.
- Optimize KPIs such as ROI and SEM costs from ads through strategic SEO to generate more organic traffic on the website that will also help to gain more leads and improve positioning of the brand.
- I found that some of the competitors had outdated websites and limited capabilities.
- The research also helps to figure out what specific difficulties users encounter when they try to complete the core tasks of the site such as installing the design system, finding components and copy/paste the code samples for implementation.
- I used analytics tools to access data on custom dashboards to measure and compare, allowing easy access to information and monitoring from multiple sources at the same time. I also conduct web analysis with Google Analytics which is a free tool that allows to know key metrics such as how many users visit the site, how much time they spend on the site and what pages are the most visited and how to get more visitors.
👤 Phase 2: Define
Based on the research, I generated user personas to represent the target audience, empathy maps and customer journeys to understand more about the user’s problems and needs. Each persona highlights their behaviors, goals and needs. It’s key to prioritize the users when taking design decisions.
💭 Phase 3: Ideation
I used insights from the user interviews and team meetings to create a sitemap. The new structure chosen was designed to make things simple and easy with only 2 levels of navigation.
An early ideation phase helped me to explore more solutions, design concepts and overall ideas to solve problems. I used insights from my research to create the first versions of the sitemap. This helped to oversee the screens needed and visualize the hierarchy.
✨ Phase 4: Design
I followed the below steps in the design phase:
- Paper Sketches
- Low and Mid fidelity wireframes with variations
- Clickable prototypes
- Final Design – High fidelity mockups
Paper sketches & Wireframes
To gather insights and validate design concepts, I started defining rough sketches on pen and paper, white board sessions as teamwork and worked on various levels of fidelity from lo-fi wireframes to hi-fi mockups on Axure, Balsamiq and Sketch.
These are some of the first-approach rough concepts I did during the first stage of the project in order to validate hypothesis and communicate ideas to stakeholders. Sometimes I conducted A/B testing with this fidelity as well. I sketched on pen & paper and designed lo-fi wireframes on Balsamiq and Axure to start the validate and iterate the design cycle.
Low & Mid-fidelity Wireframes
After a few iterations defining the flow and the screens needed, I started to add more details to the sketches by turning them into mid-fidelity and hi-fidelity wireframes. I worked on some of the sections and pages of the website using Figma to allow me to visualize how the website should be structured following flows for main user tasks.
These wireframes helped me to understand better, address the user pain points and improve the UX. I started defining the overall content of the pages by prioritizing the visual location of elements, actions and hierarchy.
The digital wireframes helped to understand better the benefits of the redesign, address user pain points and improve the UX. I prioritized the location of visual elements, actions, hierarchy and started defining overall content on the pages and list the components required for the UI’s.
📲 Prototyping
The team and I created more than 10 prototypes to validate ideas, designs, gather feedback, presentations to stakeholders and user testing. Working on a second diamond process, took us through ideation and prototyping to create a proof of concept that helped for hypothesis, POC and validations.
🕵️♂️ Usability Testing
During the process I constantly conducted usability tests to understand better the users and make design decisions to develop and refine my overall idea of the brand and the site through user feedback.
Also complemented my UX research with multiple A/B tests to compare and evaluate two or more variants of UI’s and find out which of them is more effective.
- Usability testing allowed me to identify problems, improve the quality of designs and UX.
- Validate assumptions and detect issues with the navigation and hierarchy of sections of the site and elements from the UI.
- Learn users behavior, collect data to take decisions.
Accessibility test
The tests conducted also helped to ensure that site is WCAG 2.1 compliant and accessible to more users. The initial version had significant variations in the color contrasts, particularly with yellows and oranges, affecting overall consistency. I selected colors in a meaningful and accessible way to generate this harmonious color palette to meet WCAG 2.1 requirements and improve the user experience.Considerations for better Accessibility
- I defined a custom color palette that has colors with enough contrast ratio. Avoid using 100% white and black values. Instead I gray-25 and gray-950.
- The Information architecture was optimized for a short menu that can be used on screen readers for all users, including users who rely on assistive technologies. The menu is always visible, aligned to the left on mobile devices.
- I used headings with different sized text for clear visual hierarchy. Also added icons to the navigation and some actions to make it easier to understand.
- Breadcrumbs, categories and text headings are displayed to help users navigate the site.
- The site has ‘alt text’ available on all images for screen readers. Most icons have a text label for more accessibility.
- The website development is aimed to increase performance, optimize loading times and easy access to information.
💎 Findings
Findings from usability studies helped to guide the designs for the hi-fi mockups. The usability studies also helped to detect needs such as ensuring the font size is readable and having enough color contrast to pass the accessibility test.
- The colors from the palette have enough contrast ratio and pass the AA and AAA accessibility test.
- There wasn’t a clear way for users to access the documentation and some sections of the page. The menu needs to be compatible with mobile devices
🏆 Hi-Fi Mockups
- It was very important to optimize the navigation and provide a better browsing experience for various mobile devices such as smartphones and tablets.
- To optimize the flow, the new simplified navigation menu helps users to go through the pages and content. The top navigation bar on mobile and desktop is always visible and consistent.
💻 Interactive Hi-Fi Prototypes
View on Figma the interactive prototype
Developing the Designs
After I finalized the mockups, I collaborated with front-end developers from my team and during this phase they took charge of building the enviroment and I helped to optimize the lines of code and name atributes for the SCSS files, all based on the guidelines that I had previously generated for the documentation.
I constantly checked the files and specific lines of code for optimization and maintenance.
✨ The Outcomes and Results
🎯 The impact: Improved Look & Feel with Intuitive Navigation
With the new web app, eye-care practitioners and company admins can now access to information from mobile phones and do it 50% faster.
The new version generated positive impact; compared with the previous version of the site, the new design and development, increased the user engagement rate by 50%. The redesigned web app is mobile friendly, it has 30 new features and it’s 50% faster.
What went right
- Building iSafety helped to work on other web apps. The new UI library, documentation and experience will help as reference for future projects.
- We designed and developed +30 custom components for the internal UI library.
- Speed performance of iSafety increased by +50%.
- The guidelines and documentation helps to establish a common vocabulary between everyone within the organization and improves collaboration across teams.
- The text size is readable and the new color palette that is accessible and WCAG 2.0 compliant. It’s also compatible for adding a dark theme in future phases.
- This project added more design and technology culture to the company.
- The team gained confidence from the Client, they brought more projects and budget to the R&D Team.
What didn’t go right
- I was one of the last members to join the team, and It took me a couple weeks to catch up and adapt to the workflow, but eventually It worked out well.
- The PM left the team in the middle of the project and that caused turbulence for a couple weeks while the new PM started gaining more confidence.
- I think that this kind of large-scale complex system usually brings a lot of pressure and responsibility to the team members, and sometimes it felt heavy but we worked hard and were able to tackle problems professionally as team work.
📙 Lessons Learned
This project was a great learning experience for me in so many ways. I feel like in overall our team accomplished an incredible amount of work considering the challenges, and a short timeline. I personally learned a lot about the process, gained new skills, collaboration with specialized teams working on new web technologies and gained new friends. I also learned more about myself.
I’d like to highlight two things I experienced while working at Essilor and I think will have the most impact on my ongoing career and creative process:
a. Empathize with the team for collaboration is key
While I do have experience working within interdisciplinary teams and leading creative direction through past jobs, this was my first time working at this level side to side with talented designers and developers, which brought on its own a set of challenges. I had to learn to be more aware and open to constructive critique, as well as learn how to adapt to other team members habits and methods. I believe this project has allowed me to develop new collaboration skills that will be helpful for other projects in the future.
b. The importance of research and user centered design
This project allowed me to do a lot more research thanks to good team strategies. I saw this as an opportunity to strengthen my UX research skills and get more involved in the process of learning about the users and their needs in order to have a better perspective and ideas in mind to empathize and define-solve user problems. Some of the methods and situations which I encountered for the first time were eye-opening and will be helpful to use moving forward in my design career.
⏩ The Next Steps
- Update the components/patterns library, add new items and refine documentation with visual examples.
- Conduct more usability testing to Identify any additional areas of need and ideate on new features. Generate new user flows and prototypes.
- Add more animated transitions to interactive elements. Display more confirmation messages when the process is completed.
- Design and add the new icons to the custom icons library.
- Offer support during the development phase, help optimize the overall code and design tokens.
More Case Studies
Need help with your digital product?
Let's create something amazing together! Reach out and tell us about your project.
