UI/UX design portfolio

SITUATION

Before the creation of my digital standards team, many Securian development teams worked independently and without UI/UX expertise. Without the expertise, some website experiences were difficult to use, off-brand visually and sometimes inaccessible. Luckily, with the creation of the Securian design system, we changed all of that.

TASK

Help development teams integrate our design system and improve their web experiences.

ACTIONS

As the lead UI designer, my team built the Securian design system comprised of components, patterns, foundations and layouts that could be used by teams to build websites and apps promoting Securian's financial and insurance products. See Fig. 1. below

Fig. 1. Graphic above shows a sampling of components and patterns from the Securian design system.

In addition to creating the new system, we also maintained the system's documentation site that included information, code snippets and demos that developers could interact with to learn how a component functioned. See Fig. 2. below

For digital designers, we created Sketch and Figma prototyping libraries based on the design system and established weekly office hours for any team needing help integrating our design system elements.

Fig. 2. Our documentation site was crucial to our community. The above graphic shows my Typography page design that includes code snippets, component information and interactive demonstration.

SITUATION

An internal management system needed a design refresh from its original data table-heavy page design.

TASK

Leverage AI to modernize the web app by redesigning the interface and page layouts to be easy-to-scan and use.

ACTIONS

1. Collaborate with team to understand pain points of the existing system
2. Utilize AI to develop a new redesign that includes a dashboard design and better data table usability
3. Prototype, ideate, test, feedback

RESULTS

The results of the redesign effort included the following improvements:

1. Less overwhelming experience: The original design was intimidating due to the vast amount of tables and data presented on each page.
2. Easy-to-scan: The new dashboard layout design promoted easy scannability in which key statistics could be highlighted in cards instead of buried in tables.
3. Improved tables: Even though we still needed to include tables in the redesign, rows and columns were revamped to include more spacing, more graphical visuals and more filtering options that allowed users to customize views. The mobile experience was also improved to be clearer visually and more functional at smaller screen sizes.
4. Improved accessibility & efficiency: Migration to the Bootstrap framework would offer improvements in speed, responsiveness, consistency and accessibility.

SITUATION

Securian needed my help making charts and other data visualization graphics accessibile based on the 2.1 WCAG guidelines. After my assessment of the graphics, I determined that multiple solutions would be required to fix the current accessibility problems seen below.

Accessibility problems:

• Problem 1: Color legend relies solely on color to convey information.
• Problem 2: The green color fails the contrast standard.
• Problem 3: Chart's data is not accessible to screenreaders.

TASK

My task was to research all the Web Content Accessibility Guidelines (WCAG) related to data visualization graphics and then provide solutions along with accessibility recommendations.

ACTIONS

Three actions were needed and are summarized in the graphics below.

FIRST: My solution to resolve the color legend problem was to integrate differing shapes instead of relying solely on color. (Fig. 1.) The shapes help colorblind users to associate the legend categories with the corresponding data line more easily.

SECOND: To resolve the low contrasting green color, a new color was needed. I determined an higher contrasting color replacement (Image below) and collaborated with brand to get approval and to set new data visualization integration guidelines.

THIRD: To solve the screenreader accessibility issue, I advised the product team to include code for a table of data. By including a table of data, screenreader users would have access to the data and users who prefer to view table data over graphical data would have a toggle button option. (Image below)

RESULTS

Aside from enabling screen reader users to experience Securian data visualization graphics successfully, my accessibility solutions became a catalyst for data visualization changes throughout the organization. By sharing my work with other Securian product teams, adhering to accessibility standards within graphics became part of the initial planning stages rather than an afterthought. The graphic below summarizes the fixes needed to make the original chart compliant with WCAG standards.

SITUATION

Securian's brand style guide once lived as a 68 page PDF. This lenghty PDF was problematic in the following ways:

1. Locating specific brand content was difficult
2. The large file size sometimes failed to send via email
3. There were version control issues throughout servers
4. The PDF technology was too restricting

TASK

Migrate the contents of the Brand style guide PDF into a new website named Brand Center. Use research to define primary target users and to organize content.

ACTIONS

1. RESEARCH: Through employee interviews and surveys, we identified primary brand users to be Developers, Marketers and Creatives. From the collected data, I created user personas to help define user needs.

In addition to defining our target users, the research revealed which brand content our users needed the most. (Image below) This knowledge helped us prioritize homepage links and helped to establish the site structure and content.


2. DESIGN: After stakeholder approval of our preliminary plan and ideas, I designed high fidelity prototypes. The below homepage image was influenced by the most requested brand content data.

   However, the subpages were more challenging to create due to our differing target user needs. Using the Color page image below as an example, we knew that mixing developer specific color code information with general color information would confuse our less tech-savvy users. So my solution was to separate user content using tabs. With tabs, each user could select the tab that corresponded to the color information needed. The animated graphic below illustrates how the color content differed on each tab.

   

RESULTS

Migrating the style guide content from PDF to website improved efficiency and brand consistency across the enterprise. Other benefits include:

• Easy to locate brand content quickly
• No more versions control issues presented with the PDF
• Able to update and distribute new brand information instantaneously
• Improved scaleability

SITUATION

While working for the University of Minnesota, I designed the interface for their mentoring program app. The mentoring program paired students with university alumni so that students could learn more about their career. The app acted as the central hub for communication, career discussions, and event planning.

TASK

Apply best UX and UI practices to create the interface design and flow for the app.

ACTIONS

Much of my time was spent collaborating with various teams to plan and generate ideas for the app. I created wireframes (Fig. 1.) and prototypes according to the digital design system (Fig. 2.) After stakeholder approval, I prepared and provided the graphics to the development team for app creation.

SITUATION

Cyrus Intersoft developed Java software that enabled online bank users a customizable environment in which Java apps could be selected and arranged to create personalized dashboards. Our sales team needed prototype designs to show bank decision-makers how our software could work for their bank customers.

TASK

To create interfaces and graphics used in demonstrations showcasing our Java technology.

ACTIONS

As the lead UI designer, I collaborated with various cross-functional teams to create the interfaces for this bank demonstration. Fig. 1. shows the introductory screen in which users are tasked with customizing the dashboard by dragging and dropping tools from the toolbar.

Fig. 1. Tools (aka Java apps) could be selected and organized to build customized dashboards.

Fig. 2. Java tools offer convenient banking such as bill pay, account tracking, transaction history and more.

Fig. 3. Users have access to a library of tools that can be added to the toolbar.

RESULTS

Our demonstrations were crucial for introducing the benefits of our technology to potential customers. We found success in customizing each demonstration visually using a company's logo and brand colors. Initially, customizing each demo for a customer added additional time to the process. As a result, I reduced development time by creating generic demonstration templates that could be customized by developers simply by swapping out logo graphics and brand colors. This reduction in development time freed up our developers and allowed our sales team to meet with more customers to pitch our technology. A sample video of the demonstration gives you an idea of how the prototype worked.

Fig. 4. A video showing concepts of the demonstration.

SITUATION

My department did not have or need an emergency protocol plan. Until one summer weekend a university emergency occurred. After the event passed, my team was tasked with creating and documenting an emergency protocol plan we later named: Rapid Response Procedures. The video below shows the mobile app prototype that was used to distribute the information.

TASK

Create a mobile app solution to distribute emergency information.

ACTIONS

1. Collaborate with my team to determine content and the best distribution methods.
2. Build wireframes and prototypes using Figma and Principle.
3. Work with developers to learn their mobile app graphic needs.

RESULTS

The mobile app provided a more accessibile version of the emergency protocols compared to its PDF counterpart. The app also enabled improved communication between team members and the ability to track tasks.

SITUATION

Cyrus Intersoft designed a Java solution named Speiros. The below graphics show the responsive website that I designed a programmed for using html, javascript, CSS and Bootstrap.

TASK

Create a responsive (mobile & desktop) website that promotes and distributes their software.

ACTIONS

Collaborate with developers and stakeholders to design and program the website. The Fig. 1. and Fig. 2. show the desktop and mobile versions of the website.

Fig. 1. The graphics above show the desktop version.

Fig. 2. The graphics above show graphics for the mobile version including the login process.

RESULTS

My responsive website seen here was a key promotional tool for reaching people worldwide and for the distribution of our software. The experience demonstrates my ability to jump to new design challenges quickly while providing professional looking designs.

SITUATION

As the lead designer, my task was to design an interactive video targeting university students. Interactive video works much like a website but instead of graphics, narrated video plays seemlessly throughout. Our goal was to create an interactive experience that would help us learn more about our users while promoting the alumni association.

TASKS

Design an engaging interactive experience targeting university students.

ACTIONS

This project required many actions including:

1. Collaborating with stakeholders to determine needs and scope
2. Developing wireframes (Fig. 1.) for planning and stakeholder discussions
3. Learning the authoring capabilities of the Hapyak platform (now Brightcove) to create an interactive experience
4. Designing an interface based on brand standards and best UX practices (Fig. 2.)

Fig. 1. The image above shows a low fidelity design. Utilizing low fidelity designs allowed me to iterate quickly and help stakeholders visualize ideas and understand workflows.

Fig. 2. The high fidelity prototype here shows how users were able to learn more about the university campus by viewing video snippets containing voice narration. By answering optional survey questions thoroughout, users could receive free university swag while helping our analytics efforts.

RESULTS

This new interactive video format was successful in appealing to the interest of university students based on the amount of free swag we gave out. The data gathered from the surveys helped us learn more about the student population and was used to drive marketing decisions.

SITUATION

SelfEco makes catering utensils and planting pots from an eco-friendly, compostable material. I was contracted by the company to design their website in which customers could place orders for the products.

TASK

Aftering creating their print collateral and branding, I was tasked with designing their online web presence.

ACTIONS

There were four main actions related to building the website.

1. Client meetings were needed to determine the project's scope and budget.
2. Low fidelity wireframes were created to help with ideation and planning. Fig.1.
3. High fidelity designs were created for final tweeks and client sign off. Fig.2.
4. Coding of site and testing were the final steps needed.

RESULTS

Being a jack of all trades allows me to provide a variety of services offered by high end design agencies without the high cost. For this website, I was able to design, code and take all the product photography all under budget. And, by utilizing the Shopify ordering system, we were able to save time and get products to the market fast.

Being a well rounded visual designer allows me to pivot when necessary. This may include designing icons, style guides, animation, decks, branding, and data visualization.

ABOUT THE SLIDE GRAPHICS BELOW

1. These are some of the branding and style guide designs that I have worked on
2. My designs are inclusive and adhere to WCAG accessibilty standards

SITUATION

SelfEco makes catering utensils and planting pots from an eco-friendly, compostable material. I was contracted by the company to design their website in which customers could place orders for the products.

TASK

Aftering creating their print collateral and branding, I was tasked with designing their online web presence.

ACTIONS

There were four main actions related to building the website.

1. Client meetings were needed to determine the project's scope and budget.
2. Low fidelity wireframes were created to help with ideation and planning. Fig.1.
3. High fidelity designs were created for final tweeks and client sign off. Fig.2.
4. Coding of site and testing were the final steps needed.

RESULTS

Being a jack of all trades allows me to provide a variety of services offered by high end design agencies without the high cost. For this website, I was able to design, code and take all the product photography all under budget. And, by utilizing the Shopify ordering system, we were able to save time and get products to the market fast.