Delancey Street Nonprofit Website Redesign

Lorem Ipsum

DELIVERABLES

User & expert interviews, user persona, user flow, sketches/wireframes, responsive prototypes, promotional home page, UI Style Guide

TOOLS

Adobe XD, Webflow, Adobe Illustrator, Github, Google Suite

TIMELINE

3 weeks (December 2019)

DESIGN GOAL

Bring EEOC.gov into the modern era with a fresh and accessible site overhaul focusing on clear persona-based information architecture & task flows, content management, and complete UI redesign emphasizing clarity and accessibility.

ASSIGNMENT

Evaluate and improve web design (UX & UI) of a government agency.

ROLE

Lara Garrison

User Research, IA Analysis, Prototyping, Webflow, UX Design, UI design

Shwetha Ponugoti

Market analysis, Graphic Design, UX Design, Research, UI design

INTRO

What is the Delancey Street Foundation?

Lorem ipsum

organizational branches / types of users to interact with site

bla
  • bla
bla
  • bla
bla
  • bla
Home Page

(Click to expand)

Discrimination Type Page

(Click to expand)

RESEARCH

Stakeholder Input

Lorem ipsum

Stakeholder Goals:

What does Delancey want to communicate? incl branding/tone

RESEARCH

Usability Testing

Lorem ipsum

Testing results

lorem ipsum

analysis

User Insight

analysis

User Personas

User Persona of Charlotte Lee

User Persona

Empathy Map

analysis

User Journey/storyboard

User Persona of Charlotte Lee

User Persona

analysis

UI heuristics/site analysis

User Persona of Charlotte Lee

User Persona

DESIGN

Design Goals

ux design goals

  1. lorem ipsum
ui design goals

Lorem Ipsum

  1. Lorem Ipsum: Lorem Ipsum

Design

Sitemap before/after

lorem ispum

This simple, modular navigation paradigm then also lends itself to modular feature functionality: adding a physical button to the button housing adds the feature, and removing the button removes the feature. In this way new features can be released and added, or unneeded features can be removed from an individual’s Bridge Home system without major disruption of their mental model.

Branding & tone

lorem ipsum

‍
‍

User can:

  • Add, remove, or modify all events + reminders (except when locked)
  • Video call their contacts
  • Hail rides to and from pre-set addresses
  • Video call someone who is not in contacts (optional)
  • Hail rides to and from places not in library (optional)
  • View and utilize information presented by Smart Mirror
  • Dismiss all messages and notifications

Administrator can:

  • Install or remove feature modules
  • View schedule and manage events + reminders
  • Lock individual event or reminder to be unmodifiable by user
  • Manage contacts & addresses library
  • Choose if user can call or hail ride to novel contacts
  • Set up and manage linked accounts
  • Send messages to be displayed on Smart Mirror
  • View and download medication compliance history (optional with MediConfirm dispenser)
  • Remotely enable camera or speaker in case of possible emergency (optional)

Design

sketch/wireframe w/task flows

More User Testing Feedback:

Design

lofi testable prototype

User testing

Testing Plan

Recruiting

Selected 4 individuals via a survey in an upscale senior living community, age 1-99, who agree with the following statements:
‍

"When I try to use computers or mobile smartphones I often have trouble getting it to do what I want."

as well as

"I would enjoy spending more time with family or friends."

and/or

"I would enjoy doing more activities outside the house."

Testing

Prepped with a brief discussion designed to alleviate any tech-intimidation and familiarized with concept and function of Bridge Home: Smart Mirror.

Then asked to complete the following tasks:

- Create a reminder for every Sunday at 11am to practice the piano.

- Hail a rideshare to "Italian Restaurant", then verbalize understanding of how to get there, and how to get back (via phone call).

‍

‍

Opportunities

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Testing Results

User Testing Feedback:

More User Testing Feedback:

changes implemented

high fidelity prototype

High-Fidelity Screens and Prototype

lorem ipsum link to style guide

bla

bla

clickable prototype gif/video

Takeaways
‍

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.