From ideation to visualization _Course 3 Week 1 (19/9/2022)
After empathy and ideation phrases in Course 2, GUXDCC finally started to teach how to visualize the solution in Course 3: build wireframes and low-fidelity prototypes. It’s time to put down all the ‘high-level’ ideas I got on paper and turn them into something more concrete and practical.
Following the problem statement and hypothesis statement, now we have the achievable and measurable solution statement as the goal statement, one or two sentences that describe what the product can do and its benefits for the user. As UX designers, our job is not only designing the desirable features and functionalities but also testing their effectiveness before launch.
Problem statement:
[May] is a [beginner home baker with increasing workload and limited resources] who needs [a mobile app to improve business management and profit] because [she wants to build a prosperous business along with a balanced family life].
Hypothesis statement:
We believe that [a simple and free mobile app with business management and bookkeeping as key features] will [help the home bakers to improve their business management and profit].
Goal statement:
Our [Bakery Bookkeeping app] will let users [manage their sales from pricing, quoting to invoicing and track their expenses and payments along with automated financial reports], which will affect [the home bakers who have little experience and resources for bookkeeping and business management] by allowing them [filling simple and guided templates tailor-made for the bakery business while automatically adding data for bookkeeping] We will measure effectiveness by [monitoring how many sales/expenses have been logged in bookkeeping].
What the product can do in my goal statement is very similar to other competitors’ product statements, except in two areas: pricing baking goods and templates tailor-made for the bakery business, which I believe will meet the needs of home bakeries better than other competitors in the market.
How to visualize the solution
There are three ways of visualizing the ideas of solutions and presenting them to the UX team.
1. User flows
The insights from user research taught me that the home bakers don’t like to spend time on bookkeeping, but they have to spend time on managing their business, such as pricing and quoting, especially for customized cakes, which are high in demand and profit. Therefore, when designing a user flow for this bakery bookkeeping app, pricing and sending quotes to clients for customized cakes is the main task path users will take most frequently in the app.
The user journey map made during the Define phrase already listed a sequence of actions required after the user received a message from a new client for a customized cake. The user flow below is designed based on the user journey. Good documentation of UX research findings help UX designers quickly extract related information to facilitate design process.
Do we need a login?
Nowadays, almost all the apps require signup and login, even with more convenient choices such as face recognition, login using other social media accounts, yet I don’t see direct benefit for users except security reasons. (The phone should be secured anyway.)
Even after removing the login screen, the whole user flow is still quite long. A shortcut action button can take the user directly to the recipe template for pricing. More research and iteration are needed to streamline this user flow.
2. Storyboards
We all have seen some commercial ads showing how a product solved a user problem and how happy the users were in the end, which sent a strong and persuasive message about the product to the audience. Storyboards are a simplified version of this type of commercials with a series of scene panels visually describing a positive user’s experience with a product. It could be hand-drawn or fancy animation.
GUXDCC listed two types of storyboards. One is big picture storyboard, focusing on the user’s experience and emotions when using the product to solve their problem. Close-up storyboard is a series of screenshots of how the product works in close-up.
Big picture storyboard is easier to create since we have established the problem statement and goal statement, which clearly define the user, situation, problem and solution. While close-up storyboard requires more details of how users interact with the product, including screens and transition between screens. It is hard to decide what to show in a screen page before wireframes and information architecture design. Emulating competitors or influencers’ successful UI helped me quickly set up the key screens needed in the user flow. Bear in mind, the close-up storyboard serves as a visual aid to understand how the product works rather than the exact representation of the final product.
3. Wireframes
Low-fidelity wireframes use only basic lines and shapes to represent the layout of each screen. UX designers can use low-fidelity designs to catch the ideas out quickly on paper and leave room for exploration and refinement. In addition, extracting and analyzing the wireframes of competitors and influencers’ products allow me to understand how the information should be organized and in terms of UI, what works intuitively and what may confuse users.
Unlike storyboards with simple but self-explanatory sketches, low-fidelity wireframes are hard for non-UX designers to image the symbolic lines and boxes as text and images. Here is a comment from GUXDCC student forum regarding the weakness of low-fidelity wireframes:
“Lo-Fi wireframes are great for getting structure on paper and realizing early design flaws that can be fixed without wasting time. Something I’ve noticed that is difficult is getting product owner, or lead buy-in from lo-fi prototypes. Unfortunately, a lot of non-design focused people have trouble visualizing anything that isn’t hi-fi. I hope in my next position that this ceases to the case, but so far in my career all evidence points to that part not being true. So you end up doing the work multiple times because someone either can’t use their imagination to visualize the page being shown to them, or you end up getting the “ok” from someone who isn’t paying attention, then doesn’t like the hi-fi that they see later. Again, that’s just my experience up to this point.”
Higher fidelity conveys the design better
Low-fidelity wireframes do save time in design iteration; however, it doesn’t have to be the method for presenting ideas to stakeholders or users. For example, here is an explanatory layout design for an email newsletter. It uses intuitive icons and leaders with text to help readers understand design intention, comparatively better than lo-fi wireframes with no text at all. We should choose the visualization tools suitable for different situations to fully convey our design intention.
Lesson learned this week:
- Goal statement describes a practical solution to solve the user problem and the effectiveness of this solution should be monitored for further improvement.
- User flows, storyboards and wireframes are the basic methods for visualizing the solution. Each has its purpose and should be used situationally.
- Continuous UI research on competitors and influencers help UX designers quickly adapt the best practice and design guidelines to their product.
- Good documentation of UX research facilitates UX design.
