How-To App: Definition Phase

Nicole Osborn
4 min readOct 1, 2019

By Nicole Osborn on September 29, 2019

Over the last couple of weeks, I have enjoyed the definition phase of designing the How-To app. This is when the ideas start to take shape! Using the techniques during this phase I have set the groundwork to move forward on designing the app.

Customer Journey Maps

A customer journey map helps to maintain empathy during the design process by telling the story of the user’s experience in a particular scenario. The use of your product is not the entire experience, but our goal is to find ways that the product can improve the experience for the user. For my How-To App, I used the persona created earlier, Samantha, and imagined all of the steps she would go through from having her idea for a Life-Hack to finding the app to creating her How-To Guide, to receiving feedback. Each of these steps of the experience provided insight into the user’s needs and desires.

This process gave me some useful insights to take forward in the design of the app. I realized the importance of simplifying the process of creating a How-To guide so that it is not stressful for content creators. I also recognized the need for feedback and recognition to help creators feel like their work is appreciated.

Information Architecture

Information Architecture describes the way that information is arranged on a site or application. We used the Card Sorting technique, which is a tool to ensure that the information is organized in a way that makes it easy for the users to understand. The card sorting technique has users sort features into the categories that make the most sense to them. This technique helps reduce frustration and confusion users experience if the information is not where they would expect to find it. I did find some useful insights using this process which altered my plan for the app a bit. The results completely changed the way that I imagined using the “newsfeed” page on the site. I did not take all of the results as gospel — as people chose the “How-To Guide” page for “Search for a How-To Guide”, which in practice would not make sense.

After completing the Card Sort activity, I created a spreadsheet in Google Sheets to organize the results. Then I used the information to create a sitemap in Figma.

The cards on the left get sorted into the categories on the right.
Sitemap created in Figma based on Card Sort.

User Flow

A User Flow is a visual representation of the steps a user will take to accomplish a goal while using the product. I created a large user flow using the tool Whimsical to show multiple possible goals including — create an account, sign in, create a How-To Guide, find and use a How-To guide, and posting feedback. The creation of the user flow made me rethink a lot of what had been created in the sitemap. I enjoyed using the tool Whimsical so much, that I decided to use it to redo my site map as well.

Green lines indicate a transition to a new screen. The yellow line indicates redirect to a different app.
Sitemap redo after completing User Flow.

UX Workshops

Workshops increase creativity by having a group of stakeholders brainstorm ideas. The goal of the brainstorming step is quantity over quality! Write down all ideas; even the crazy ones might lead to new insights! After completing the brainstorm we organize the ideas by sorting them into categories. Finally, dot voting starts paring down the ideas by having each participant vote on their favorite ideas.

For our projects, the class was split into groups of 3 to host UX Workshops. In my workshop, I introduced the purpose of the How-To app and then we spent 20 minutes coming up with as many ideas as possible! Using the tool Whimsical again, I was able to easily make “cards” for each idea. For Affinity Mapping, I created “stacks” to sort the cards. Each participant had 5 votes to use for their favorite ideas. This brought up some ideas for features that I had not considered before! Some new ideas I hope to use are the ability to save/favorite How-to guides, the ability to follow creators, and coming up with a rating system for easy feedback scores.

Results of dot voting during my UX Workshop.

Moving Forward

The Definition Phase has set the groundwork to move forward onto the next phase of the project — Ideation and prototyping! I am looking forward to using the information architecture and feature ideas from this phase to create the prototypes of the How-To App.

--

--

Nicole Osborn

I am studying UX Design at Lambda School. My goal is to create pleasant and meaningful experiences for people through the products that they use.