12+ years of creative problem solving and creating beautiful digital media that champions the user and generates measurable results
This project involved taking a well established political organization from Virginia that handles Virginia's Space division out of Wallop's Island and creating a more impressive experience for their users.
The goal for this site was to create a stunning, multi-layer visual site that showcases the strengths of the organization. I chose to highlight their launches and support of the International Space Station. From an information standpoint, I wanted the UX to remain simple and direct providing a basic overview of the organization and a clean navigation to easily find the next set of information a user is looking for. I highlighted their launches as this is the more visually impressive and attention grabbing part of what they do.
I worked with several users throughout the process sharing progress and gathering feedback noting areas that felt "off" or like they needed adjusted. Seeing a user stop or hesitate in an area that was unintended interupts the UX and can create a scenario that can lead to user dropoff or bounce.
As part of the user experience design, other space agencies were researched as well as their existing website. I analyzed the information that they were providing and developed a revised sitemap that better organized the navigation to make it easier for the user. Several rounds of simple wireframes were created with Sketch to work through the UX before proceeding with designing the UI and Visual design for the page. Photoshop was used to create the top banner with several images and typography combined to create a stunning visual Hero. I will be revisiting this project to build out other pages, possibly expand on the homepage UX, and add animation to pull it all together.
This project involved taking an existing brand and product and putting together a user experience that would help users to signup via an app.
It was important to maintain the tone of their product and brand that carries through all of their marketing. I wanted to provide an experience not just for signup, but also a way to access your account and review your cigars from your latest box. I implemented a solution in the prototype as the user went through the taste test that allowed them to make their selection and then change it (if they wanted to) before moving to the next question. The goal was to allow the user to be confident before moving to the next question.
Early in the user testing it became apparent that users were stumbling a little bit through the questionnaire. In feedback, I learned that they prefer moving to the next question immediately upon answering versus requiring a double tap to progress. I removed this from the prototype and had the user proceed on initial tap. This still left the problem of accidentally choosing the wrong option. To solve this user problem, a back button was added to easily go back and re-select their option, while still only requiring a single interaction from the user.
I began by creating a base wireframe for the initial screen and the questionnaire in Adobe XD. After working through this and prototyping a few basic screens in the wireframe, I moved onto a high-fidelity mockup in XD, pulling in their branding and materials, as well as building out the additional screens needed for the prototype. I used XD's prototyping tools to create my connections and animate to present my UX/UI. I continued upon completion to design account screens detailing recent boxes, cigars, and access to the cigar journal. I used Photoshop to put together an initial screen to serve as a landing screen while the app started.
The client was using a Squarespace website that had minimal exposure and results. Our first job was researching the company, competitors, and most importantly their users.
The client's users will typically be visiting the site in a panic, so we wanted to ensure they could quickly reach out. We accomplished this by creating buttons that would quickly help them identify their need (the animal they saw) and provide them with information about how Bay Area solves that problem. We also prominently displayed their 24/7 policy, tesitmonials, and service areas partnered with strong call-to-actions with tap to call on mobile devices.
I began with an extensive client interview to understand their company and unique value proposition. This partnered with a competitive analysis provided me with the information I needed to put together a project scope detailing the user, who they are, what they need, and an overall plan of attack for the client. I reviewed this with the team and proceeded to create low-fidelity mockups in Adobe XD before creating high-fidelity mockups with Photoshop. We put a heavy emphasis on the design of the interior pages and created the mockup for this as well as handled content implementation.
The client wanted a modern solution for their website that was more than just a brochure of services and re-enforced their existing branding.
We analyzed the user needs and what was most important to them. For this service industry, what people are purchasing isn't a clean house, but instead the freedom of not having to do it themselves. This provides them with more time to do what they love. After we established the user need, we looked at what sort of problems and reservations the client may have in hiring a home cleaning company. Our above the fold messaging brought together the company's existing branding (enjoy the harmony) and combined this with the company's unique value propositions and trust-building statements... trusted, 1000s of happy customers, testimonials, etc.
I began with hand-drawn wireframes to analyze the overall User Experience Design and how we could best present the solution to the user and lead them through the process of signing up for an estimate. During this stage, the initial idea for utilizing motion on images to re-enforce the idea of making memories was developed. These wireframes were taken into Photoshop to create high-fidelity mockups of the mobile and desktop versions as well as an interior page layout. Because of the strong SEO and AdWords strategy, the interior pages were created to function as individual landing pages presenting their core messaging for users. These high-fidelity mockups were taken and implemented into a custom Wordpress theme using Foundation for the framework.
The client's industry has to speak to users dealing with immediate problems like a broken down car or an alarming dash light. They have to quickly build trust before the user looks elsewhere.
Because of the high likelihood of a user needing urgent assistance, we focused on strong initial statements and a strong mobile experience to pair with an aggressive PPC and SEO campaign. In the first two sections, you can see immediate and direct trust-building statements communicating the trust that others have already consistently put in them.
I began with wireframes created in Adobe XD to analyze the overall User Experience Design and how the experience would be presented across devices. The site traffic was too low to effectively A/B test, so I used conversion rate optimization best practices and past auto industry experience to construct a User Experience that guides the user through the conversion funnel leading them to contact the client. These wireframes were taken into Photoshop to produce high-fidelity mockups before implementing them in Wordpress and Foundation 6.
A plumbing issue is one of the worst things to come home to and when you see a leak, you need someone now. How can we convince users they're the right company for them?
When doing user research, determining what brought a user to a site and what their motiviations were is often as important as strategizing what you want them to do once they're there. This site was wireframed with wireframe.cc and began with a mobile-first design that started in browser and had strong messaging and call-to-actions.
I began with wireframes created in wireframe.cc to analyze the overall User Experience Design and how the experience would be presented across devices. The site was designed in browser with HTML, CSS, and jQuery for the custom work-truck animation utilizing Photoshop for various assets. The site incorporated a system for panel building in Wordpress for holding inner page layout for the content creator.
How do you convince a user that the perspective paving company is a reputable company and not a fly-by-night operation that they'll never see again?
This is a more recent project and one of the first that I built with Bootstrap (ironically, their previous version from 5 years before was the first I built with Foundation). Working through the wireframes for this, I knew I wanted a highly custom look and feel that built brand trust emphasizing their reviews, testimonials, and experience.
Wireframes for this project began in Adobe XD for both desktop and mobile to analyze the overall User Experience and how the user would be led through the sales funnel. Placing reviews, testimonials, and certifications near call to actions was an intentional decision to help with conversions. The wireframes were then built into HTML and CSS/SASS with Bootstrap, NPM, and Gulp in browser.
Over the years, I've thrived in situations where I'm told things can't be done; I've learned that a user complaint often isn't a user error, but a UX error; and that there is almost ALWAYS a better way of building something (especially in our industry). I desire to continue learning, collaborating, and teaching what I know while focusing more on UX/UI, Product Design, and Front-End Development.
In all that I work on, I take time to understand the user's needs and why they're ultimately on a site/app in the first place. This is the foundation of the wireframes, visual design, and strategy.
© 2007-2019 Conrad Davenport
This site powered by CSS Grids, King's Coast Coffee, and Dogfish Head.