Responsive Website Redesign
About this project

This Project was part of a 24 week UI/UX course through the University of Oregon.

Role: As part of a team of three designers, our roles interchanged throughout the User Research, User Interface Design, and Usability Testing phases.

Project Duration: 4 weeks
Responsive Website Redesign
The Problem
Due to a changing demographic, the Hollywood Farmer's Market website's outdated design no longer accurately represents their community. The infrequent updates to the market information create difficulties in vendor and shopper relationships and result in market food benefits being underutilized. This raises the following questions:
How has the demographic shifted? What kind of redesign will help the market keep up to pace with the growth of the community?
Responsive Website Redesign
About This Project
This Project was part of a 24 week UI/UX course through the University of Oregon.

Role: As part of a team of three designers, our roles interchanged throughout the User Research, User Interface Design, and Usability Testing phases.

Project Duration: 4 weeks

Design Process

Our user-centric design process aims to maximize usability by empathizing with users every step of the way. We Discover pain points and stakeholder needs through user interviews, and use those finding to Define core problems and Ideate potential solutions. We then Design a solution that progresses from wireframes to mid-fidelity prototypes. Finally, we Test the design with users and make Iterations based on their feedback, culminating in high-fidelity prototypes ready for deployment.

Empathize

1

Discover

Stakeholder Interview
User Interviews
Survey
Affinity Diagram

2

Define & Ideate

User Persona
Insight Statement
Problem Definition
Competitor/UI Analysis
Feature Prioritization

3

Design

Info. Architecture
‍Paper Sketches
Lo-Fi Prototypes
Style Guide
Mid-Fi Prototypes

4

Test & Iterate

User Testing
Stakeholder Review
User Feedback Iterations
Hi-Fi Prototypes

Research

Stakeholder Interview
Our team interviewed Allison Delancey, Market Director of the Hollywood Farmers Market and key stakeholder to uncover current pain points, and to understand both short-term and long-term goals for the website.
Allison's revealed a need for the following:
Reflect a shifting demographic in the neighborhood and in shoppers.
Invoke feelings of joy, fun, & freshness; add color for liveliness.
Ability to update website quickly and frequently.
Include sponsor logos to promote participation in sponsorship.
User Interviews
In order to redesign the website to meet the needs of users and stakeholders, our team conducted 5 user interviews to identify pain points and opportunities.

Goal

Support the mission of the Hollywood Farmers Market by improving access to HFM events and announcements for the community.

Core questions such as, "What information is currently hard to access on the website?", "What feelings does the current site evoke upon first glance?", as well as feedback received on navigating the website, revealed the following:
The current imagery is confusing.
Certain information seemed vague or outdated.
Alignment issues are visible throughout the homepage.
Time and location were at least easy to find.
Survey
A Google survey was deployed to obtain clues about the growing demographic as well as to reach the food benefit recipient demographic more anonymously. We recorded data from 18 participants and uncovered the following highlights:

Only

17%

of participants rely on the website for updates compared to 48% from Social Media

Over

50%

of participants were between ages 30 – 39 followed by 29 and under at 30%

Only

16%

of participants have or know of someone who has utilized SNAP benefits at the market

Definition & Ideation

Affinity Diagram
The affinity diagram was like solving a puzzle. We extracted key details from the data to create puzzle pieces, which we grouped to identify common Insights (shown in turquoise) and Pain Points (shown in orange) among our users. This helped us gain a bigger picture and define our problem more accurately.
User Persona
At the beginning of our project, we conducted research with a target user in mind, a Proto Persona named Pam Jo Walker. According to Allison's demographic explanation, this group has historically made up the majority of market-goers.

However, in recent years she has also noticed a rise in the representation of BPOC community members. Using feedback from Allison and other users, we developed a User Persona named Abby Shawano to create a more accurate representation of our target user.
User Insight Statement
Abbie, a busy, working-mother to an 8-year old, just moved to a new neighborhood. Abbie is looking for good local food and family-friendly activities. She loves farmers markets - she just needs to find one!

Problem Definition
Portland's Hollywood Farmers Market's current website does not align with their brand standards and has out-of-date information. It needs to effectively showcase the welcoming culture and diverse community of the market.

How might we embody the market experience on the website and promote a greater sense of community?
Give users a preview of the market experience
Keep key information and upcoming events current
Simple & flexible update process for stakeholder
Competitor Analysis
To evaluate our competition in the Portland Metro area, we utilized the SWOT method. When identifying potential "threats," we compiled a list of specific market features and used a heuristic approach to distinguish the strongest competitors.

Heuristics Analysis

Onset of Ideation
  1. Outdated navigation links
  2. Missing city location information
  3. No clear call to action
  1. Iconography lacks authenticity
  2. Calendar doesn't showcase special events
  3. Footer info is cluttered and unaligned
Feature Prioritization
Armed with clearer insights, we used the "I like, I wish, What if?" exercise to brainstorm ideas!

However, we had to keep in mind the technical limitations of the Squarespace platform, which the organization planned to use instead of Wordpress.

Despite the platform's design constraints, it offered benefits that aligned with our "Easy Wins!" quadrant (lower right), like an easy updating process.

User Flows + Information Architecture

We began to carve out the user experience as a team, by iterating a user flow that would not only address our user and stakeholder's needs, but do so intuitively.

To map out our site, we had to define the hierarchy of the content. Taking the guess work out of locating the most important information for our users was our top priority. This ensured that nothing outdated or irrelevant would negatively impact the user experience.

Design

Sketches
Our search for inspiration, competitor trends, and mood-boarding on InVision fueled our creativity and led us to begin iterating user-focused designs through a series of sketches.

We aimed for a modern design that prioritized important information, showcased the market through thoughtfully placed image sections, and drew attention to their newsletter and donation options with clear CTA buttons.

By combining our strongest ideas, we achieved a consensus for the layout of our homepage.

Digital Wireframes

Our idea – clean, unified & user centric.

Desktop

  • Content cards alternate down the grid
  • Donate CTA button exerts hierarchy
  • Cleaner navigation and footer
  • Instagram carousel for current photos

Mobile

  • Content cards scaled for mobile grid
  • Font styles for small screens (WCAG)
  • Hamburger menu (efficient & familiar)
  • Hero scroll-down button encourages exploration

Style Guide

The Hollywood Farmers Market is all about bringing people together – shoppers, vendors, locals, and visitors – to create a lively and welcoming community. Our idea for their website is to capture this same energy by using festive colors that match their branding, and incorporating inviting and authentic imagery.

We believe this will make it possible for users to start imagining what their own amazing experience at the market might be like, and inspire them to explore all that it has to offer.

Testing & Iterating

User Tests & Feedback

After designing, styling, and integrating interactions into our page, we started testing our mid-fi prototypes with users to see how we could improve their experience. Below are some examples of user feedback we used to make improvements during the iteration process.

Desktop

  • Signage within the image distracts from the header text
  • Most important information is clear and visible

Mobile

  • Header text's low contrast makes it hard to read
  • User had mixed feelings about hero vibrancy
  • Lots of positive feedback on scroll down button
Before
After
To allow the menu to breathe a bit, we decided to use all caps in a lighter weight. We also took into account feedback on common menu practices, such as the placement of the close button and the use of the plus sign to indicate expansion.

Stakeholder Review

We had one final design review meeting with our stakeholder, and she was thrilled with our approach to the copy and folksonomy! In fact, she particularly loved how we used a voice that resonated with the younger, growing demographic. Here's an example of the tone we used to connect with them.

High Fidelity Prototypes

Our design, infused with authentic imagery and carefully refined based on the feedback we received.

Desktop

  • Dark overlay improves hero text visibility
  • Now includes market sponsors
  • Additional newsletter instance as a pop-up
Prototype

Mobile

  • Content cards brought closer for mobile
  • Instagram logo added to carousel
  • Newsletter pop-up no longer obstructs hero
    text at the bottom of the screen
Prototype

Looking Ahead

Impact

The redesign of the Hollywood Farmers Market website presented us with a unique opportunity to engage with users and stakeholders, providing us with valuable insights on the final product's scope.

Future Development

Our team intends to refine our finished design by iterating through our process for additional pages on the website. Given that the business plan involves transitioning the market's website from Wordpress to Squarespace, we plan to present our redesign to the market and negotiate the acquisition of our design to bring it to life.

Other Projects

Landing Page Design

Designing a landing experience that highlights the unique surfing culture of LOGE’s Westport, WA location.

Responsive Website Redesign

Diving into the agency’s site heuristics and information architecture for a redesign that welcomes all Washingtonians.