Case Study

Minnesota State Arts Board
Website Redesign :
Focus on Homepage & Navigation

redesign Objective

  • alleviate users feeling overwhelmed and frustrated

    • in order to increase engagement from stakeholder's target audience: Minnesota artists

Screen Shot 2021-08-24 at 3.59.40 PM.png

My Role

I collaborated with my teammate, Hailey Strobel, in the early stages of the project’s proto-person creation, heuristic evaluation, style guide proposal, and initial user testing. After the initial research stage and because of the time constraints of the project, our focus became a redesign of the home page and main navigation for desktop and mobile.

My unique areas of contribution include:

low-fi mockups

further user testing and assessment

high-fidelity creation

style guide completion

Tools Used:

Figma, Miro

phases of redesign

The Stakeholder

The Minnesota State Arts Board is a state agency that stimulates and encourages the creation, performance, and appreciation of the arts in the state.

MSAB logo.jpeg

The Role of its website

Its website offers many resources, both informational and financial, for individual artists, arts organizations and schools, as well as presenters of the art.

1

Research

Heuristic Assessment

We conducted an ongoing heuristic evaluation of MSAB's website that we began before user testing and continued to update as we received data from user feedback sessions.

​The overall positives: consistency. 

The majority of elements is consistent in format on the website itself and functions similarly to where users encounter these elements on other websites.

Example:

  • navigation bars are located at the top and side of the webpage

  • logo is located in upper left hand corner

​​

Screen Shot 2021-08-23 at 2.41.36 PM.png

​Example:

  • text contains bolded and enlarged section headings

  • linked text is underlined​

A

A

A
A

Screen Shot 2021-08-23 at 2.41.36 PM.png

​What's lacking overall: clarity, simplicity, and user fulfillment. 

  • words are redundant

  • words lack clarity and are misunderstood within website’s context

  • pages are text heavy without visual aids

  • information categories and subcategories lack synthesis

  • important information is not easily seen

  • users are left feeling frustrated and resorting to the search bar for help

Screen Shot 2021-08-23 at 2.55.57 PM.png

1

2

3

4

1

2

3

4

Top Nav Bar

Majority of users did not use or even see until later

Side Nav Bar

Majority of users were attracted to the side nav bar.

Link

Though website has link to some COVID relief info at top half of home screen, majority of users did not see it and requested a way to easily access this info.

Button

Majority of users are drawn to this button; however, though it's an important CTA, it isn't the main purpose of the org or reason why users visit the site.

1

Initial Research

User Testing

We conducted a Usability Testing Plan, which consisted of 5 unique tasks ranging in scope from navigating the home page to locating information more “buried” within the website. 


We conducted these tests with 10 individual users ranging in age from early 20s to late 40s and with varying degrees of previous experience with the website.

Screen Shot 2021-08-23 at 1.58.17 PM.png

post it colors = User

stars = repeated and/or key user insights

The Problem

Although the information that it contains is vital for its users, the poor navigability of the website causes not only emotional frustration but also users cannot find the practical information they are searching for, even when finally resorting to the search bar.

The Solution

To give users greater ease in using MSAB's website, we propose updates to its design with goals to:

  • improve nagivation with redefined categories and clear clickability

  • alliviate word-heavy pages with images and negative space

  • optimize colors and font size for accessibility

  • create responsive design for desktop and mobile

2

Empathizing & Prioritizing

The User "North Star"

User Persona:

 

Our User Persona reflected someone who would come to the MSAB site with interest but without experience. With this perspective, June would help to guide our redesign solutions. The goal would not be to inspire the user to support the arts, for example, but rather help support someone already in the field gain further knowledge.

Screen Shot 2021-08-23 at 4.12.12 PM.png

Home Page & Navigation Focus

Feature Prioritization:

 

After synthesizing our solutions in our initial research phase, the majority of our redesign solutions fell within the category "do it now" since the value of the solutions for both MSAB and the user were "high" and also required effort within our skillset. These all fell within the uber categories: Redesign Homepage & Redesign Navigation.

Screen Shot 2021-08-23 at 4.14.13 PM.png

3

Prototyping, Testing & Iterating

Top Navigation & Homepage Redesign

putting into action UX/UI research and ideas​

Redesign Timeline:

STAGE 1

Card Sorting

  • taking inventory of current navigation categories

  • resorting categories 

STAGE 2

Navigation Redesign

  • Lo-Fi mockups

  • Lo-Fi prototype

  • testing

  • iteration

STAGE 3

Homepage Redesign

  • Lo-Fi mockups

  • testing

  • iteration

3

Prototyping, Testing & Iterating

- Top Navigation

Card Sorting

information un-categorization

 

MSAB's navigation categories were extensive to the point of redundancy and causing confusion. Taking inventory of how categories were worded and removing formatting helped to assess the situation with fresh eyes to then answer the question: how might one streamline the navigation to increase clarity for the user?

Screen Shot 2021-08-23 at 6.07.25 PM.png

3

Prototyping, Testing & Iterating

- Home Page

Desktop Home Page v.1

 

The first version of the homepage attempted a no-need-to-scroll format. Though the attempt to eliminate the number of words on the page did improve the "calming" effect of the information layout, the overall design was imbalanced.

Screen Shot 2021-08-23 at 7.38.26 PM.png

4

Recomendataions

Hi-Fi Prototype​

Screen Shot 2021-08-23 at 7.36.53 PM.png

Conclusion

The final high-fidelity design gives users an interface to accomplish all navigation tasks without confusion or frustration. 

 

It increases engagement by increasing the amount of compelling visual imagery and decreasing the “wordiness” of the home page.

Next Steps

To develop this project further, I would want to consult with a representative from MSAB to receive their input on priority calls-to-action.

 

User testing revealed how important visual imagery is to create an engaging experience that doesn’t feel text-heavy. Working with MSAB to create a portfolio of image resources would be imperative to creating a portfolio of assets for it to use to make periodic updates to the site.

 

Since the MSAB site is inherently text-heavy, I would devote the next phase of a redesign to creating a layout of a text-focused page to be visually easy to navigate and therefore easy to comprehend for the user.