Mobile-Responsive Website Design

Project Overview

Locavori is an early-stage startup that is looking to connect local food and beverage fans with local artisan food & drink makers, growers, and their craft consumables.

Their currently isn't an inclusive marketplace or directory online to find hyper-local food and beverage makers. It was important to both consumers and makers that a personal connection could be made.

My role in this group project was to create the consumer research survey and research protocol during our initial testing. I also moderated remote user interviews, designed the prototype home page and assempled the final desktop prototype with Figma.

Methods

  • Stakeholder Interviews
  • Comparative Analysis
  • User Surveys
  • Contextual Interviews
  • Desirability Study
  • User Research Sessions
  • Wireframing
  • Interactive Prototyping

Digital Tools

  • Google Forms
  • Zoom
  • Miro
  • Illustrator
  • InVision
  • Figma

Our Process

Initial Research

Stakeholder Interview

We started off our research by conducting a remote interview with Locavori's key stakeholder. We learned that she had quite a bit of experience with local product makers and she shared some of the problem space throough her eyes as well as some ideas she had for futures.

Comparative Analysis

We analyzed existing travel, e-commerce and local maker websites to get a better understanding of what exists in the marketplace. We identified some key features and got a good idea of the design aesthetic we needed.

User Survey

We sent user surveys to both user groups, makers and consumers. I created the survey with Google Forms and we all shared it on social media. We learned what consumers expect when buying local, how important it is to buy local and why they felt that way.

Desirability Study

To help Locavori stand out and evoke the feelings our client wanted in her brand, we designed multiple logo iterations and performed a desirability study with consumers showing each user several logo concepts with a list of 20 adjectives that included Locavori’s ideal brand terms such as handmade, authentic and personal as well as their antonyms. We then asked users to select the 5 words they felt best described each logo and why they felt that way.

Ideation & Testing

Interactive Prototyping

Once our logo and brand colors had been decided as well as our ideal brand terms I designed Locavori's new home page for both mobile and desktop using Figma. The rest of the team followed the style and created other sections of the websites in Figma. I then took everyone's screens and put them into a single Figma file and created the interactions.

User Testing

With our high-fidelity interactive prototype in place we did a round of user testing alternating moderators and note-takers. From these user tests we learned what users expected throughout the prototype.


Link to Interactive Prototype

Remote Presentation

We compiled all of my findings and crafted a narrative story to present our research and interactive prototype to a large group of remote viewers via Zoom and Facebook live.