Existing Prototype
       
     
Wireframing
       
     
8788340_orig.png
       
     
9336343_orig.png
       
     
5277059_orig.png
       
     
Iterating
       
     
6861151_orig.png
       
     
Refining
       
     
1458478_orig.png
       
     
4608217_orig.png
       
     
2897264_orig.png
       
     
1617164_orig.png
       
     
8428826_orig.png
       
     
Existing Prototype
       
     
Existing Prototype

Form followed Function
The team was already working with a design created by the team's developer. It had all the functionality they were looking for, but had a bunch of improvement opportunities in both UI and UX.

Wireframing
       
     
Wireframing

Building it Out
Because most of the functionality was already baked in and the architecture complete, I jumped right into wireframing, pushing myself to find a way to find a look consistent with the current aesthetic, while still finding smart ways to enhance the user experience. Quickly implementing many different concepts created more and more ideas, which led to finding the best solution.

8788340_orig.png
       
     
9336343_orig.png
       
     
5277059_orig.png
       
     
Iterating
       
     
Iterating

Simplify, Simplify, Simplify.
Soliciting feedback from my team and the stakeholders, the design was refined to a "live preview." All edits were done right where they would appear on the sent email, eliminating the need for a separate preview page. The Project List page was brought back, keeping the project focused solely on the content.

6861151_orig.png
       
     
Refining
       
     
Refining

Crossing t's, Dotting i's. Adding Responsiveness.
Once the visuals were nailed down for the desktop site, attention was moved to the mobile version. The designs were specced out, and sent out to development for implementation.

1458478_orig.png
       
     
4608217_orig.png
       
     
2897264_orig.png
       
     
1617164_orig.png
       
     
8428826_orig.png