Grimstad community website redesign — a UX case study

Background

I am a new mom staying home and studying UX design. I came up with the idea of redesigning the website when I took Adobe XD daily creative challenge. One of the challenge topics is USE XD TO DESIGN A CITY LANDING PAGE by adding contents and colors to a template page. After this challenge I thought I could go further more. Therefore, I decided to redesign Grimstad(where I am living in) community website to practice the UX design skills I had learned so far.

My goal is to find out how the UX of this website can be improved in some way and provide a more positive user journey in 5 days.

Phase 1 — Discovery

Usability Testing — Current site

In this step, I failed to recruit users to conduct usability testing with users. So I mainly collected data on the current website by applying methods of usability testing without users, which I combined informal action analysis and heuristics evaluation.

I set 2 tasks of finding some specific information from the website.

1. Find the contact information of the specific school
2. Try to choose two schools for kids, and compare them

Results

1. Too many navigation levels
2. Failed cases on heuristics evaluation including:

Consistency and standards:

• In two different navigation levels there are same sub-category. Example: “Basisteam” in both “Fevik skole og satsingsområder” and “Om Fevik skole”, which is confusing user why there are two “Basisteam” with exactly same contents.
• Parent categories are different for the same navigation label. Example, parents category of “om Skole” of Eide skole is “Praktisk informasjon — Eide skole” while for Fevik skole, it’s “Fevik skole og satsingsområder”, which is confusing users and making it difficult when users try to find “om skole” information of these two schools.

Visibility of system status:

• The menu on the top right page does not show any status and marks of user’s action.

Recognition rather than recall:

• A lot of navigation labels have long description by hovering to read.

Parent categories are different for the same navigation label

Phase 2 — Ideation

Challenge

1. Fix the usability issues described above
2. Update visual design with better typography and color design

Solution

For easier navigating, merge some categories to decline navigation levels to no more than 4, and show more levels info in one page instead of directing users to a different page for every navigation level.

Phase 3 — Develop

Content inventory

In this practice, I did not work out a list of the whole site, for short resources I have. Instead, I mainly focused on a specific school category.

Original inventory list

Updated inventory list

Iterative Prototyping

There are 4 prototype stages for different purposes during the process

1. Paper prototype help visually see and test my idea about the main structure of the new site
2. Low fidelity digital prototype show and adjust page layout
3. Middle fidelity digital prototype with contents and some basic interactions help me conduct later usability testing with users and gain some important feedbacks
4. High fidelity digital prototype combine more visual design: colors, images and typography

4 prototypes of home page — paper prototype, lo-fi prototype, mid-fi prototype and hi-fi prototype

Key test results

Paper prototype: The primary idea of putting contact info into right bottom area is not good, because a long information can cause long page while there is less content to display on the left, which causes too much white space and make the page weird.

Mid-fi prototype:

1. Users don’t know how to back to home page. Solution: Add a “Home” button in right-side menu.

2. “All services” and “Policy and organization” don’t make sense to user, they can’t primarily find out the specific category name belong to which correctly. Solution: Display sub-menu default.

Hi-fi prototype

With simple interactions

What I have learned

1. This is just a practice. It is not enough to improve the whole site navigation system. For a real project, it would cover more UX design methods for better information architecture, such as card sorting, more perspective content inventory, and more usability testing.
2. Learned a new tool, I am a beginner of Adobe XD;
3. When conducting user interviews for testing functional features, people often give some visual feedbacks, like colors, need some pictures, and font size. So it would better to tell your testing users that the test is more about functional features instead of visual design in the beginning.

Tools I have used

• paper, pencil, for paper prototype
• Adobe XD, for middle fidelity and high fidelity prototype
• Google material design, for typography guide and icons
• Adobe color cc, for creating color pattern