Using Design Thinking to Iteratively Build Wireframes, Style Guide, and Voice/Tone Content Guide for Web-Based Application in 50 Hours by 8 People
- The Project – (1 Hour, Phone call, Client)
YBUSA, a Bay Area non-profit seeks to support, advise, and guide low-income 18-29 year-olds who wish to become entrepreneurs. They knew from personal experience that they had a model that could work for a broad user base, both geographically and academically diverse, and if they could build a robust online, partially self-serve, partially educational business model builder then they could better serve the influx of inquiries they were getting from around the world.
Their current site utilized a Google form for capturing all of the information used to then create a PDF which was manually emailed to the user. It required that the form be filled out in one sitting, and even if you knew all of the terminology and all of the answers to the over 40 questions, it could take over an hour to fill out, without the option to save. There was no 'Help' or user assistance to help with terms and concepts, though there were lengthy examples included, which must be scrolled through to get to the actual question. The form contained no sense of progress within the form, nor was it visually appealing, and it was overly content-heavy.
The CEO of YBUSA asked for 'Turbo Tax but for business model building', for his target audience – low-income, 18-29 year-old aspiring entrepreneurs.
- User Research – (5 Hours – 2 hours prep, 3 hour workshop, in-person, client + 1 person)
Unable to do primary research, I met with the CEO, who was very involved in both the operation of the non-profit, but he acted as a mentor to a few of the program’s entrepreneurs. In a three- hour session which also included another content strategist, we extracted as much first and second-hand knowledge from the CEO, about his users, as we possibly could. Interviewing him about his users, we were able to draw out the five key user types from what he told us. He was able to easily think of actual users that filled these archetypical, broad personas and we had him answer many questions as if he were each of these users. This created copious notes, including paraphrased quotes of things actual users had said to him.
This spawned an exercise in which the CEO then drew 'A Day in the Life' sketches for each of these actual users he was thinking of, and then marked each point of each user’s daily journal as a high point (rose) or low point (thorn).
3. Persona Creation – (10 Hours, Remote review)
We started to see some patterns emerge about behaviors, backgrounds, motivators, and habits of these users, which were used as launching points for two, two-hour white-boarding sessions with another content strategist. These sessions helped hone the way I built the personas.
Studying all of the data I had collected, I started to group and evaluate patterns I saw and include valuable ones in the creation of the personas. Of the original five personas that we had created, one was not fully fleshed out as it was determined that it represented an out-of-scope use case for this initial phase of this application. The synthesis and creation of the personas took approximately 8 hours and about two hours was spent consulting with some user research colleagues to elicit feedback.
4. Ideation Workshop – (8 Hours – 4 hours prep, 4 hour workshop, in-person – 5 people)
I put together a four-hour ideation and prototyping workshop and four colleagues attended – an interaction designer, a UX producer, a content strategist, and a marketing writer. Guiding them through card sorts, 8-up drawings, affinity clustering, and idea posters, we were able to come up with a basic framework for what this application should include, functionally, as well as how to include it, and the major flows, information hierarchy, and interactions that would be needed to be prototyped.
5. Rapid Prototyping Workshop – (8 hours - 4 hours prep, 4 hours workshop, in-person, client, client’s engineer + 4 people)
Facilitating a rapid prototyping workshop with three colleagues (content strategist, UX producer, and marketing writer), we had the CEO of YBUSA and his engineering architect come in and respond to our iterative paper prototypes. Three rounds of prototypes later, we had a direction for the maker session in order to create deliverables.
6. Maker Workshop – (10 hours – 2 hours prep, 8 hour workshop, in-person, 4 people)
This day-long maker session included a content strategist, marketing writer, and interaction designer. Working together, we built a site map, created wireframes and interaction rules, and built a tone and style content guide, as well as a style guide, which included fonts, colors, and a full set of icons. This resulted in the three deliverables which were sent to YBUSA the following week.
7. Loose Ends/Delivery – (8 hours – 3 on content guide, 3 on wireframes, 2 on correspondence and delivery)
The interaction designer who built the wireframes wanted to clean up some of his links and color usage so that the prototype delivered would truly be medium fidelity. The content strategist who took responsibility for the tone and voice content guide also spent some additional time on editing and including more examples. A zipped folder of wireframes, a link to the online style guide, and a Word file of the Voice/Tone Guide were delivered via email, and to YBUSA’s CEO’s gratitude and satisfaction.