My notes focus on exploring ideas and concepts related to what our users are trying to accomplish, but also what the stated business goals are. Wireframe sketches mix into my planning where a clear problem has been identified or inspirations strike me, often times from seeing other companies doing interesting work and figuring out how their problem-solution could map to our own problems.
Wireframing & Planning
High-fidelity wireframes can help keep the core idea clean and legible (unlike some of my hand sketches). The top wireframes were part of a flow for drag & drop scheduling on web. The mobile wireframes show the flow for sharing an article on mobile, including changing the time to schedule. Interactions may also get spelled out in clickable prototypes or may be as simple as comments on the engineering tickets.
I like to have qualitative and quantitative data to reference when justifying my product and design decisions. For Contempo, we had internal employee power-users along with external influencers, who were our growth target market. I conducted in-person interviews with internal users and built and collected surveys for our external users. I also got us set up for a great tool for user research (and QA), FullStory, which recreates videos of user mouse movements and clicks. Our qualitative insights were then supplemented by the quantitative product analytics work I was doing.
When talking with stakeholders, I like to have numbers on hand when questions arise as to what our users do or don't do (it's easy to guess incorrectly). I worked with an engineer to get Segment set up for tracking and distributing our event and user data to various sources, including my main product analytics tool, Amplitude, but also to Google Analytics, and others. I also assisted the marketing team by getting Facebook pixel tracking firing for all our events. In setting up Amplitude, I also constructed our full event and user property taxonomy.
One of my first missions for Contempo was to take the bare bones web app and make it look presentable. It had been originally designed by an engineer, so they were open to a revamp. We were short on engineering resources, so I went ahead and dived into the React frontend and reskinned the core of the product myself. As the design efforts continued, more meaningful improvements to user flows got injected as well.
Before the Redesign
The original design for Contempo was built with React Toolbox, with very utilitarian interactions. As my redesign moved forward, I was able to test with our internal team of social media manager power users as well as run it by some of our external influencers who were all excited for the changes.
We had identified the lack of a fully functional mobile product was costing us new users, so I design a full native mobile experience, and corresponding mobile web variation. After discussing with the engineering team, we decided a clean-up of the current mobile web app would be best to start with, and further development would come with time.
Before investing any scare engineering resources into this bigger drag & drop scheduling project, I quickly built out an interactive prototype in Framer, complete with drag & drop actions, and main scheduling flows. Those were used to greenlit the project by management, and also served as development aids to the engineers.
Onboarding Flow Planning
The largest business goal for me to tackle was to increase new user onboarding. That started by interviewing and surveying our users to get a sense of why they used our product, and where our value proposition may be falling short. After that I performed a funnel analysis using the event and user property data I had instrumented when I first started. With that funnel, I identified key drop-offs and brainstormed possible reasons why these drop-offs might be occurring (these could be further validated with more research). I need documented and presented a proposal for changes with benefits & risks for each of the proposed changes.
I performed a good deal of design pattern research on sign up screens to see what the latest best practices are, and what elements to potentially include on the screen. That led to a handful of variations, all of which I would love to A/B test, but with our current volume of sign ups, that data would be meaningless until we could greatly ramp up user acquisition efforts. So I choose a base design that hit some of the identified possible reasons for drop-offs (mainly reducing friction with fewer steps and input typing), which is shown here in the new user onboarding flow image.
In discussing a product expansion, I suggested running a vaporware experiment to collect data on market interest. So in an evening I created an Unbounce landing page with a CTA and a "sorry, product's not ready yet" message along with a targeted Facebook ad campaign, and that helped gain some insight into this new market. I also used Google Trends and Google Adwords Keyword Planner to get a sense of the space, to see how much latent demand there was for this idea.