Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
Author: Doug Crissman
-
Symbiosis Gathering
Symbiosis runs a sometimes annual art, music, and community gathering. They needed a content-rich website to promote their 2015 event.
Symbiosis’ Previous Event Site Challenges
The layout of the previous site was very image heavy and lead to several problems for the Symbiosis team:
- Slow page loading times
- Difficult to read on mobile devices – content & layout was not responsive to different screen sizes
- Updates to content required design and coding knowledge
Expanded Content
Built in WordPress to allow for others on the marketing team to update content, it was also important for the design of the site to be modular. Areas of the home and subpages were defined to allow for promoting different content throughout the year as event coordinators signed on new acts and programs.
Engaging the Symbiosis Community
I worked with the marketing team on different ways to create excitement for the event. This mini-game let site visitors set a budget for their own event to see if their allocation of funds would lead to a successful event.
Event Promotions
In addition to the website, I also designed HTML email templates, social media, and web ad graphics to promote ticket sales for the event.
Reusable Layouts
The custom WordPress theme that I built for the 2015 gathering and with plugins that I discovered to be useful to the Symbiosis team along the way, was then used for their subsequent event sites, Symbiosis Gathering 2016 and Oregon Eclipse Gathering 2017.
Previous
-
UI Design
Typography is the art and technique
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning).
Typography is the art and technique
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning).
Typography is the art and technique
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning).
-
Next American City Magazine
Next American City was a publication about urban planning and affairs.
I worked with the Editor-in-Chief as well as a brand consultant in redesigning the magazine from what had been a more academic journal-looking publication, to a more modern style that was more approachable to a larger audience. Below are samples of layout spreads that I designed for their Spring 2008 issue.
Previous
-
Quick Solar Design
Overview
Designing the Quick Solar Design feature was the first major UI/UX project I worked on at Spruce. Along with the Product and Development teams, we collaborated with Pivotal Labs to learn more about the Agile Design and Development process. While leading the UI design of the project, I also worked with the Pivotal UX designers to interview and test prototypes with our users.
Project Goals
Spruce Finance is a solar and energy efficiency financing company. They provide contractors with the ability to sell and finance home improvement projects to homeowners through the web-based SpruceFlow application.
- Simple way of calculating system production and electricity savings that was “catered” to a particular homeowner
- Create a system design feature that reduced time needed to train users
- Provide homeowners with confidence of their potential energy and cost savings
The original feature was limited to data entry form fields with no visual display on a roof Discovery
Through several interviews with our users, we found what information was most important to them in selling a solar installation. We were also able to learn more about their frustrations working with our software platform.
Most notable pain points:
- I don’t know the exact measurement and values to input
- It’s too difficult to get an accurate estimate of how many solar panels will fit on the roof
- I talk about the savings at the beginning of my pitch, but there is too much information to add to get to this point in the application
Initial Mockups
For this particular project, I started creating hi-fidelity mockups in order to be able to quickly get validated portions of it to developers while others were still being tested.
I created many iterations and with continued feedback from users, was able find a balance that made it easy for them to find the information they needed.
Some samples of many that were created in collecting feedback and testing with users Prototypes
Due to the complexity of this interface, I also created interactive prototypes in Principle that we were able to use validate assumptions on the ease of creating, moving, and resizing arrays of solar panels on the map.
Outcome
- Sales people were able to easily show homeowners a quick view of their solar installation.
-
End-to-end process overview of designing a product
Company Summary
Spruce Finance is a solar and energy efficiency financing company. They provide contractors with the ability to sell and finance home improvement projects to homeowners through the web-based SpruceFlow application.
Project Goals
- Add a loan product to the SpruceFlow application for contractors to offer more financing options to homeowners
- Provide an easy way for contractors to use SpruceFlow through all stages of the project; from selling to collecting documents and financing
Screenshot of the old Spruce web application Information Overload
Even without interviewing customers, it was clear that our old software platform was cluttered with too much information and too many options.
Universally, my aim in designing features for SpruceFlow included:
- Making it clear to users what they should and/or can do within the context of the screen they are viewing
- Using clear and concise wording that is useful and meaningful to users
- Minimizing the use of color and use it to highlight important information
Prioritizing Features Interviewing Customers and Prioritizing Features
I collaborated with product managers to determine features that would provide high business value and reduce risk to disrupting our customer’s selling processes. From there, we were able to prioritize a list of features to begin the iteration process.
Wireframes
I used simple wireframes to explore initial concepts of adding new information to our platform that could then be extended to future products. Creating several options, I then worked with developers to determine the most feasible solution to fit within the timeline of our release schedule.
Wireframe options for displaying product details Prototypes
To gather feedback and test usability, I used hi-fidelity mockups and prototypes for users to get a better sense of how the final product would look and work.
One of many sets of iterations on carousel slides for gathering feedback from users Outcome
Adding the loan product to the SpruceFlow application increased the number of finance options that our customers were able to offer homeowners.
This design set up the framework for adding even more financing options to our platform as the business expanded its product line.
Hi-fidelity mockups created in Sketch and exported to Zeplin for developer handoff -
Finding the Right Problem to Solve
Features for our new platform would often result in requests like:
“We need to cancel documents on this page.
Please design a mockup here with a Cancel Documents button.”Defining the Problem Before Creating a Solution
For this and other features, I put this chart together to use with product managers in order to frame the problem from the perspective of our users.
This is the problem statement that we arrived at:
I, Norman (our sales person persona), need to increase the loan amount because more expensive materials are required for this installation.
Next Steps: Focusing on the Customer’s Journey
Mapping the journey helped identify areas where customers fell off (red) of the happy path (green) in our software 
[button-group size=”lg” justified=”” vertical=”false” xclass=”btn-toggle” data=”target, cancelDocs”][button link=”#” xclass=”active btn-primary”] Before [/button][button link=”#”] After [/button][/button-group]Pain Points
- Customers couldn’t remember the multiple steps required to edit the loan amount of their deals.
- Using two separate software portals increased confusion and subsequently increased the number of support calls.
Proposed Solution
Reduce the amount of steps required for the customer to get back on the happy path in our software:
- Allow customers to edit the loan amount in the software where they set it in the first place.
- Automatically do things that the software requires after such a reset, in this case, cancel the previously finalized documents in order to create new ones with the revised information.
- Align wording to coincide with the action/goal that users are trying to achieve. In this case, Make Changes instead of Cancel Documents.
Outcome
By framing the problem around the needs of our users, we were able to create a better solution that directed them back onto the happy path within our software.
Prototype sequence of the implemented feature -
Scalable Design Systems
At the core of the Spruce style guide
Building blocks to make it easier for users to read & find the information they need
Summary
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning).
Original Style Guide MVP Style Guide
When I started designing for the SpruceFlow web application, there was a bare-bones style guide in place.
- Styles that worked within the Bootstrap framework
- Allow for easy handoff to developers
- Create more consistency in designs from hi-fidelity mockup to implementation
To accommodate a variety of component and screen layouts, the styleguide eventually expanded to allow for increasing complexity of information while maintaining ease of use and minimal one-off customizations Design Fundamentals
Elements
Rather than continue with custom-built elements like buttons and form fields that had been implemented in the software, I advocated for the use of the Bootstrap framework of components. This allowed for easy stylistic customization to align elements with the Spruce brand while also reducing development time.
Wireframes
Additionally, I created simple wireframe elements and layouts that allowed project managers to explore ideas for features themselves.
Developer Handoff
Created in Sketch, the style guide was shared with developers in Zeplin.
Also pairing with developers while features were implemented which reduced tickets rejected for visual reasons during the QA process.
Outcome
-
Why Designers Should Know How to Code
Problems:
In designing an application for existing customers, I found that the simplicity of wireframes and InVision prototypes ended up lacking and disrupting any usability testing.
- When users tested prototypes, they would become frustrated and unable to complete tasks when elements in the prototype did not work.
- Creating clickable sequences for InVision prototypes becomes exponentially complex when visual or sequential changes need to be made.
- Can’t test with real data.
Starting simple with a focus on new users to our platform
Assumptions
- Entering either a ZIP code or address would be confusing to users
Testing Method
- Determine the task
- Get 3-5 people to perform the task
