Home
Work
Gallery
About
Back
Overview Icon
Overview
Compass Icon for the discovery tab
Discovery
Pen and ruler icon for the design tab
Design
Rocket ship icon for the Launch tab
Launch

Woodmen Valley

// Overview

Dashboard Web App
Tools
Figma
Adobe Illustrator
Duration
3 Months
Role
UX / UI / Research
Platform
Browser: Desktop/Mobile
Awards
Rock RMS: Gold Circle Award
Summary

The goal of this project was to rethink the existing web pages for staff and people involved with Woodmen Valley Chapel. The existing system was rather complicated and visually unappealing. We wanted to overhaul the UI to develop a new look that would be used throughout the rest of the website in the future, as well as redesign the current "Toolbox” system to improve the user experience.

Woodman Valley app mockup on mobile device.
Woodman Valley app mockup on mobile device.
Woodman Valley app mockup on mobile device.
No items found.
An award-winning modular web app to manage department resources, events, and more. Built mobile first with desktop adaptation.
An award-winning modular web app to manage department resources, events, and more. Built mobile first with desktop adaptation.
Next: Discovery

Woodmen Valley

// Discovery

Dashboard Web App
Things I Did
  • Analyzed the existing tool to see how different departments used their toolboxes
  • Interviewed volunteers, staff, and leadership
  • Met with our IT lead and listed out the different toolboxes needed
  • Created user personas and user journeys
  • Competitive audit of e-learning websites (MasterClass and Coursera) and other software like Discord
  • Led a UX session and conducted brainstorm exercises like crazy 8s
Challenges
1
A lot of information needs to be displayed
2
Each Department Toolbox was isolated
3
Each Toolbox contained different types of content
No items found.
An award-winning modular web app to manage department resources, events, and more. Built mobile first with desktop adaptation.
An award-winning modular web app to manage department resources, events, and more. Built mobile first with desktop adaptation.
Next: Design

Woodmen Valley

// Design

Dashboard Web App
Things I Did
  • Created wireframes: sketches and then digital wireframes
  • Prototyped and tested the low-fidelity version of the web app
  • Condensed the menu design
  • Removed “Featured” section from all pages except the home page
  • Separated the event page into 2 different views for mobile: List and Calendar
Woodman Valley app wireframe on mobile device.
Woodman Valley app wireframe on mobile device.
Woodman Valley app wireframe on mobile device.
No items found.
Woodman Valley app mockup on mobile device.
Woodman Valley app mockup on desktop device.
Woodman Valley app mockup on mobile device.
No items found.
An award-winning modular web app to manage department resources, events, and more. Built mobile first with desktop adaptation.
Next: Launch

Woodmen Valley

// Launch

Dashboard Web App
Final Thoughts
  • Final designs were handed off in Figma to outside developers
  • The web app was integrated into the existing website/account system
  • All departments took ownership of their “toolbox” by uploading content and learning the new system
  • Several features were reserved for a 2.0 version in the future
An award-winning modular web app to manage department resources, events, and more. Built mobile first with desktop adaptation.
An award-winning modular web app to manage department resources, events, and more. Built mobile first with desktop adaptation.
An award-winning modular web app to manage department resources, events, and more. Built mobile first with desktop adaptation.
An award-winning modular web app to manage department resources, events, and more. Built mobile first with desktop adaptation.
Next: Bosch Power Tools
Back

case study is private

Request access to this case study by contacting Stephen Johnson directly.

Enter Password