MyForesters Design System UI

2022-01-19T18:09:59+00:00

MyForesters Design System

Role: Design System UI | Wireframes | High Fidelity Mockups | Prototypes | Developer handoff
Client: Foresters Financial
Tools: Sketch, Zeplin, Illustrator

Overview

As UX/UI Designer on a medium-sized agile team, I was involved in the Discover > Define > Design > Testing phases of the project as outlined below. I was responsible for the end-to-end design cycle of all pages and UI patterns. This included the creation of wireframes, prototypes, high fidelity mockups, and the master Design System Sketch file. A case study can be reviewed below.

Goal

To provide Foresters members a better user experience to easily navigate and access member benefits on the MyForesters portal.

Our Approach

Due to the magnitude of the project a scrum approach was used to have the product built in a series of iterations. These sprints broke down big, complex tasks into bite-sized pieces.

Process

DISCOVER

Understanding MyForesters

As UX/UI Designer, it was key for me to understand the current the importance of the MyForesters portal and why it needed to be updated. Plenty of research into the current state of the portal, which helped identify issues with the user experience. Stakeholder interviews with BA’s helped define specific areas of need and guerrilla usability testing on other colleagues helped pinpoint areas of improvement in the experience.

DEFINE

Understanding the business and user needs allowed me to define the scope of work and create tasks that made sense for the design process. Great importance was placed on the design system as MyForesters would grow with new products over time, so creating a cohesive brand style guide for future use was a scaleable solution. Other areas of focus included improving responsive design, simplifying page content, and improving navigation.

DESIGN

UI Design System Library

An organizational rebrand was in the works, so adding the Brand team as stakeholders was useful in aligning with the brand vision. I designed new UI elements within a master Sketch library and hosted the files onto Zeplin for meeting presentations and the developer handoff.

Prototype

I created a user flow of each step of the solution, which helped the team visualize the final results.

High-fidelity mockups

I created pixel-perfect designs of pages and UI elements, as well as case scenarios of how these elements would display (ie. alert box) if initiated by a user. This allowed developers to focus on the programming and refrain from design guesswork.

foresters.com UX/UI Redesign

2022-02-04T21:40:08+00:00

foresters.com UX/UI Redesign

My role as UX/UI Designer was the redesign of the Foresters Financial homepage. I was responsibility for creating wireframes and high fidelity mockups of webpages for the front-end development team to implement. Upon completion, I was part of the testing team to ensure development was up to Brand Standards.

Role: UX/UI Designer
Client: Foresters Financial
Tools: Adobe XD, Illustrator

Website Before/After

Website beforeWebsite after

Desktop Wireframes + High-fidelity mockups

Mobile Wireframes + High-fidelity mockups

Foresters GO mobile app UI

2021-11-14T16:17:57+00:00

Foresters GO mobile app UI

My role was to create a completely new UI system for a white labeled Digital Health app provided by Dacadoo. New custom styles, elements and images were created and built into a customized Digital Style Guide.

Role: Style Guide | Low-fidelity mockups | UI Design | Developer handoff
Client: Foresters Financial
Tools: Adobe XD | Illustrator | InDesign

Mobile app UI

Responsive weekly email HTML/CSS

2022-02-04T21:42:11+00:00

Responsive weekly email UX/UI + HTML/CSS

My role was to design and develop a weekly deployed email in Salesforce. I used best responsive HTML and CSS coding practices to develop a reusable template for Outlook and Gmail.

Role: UX/UI + Responsive Development
Client: Foresters Financial
Tools: Adobe XD, HTML + CSS

Mobile & Desktop UX/UI webpages

Blog UX/UI + WordPress Development

2021-11-15T21:10:58+00:00

Foresters Blog UX/UI + WordPress Development

Role: Stakeholder Interviews | Site map | Wireframes | UX Designer | Web Developer
Client: Foresters Financial
Tools: Adobe XD, Illustrator, WordPress, HTML + CSS

Overview

My role included the design and creation of site maps, wireframes, high-fidelity mockups, WordPress integration with custom CSS, and testing/debugging. The client requested a website that could be self-managed by the Marketing team and the WordPress platform was the perfect solution.

Goal

To rebuild the blog website that provides users with a sense of Foresters community, featuring articles related to family, well-being, community, finance, and Foresters latest news.

Process

DISCOVER

Stakeholder interviews

Gathering feedback and analytics from the Membership team was important in my research. Some of the questions asked were:

  • What is the problem or need we are aiming to solve?
  • What are the Key Performance Indicators (KPIs)?
  • How else will we define success for this project?
  • What are the users trying to do?
  • What are their pain points?
  • How can we reach users through this design process?
  • Does a style guide exist?

Product audit

Navigating through the website and gathering metrics allowed us to see what was working and what wasn’t. It was clear that there were too many categories and tags that were not being effectively used. The Foresters Instagram channel could have a more prominent visual impact rather then just being an icon in the footer. The menu navigation was also overly complex and cumbersome. It could definitely be consolidated into a more digestible experience.

DEFINE

Sitemap

Based on our findings and constant back and forth with the stakeholders, I was able to create a site map of how the architecture of the site should be created. The different components for each page was also included on a sub-level.

DESIGN

Wireframes

There were only three web templates that needed to be designed, which would than be repurposed throughout the site; homepage, post page and an author page (later replaced with a category page).

High-fidelity Mockups

Building mockups in accordance with WordPress standards and Foresters Brand Guidelines.

TESTING

A pretty straight forward solution with mainly guerrilla testing using colleagues to discover issues and bugs. My part of this process included CSS debugging.

United Nations eLearning Design

2022-02-04T21:47:59+00:00

United Nations Design Education

My role was creating a technology-based instructional course that contained modules on the topic of “Vector Tracing.”

Role: eLearning Designer
Client: United Nations | Learning Lions
Tools: Figma | Keynote

Overview

Learning Lions is a non-profit organization enabling young adults in impoverished rural areas of Eastern Africa to work, and to live a life full of opportunity while remaining in their home area. The students are equipped with IT and media skills and are then encouraged to become entrepreneurs. Through selling digital services online on sites like Fiverr.com and Freelancer.com they become self-sustaining professionals.

Goal

To teach students the professional design skill of “Vector Tracing” to allow them to sell this digital service for profit.

Process

DISCOVER

Whiteboarding

Plenty of research went into identifying real world scenarios of frequently requested Vector Tracing work on different freelancer platforms like Fiverr.com and Freelancer.com. This information helped define the content of each module and what students needed to know in order to sell their skill of Vector Tracing as digital service. The following modules were discovered from this phase.

DEFINE

Preparation Modules

The goal is introducing Vector Tracing and comparing the different tools to accomplish the task.

Qualification Modules

Creating a practical approach of watching a demo video, followed by a final project for each module. All projects would be graded and upon completion of all 15 modules, the student would graduate with a certificate.

Upon completion, files were handed off to development for implementation into the system.

Responsive Newsletter Design + Development

2021-11-09T00:28:06+00:00

Responsive Newsletter Wireframe + Development

My role was to design and develop a responsive newsletter that was template-ready for IBM Marketing Cloud and user friendly for the Marketing team to send out weekly updates.

Role: UX/UI Designer
Client: Sun Life Financial
Tools: Axure, Illustrator, HTML + CSS, IBM Marketing Cloud

Sun Life Group Benefits Website UX/UI

2021-11-15T19:36:23+00:00

Group Benefits Website UX/UI + Development

As the Senior Digital Designer my role on this project encompassed research, analysis, and design. The research phase consisted of discussions with stakeholders on the project vision and goals for brand strategy. Our analysis included storyboards and a revised site map of how we wanted the user to interact with the new webpages. The design phase included all new UI components created in Axure.

Role: Wireframes | High-fidelity mockup | Front-end development | Developer Handoff
Client: Sun Life Financial
Tools: HTML+CSS | Axure | Illustrator

High-fidelity Mockup

Go to Top