Vince Welter

User Experience Designer Portland, Oregon

My Design Process

Product Discovery

Product Discovery

I start off my projects by holding a kickoff meeting with the entire project team. With more and more teams being remote these days, communication is huge. We define who we are designing for, what the business requirements are, what the problem may be or what the new product requirements are, and set goals and timelines.

Exploration & Data Mapping

Exploration & Data Mapping

Now that we've defined the project, I begin to research and gather data. Looking into user needs, customer feedback and reviews, ethnographic research, and competitive analysis. The outcome of this research helps visualize the project with customer journey maps, task flows, information architecture, and personas.

Sketching & Wireframing

Sketching & Wireframing

Here is where I begin to sketch ideas on the iPad, whiteboard, or simply sharpie and paper. Occasionally I hold brainstorming workshops to rapidly produce low fidelity ideas and possible solutions. In the end, I arrive at low/high fidelity wireframes. It's important to stay in communication with the UI and Engineering teams through this step.

Prototyping and User Testing

Prototyping and User Testing

Next, I test the solution with end users of the product. I do this by building clickable interactive prototypes. The goals of the project help determine the level of detail needed in the prototypes. The results helps discover where issues are. I iterate and improve my solutions to meet the project goals before moving into the design and development phases.

Visual Design

Visual Design

Once I have the tested and approved solution, it's time to apply the visual style and design patterns to the solution. Depending on the project, I'm applying the design and other times I handoff to the UI designers to apply the fit and finish. The end results produced are high fidelity designs and red lines to help engineers develop the product.

Development & Testing

Development & Testing

The final step is to create rich agile stories that explain the experience details for the engineers. This includes holding story workshops that walk through the stories of a given sprint and help answer any questions the developers may have. I then follow up with the QA team to make sure we have a deployable feature at the end of the sprint.

My Work

Jive Unified Admin

Jive Software | Lead Product Designer

Fall of 2017

This project was a new platform built to support Jive's cloud based customers in managing multiple communities from one user experience. The new platform would give customers one unified list of members to manage across all communities rather than independently. Administrators would also able to maintain enterprise system integrations such as SAML, LDAP, OpenSocial and custom solution authorities.

Close the overlay

Jive Unified Admin

Jive Software

Objective

Jive wanted to build a new platform to support their cloud based customers in managing multiple communities from one single user experience. The platform was going to be built with the next-generation architecture team which was a global structure of many talented Engineers, Quality Assurance Engineers, Product Managers, and UI Designers spread through out San Francisco, Portland, and Tel Aviv. The new platform would give customers one unified location to manage users across all communities rather than independently across individual communities. Community administrators would also able to maintain enterprise system integrations such as SAML, LDAP, OpenSocial and custom solution authorities from the new admin console.

Timeline

Architecture started in spring 2016, development in progress in 2017

My Role

Lead Product Designer

Deliverables

Information architecture, user-flows, task maps, wireframes, prototypes, agile stories, discovery workshops

Product discovery and data mapping

One of my many first tasks was to get a clear understanding of the current hurdles with the existing admin console. I identified and met with multiple end-users of the existing platform to dig deep and empathize with the end user in order to gather information about what worked and didn't work in the current experience. I then took that information to build out my next steps in the project to help define the information architecture of the new platform along with specific user-task flows.

Jive Admin - Data Mapping
Jive Admin - Registration Flow
Wireframing

Once I had the requirements, user flows and IA together I began sketching and structuring the wireframes for the admin console and unified sign on experience. Weekly brainstorming session and wireframe critiques were held with the project teams in order to iterate and improve on the user experience before going into design and development.

Community member and settings management
Jive Admin - Wireframes
Batch import members to a community
Jive Admin - Wireframes
Feature Prototyping

Through out the project, I would build out prototypes in Adobe XD, as shown in this example. I would attach these to Jira stories to help demonstrate the user interactions of some of the more complex features in order to help developers see the elements in action.

Prototypes we're also built out for user experience testing of certain pages of the admin console and unified sign on experience using Sketch + InVision. This allowed us to compare and improve on the work flows of certain functionality such as the sign in process, managing users, or the user migration experience.

Jive Admin - Prototype
Design and Development phase

Constant communication was huge with keeping our Engineering teams in Tel Aviv and local design team in Portland up to date. I facilitated weekly design discovery sessions for upcoming sprints with Engineering and QA teams to walk through agile stories I'd defined that helped support the experience. Final design patterns and front-end development was applied by Keith Mitchell and David Doms on the design team.

Community member and settings management
Jive Admin - Designs
Batch import members to a community
Jive Admin - Designs
Jive Admin

Jive Daily - iPad App

Jive Software | Product & UI Designer

Fall of 2017

Jive Daily is currently a mobile phone only app. With the focus of the desk-less worker and the use of iPads in the workforce, we found the need to have an iPad version of the app. This project was a proof of concept to vision what an iPad version of the Daily app might look like.

Close the overlay

Jive Daily - iPad App

Jive Software

Objective

With the executive usage for tablets becoming higher and higher in the workplace, Jive wanted to have a tablet solution of their already available mobile solution to help meet the requests. Jive's current responsive solution existed on a tablet browser but with not all the features that a true native app could bring.

The main objective was to build a new version of Jive Daily, that fully supported the mobile phone devices as well as tablets. The new app would need to support portrait and landscape layouts for tablets and be designed around the current mobile phone solution.

Timeline

Fall of 2017

Role

Product & UI designer

Deliverables

Information Architecture, Design Exploration, UI Design

Information Architecture

The first exercise I did was to get a good picture of the current mobile phone architecture. Since I wasn't a part of the original mobile Jive Daily app, this helped me understand and visualize the task I would have of creating the tablet app.

Jive Daily - Current Mobile IA
Jive Daily - IA
Hi-FI Wireframe Explorations

Next in my process I did a quick bit of research and looking at customer feedback. I then wanted to quickly explore different ideas around portrait and landscape layouts among the pages of the new app in a tablet environment.

Exploration v1
Jive Daily - Explore 1
Exploration v2
Jive Daily - Explore 2
Exploration v3
Jive Daily - Explore 3
Prototype iPad Designs

After my exploration in design layouts, and multiple rounds of design critique feedback, I moved onto a full-size prototype built in InVision. Below are a few of the screens I built in that prototype.

News and Tiles (Portrait and Landscape)
Jive Daily - News Design
Inbox and Search Drawers

Both drawers would displayed by buttons in the bottom tab bars as well as left/right swipe gestures.

Jive Daily - Inbox Search Design
Jive Daily - iPad

Community Theming

Jive Software | UI Developer

Fall 2011 - Fall 2015

Working in the Professional Services team at Jive, I had the privilege to work remotely and travel on-site with many of Jive customers to help collaborate on solutions, design and develop their brand into their Jive community.

Close the overlay

Community Theming

Jive Software

Objectives

Working as a UI developer at Jive engaged me in many opportunities to collaborate with internal and external customer teams. Communication among all the working teams was tremendously key to a successful project.

Meeting with Jive customers was an amazing opportunity. I would often go on-site to be a part of a two to three day workshop where our project management, engineers, customer support and design would meet and listen to our customers goals and concerns they were trying to solve. The face-to-face meetings with our customers brought my empathy towards their use cases of a community to what Jive needed to become in order to make their community successful.

Timeline

Fall of 2011 - Fall 2015

Role

UI Developer

Deliverables

Over 130+ custom theme engagements including information architecture, wireframing, on-site design workshops, remote UI consulting, UI design, web front-end development

On-site Workshop Example

Here is an example of an on-site I had with NBC Universal. For three days myself, project management, strategy, and customer success, strategized and brainstormed ideas from the analytical data, platform survey data, to employee feedback. I was able to focus on the different types of personas, ask questions, and brainstorm ideas around solutions that would support their global community needs.

Goals

One of their main concerns was adoption for their two very distinct populations (US & International) in terms of use and knowledge of their community named Wave. They wanted their initial community landing page to give their employees the feeling of belongingness and present information that was important to them. The focus was on continuing to drive user registrations and on-boarding for the two sets of populations.

Brainstorming session
Theming - Workshop
Existing Community Home
Solution

After gathering data and answers to our questions, we looked at re-envisioning the features, functionality, and overall appearance of the community. One area that would help bring their adoption rates up was in the top right of the home page showcasing "Wave Resources" and "Collaboration Tools." The quick video tutorial, FAQ, and general direction call to action links of how to reach out if you had questions, would ultimately help in the on-boarding area welcoming the users to the community. I also featured their global time-zone information as requested to help them collaborate across the globe with their peers, as well as present highlighted content relevant to users in multiple business units. Global logos were also added to support the cross functional teams, as well as an overall community health tile to bring the collaboration into a visual front for others to see what all the buzz was going on in the community.

Sketching on the plane home and wireframing
Theming - Sketches
Final NBC branded community home page design
Theming - Final Design
Jive Theming

Side Projects

Halloween Fun

iOS Sticker Pack | UI & Development

Fall of 2016

My first 'app' / sticker application that I published on the App store when iOS 10 was released. Halloween is my absolute favorite time of year and designing and building this app was a blast.

Close the overlay

Halloween Fun

iOS Sticker Pack | UI & Development

The time was June of 2016, iOS 10 was just announced to the developers at WWDC. I'd been on the developers program for quite a few years with all great intentions to design and develop an app. Along came Stickers for iMessage that Apple had just announced. No, it wasn't an app by any real means, but I thought here's my chance to at least design something and get on the App Store. What a fun experience it was.

Halloween Fun Sticker App Download on the App Store

I started off doing what research I could from Apple about how the Sticker packs would work. Through out the summer I would take photos of objects here and there that would spark ideas with me into the icons I wanted to create and the color palettes I'd use. I then began sketching ideas on my iPad using Paper by FiftyThree.

iPad Sketching
Halloween Fun - Sketching

After enough ideas were sketched out, I moved on to the high-fidelity design work in Sketch. Finally after a multiple late evenings of icon creations, I setup to create the screenshots and the many of many app icon sizes. In early October I published my first sticker app to the App Store.

Final Sticker Designs
Halloween Fun - Final Design
Halloween Fun Sticker App Download on the App Store

About Me

Vince Welter

Hi I'm Vince!

Born and raised in the small town of Baker City, Oregon. As a young child I was always eager to dive into new adventures. I was building forts with friends, designing electronic gadgets, and playing sports. Fast forward quite a few years later, not much has changed. I rarely sit still, love interacting with people and designing and building things. I'm constantly aware of experiences around me and always looking at ways I can improve them. I have a strong passion for human-centric design and learning what a user expects out a product. I'm an extremely detailed person that is very organized and strives to learn and improve my design knowledge in every project.

When I'm not sketching and designing things, I enjoy hiking and traveling with my family to the happiest place on earth. I love to watch a good scary thriller movie, produce videos, take photos and attend concerts .