AboutEmailResume
Abby G.

Northwestern Mutual

The focus of this project was taking an old site used by employees of NM and migrating its content to a newly developed product that improved the overall experience for users.
Role:Visual Designer
Duration:1.5 Years
Tools:Figma, Optimizely, Adobe Creative Cloud

Northwestern Mutual

The focus of this project was taking an old site used by employees of NM and migrating its content to a newly developed product that improved the overall experience for users.
Role:Visual Designer
Duration:1.5 Years
Tools:Figma, Optimizely, Adobe Creative Cloud

Northwestern Mutual

The focus of this project was taking an old site used by employees of NM and migrating its content to a newly developed product that improved the overall experience for users.
Role:Visual Designer
Duration:1.5 Years
Tools:Figma, Optimizely, Adobe Creative Cloud

Design Process

AnalyzeDefine & Ideation
DesignMockups
RefineReview
Alter
ImplementPrototypes
Handoffs

Design Process

Analyze

Define & Ideation
Design

Mockups
Refine

Review, Alter
Implement

Prototypes, Handoffs

Analyze

Define & Ideation

Jumping into this design mid product, our first step was to analyze. the current design. We spent time looking over past sketches and mockups to see where the last designers mind was heading.

Once we got a good grasp of what our path should continue on for the product improvements we were able to start adding our own design input into the project.

Our UX researcher began looking into some feedback from users to help nudge us in the right direction as we continued the mockup designs from the past designer.

From there we were able to create a solid mock up to get some testing and feedback from the users.

Analyze

Define & Ideation

Jumping into this design mid product, our first step was to analyze. the current design. We spent time looking over past sketches and mockups to see where the last designers mind washeading.

Once we got a good grasp of what our path should continue on for the product improvements we were able to start adding our own design input into the project.

Our UX researcher began looking into some feedback from users to help nudge us in the right direction as we continued the mockup designs from the past designer.

From there we were able to create a solid mock up to get some. testing and feedback from the users.

Design

Mockups

Now that we were feeling confident about the product's direction, we kicked off the improvement phase. Leveraging elements from the previous UX leads' mockups, we began refining the designs—moving from basic UI enhancements to addressing specific user requests identified in the earlier research.

We delved into reworking a sub-navigation system, ensuring seamless access to information. Additionally, we dedicated efforts to finding suitable locations for related links to coexist.
‍
Integrating inline components within the text and redesigning tables became focal points, all while introducing call-to-action (CTA) blocks without disrupting the primary focus of the content.

This collaborative effort resulted in a thoroughly revamped mockup, primed and ready for testing in our upcoming steps.

Design

Mockups

Now that we were feeling confident about the product's direction, we kicked off the improvement phase. Leveraging elements from the previous UX leads' mockups, we began refining the designs—moving from basic UI enhancements to addressing specific user requests identified in the earlier research. This collaborative effort resulted in a thoroughly revamped mockup, primed and ready for testing in our upcoming steps.

Refine

Review

During this phase, we carefully went through the updates in our mockups. To ensure we were on the right track, we included leads from the content team and sought input from our UX researcher. It was a collaborative effort to make sure the changes we made accurately reflected the users' requests for improvements to the site and content pages.

Our focus wasn't just on the surface-level updates. We dug into understanding our audience's needs, making certain that these adjustments resonated with their preferences. This thorough and cooperative approach became the foundation for a solid and user-friendly design.

Alter

Following the review, we initiated the process of altering the mockups. This involved a meticulous integration of feedback from team leads and users, where each piece of input was carefully considered and weighed. This deliberate process was instrumental in shaping subsequent alterations, ensuring not only the resolution of concerns but also the elevation of the overall user experience.

We took time to fine tune the designs to align seamlessly with the expectations and needs of our users. Every adjustment made was geared towards creating an experience that goes beyond meeting standards
‍

Refine

Review

Quisque id nulla justo. Etiam cursus eget ante sit amet malesuada. Phasellus eros nunc, ornare sagittis ullamcorper ac, elementum non mi. In hac habitasse platea dictumst. Nulla vel accumsan nisi, non ultricies mi. Maecenas arcu quam, finibus eget faucibus id, euismod nec magna. Nulla dolor purus, fermentum sit amet mauris vel, viverra hendrerit enim. Vestibulum fermentum placerat risus, a rutrum turpis posuere sit amet.

This step we reviewed our updates to the mockups. We pulled in leads from the content team as. well as our. ux researcher to make sure everything we updated. was reflecting the. users'. requests for improvements to the. site and content pages. (needs. chat. gpt)

Alter

Quisque id nulla justo. Etiam cursus eget ante sit amet malesuada. Phasellus eros nunc, ornare sagittis ullamcorper ac, elementum non mi. In hac habitasse platea dictumst. Nulla vel accumsan nisi, non ultricies mi. Maecenas arcu quam, finibus eget faucibus id, euismod nec magna. Nulla dolor purus, fermentum sit amet mauris vel, viverra hendrerit enim. Vestibulum fermentum placerat risus, a rutrum turpis posuere sit amet.

Post review we began. to make updates to the mockups we created. taking into consideration every piece of feedback provided from team leads, and user feedback.

Implement

Prototype

As we approached the final stretch, our attention turned to tidying up the prototype for the forthcoming release of the site. Our goal was to fine-tune every element, creating a clean and functional prototype to showcase to our cohort and hand off to the engineering team. This phase involved refining the interactive prototype, allowing for smooth interactions and transitions.

This practical approach offered a preview of how users would engage with the pages, ensuring a user experience that is both visually appealing and intuitively functional.


Handoffs

The UX/UI team joined forces with the engineers to facilitate seamless implementation of the new designs. Clear communication was paramount to ensure that every aspect of the design was conveyed accurately to developers and testers, guaranteeing proper behavior and a cohesive overall look.

Through collaborative calls with the coders, we meticulously reviewed each detail, ensuring that our designs were translated accurately to their understanding and work. This iterative process involved a constant exchange of feedback, aiming to simplify the implementation process and provide support to the development team in every possible way.

Implement

Prototype

POst review we began. to make updates to the mockups we created. taking into consideration every piece of feedback provided from team leads, and user feedback.

here we were able to take all the feedback given and apply it to the final prorotypes.

Working in. a collaborative effort to make sure all elements and components were perfected and cohesive with the end results the useres were needing for a successful product.

Handoffs

The final step included the ux/ui team collaborating alongside the engineers to make sure everything that needed implemented in these new designs were being communicated properly amongst our developers and testers for proper behavior and overall look. (not chat gpt yet)
AboutResumeEmailHome
Abby G.