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.

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

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.

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.

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.

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.

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

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.

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.

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.

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?

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.

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.

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).

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

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

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.

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

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.

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

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.