Vertical Order Form

March 2023
Project Overview
Vendors and real estate agents place hundreds of orders daily for real estate media services on this platform. Given the large volume of orders that are processed through the system, we want to improve the order form experience for both vendors and their clients.
My Role
My responsibilities included product requirement scoping, user interviewing, brainstorming and competitive analysis, wireframing, hi-fi mockups, prototyping, and usability testing.
‍
The current order form solution offers a step-by step, multi-page approach to going through the necessary steps to place an order. The pros of this approach are as follow:
- less intimidating UI
- less scrolling
This can also present the following issues (note these are assumptions):
- more clicks: user has to click “previous” once or multiple times to be able to edit information from a prior step
- the segmentation of the order form into pages could create the feeling that the order is longer than it really is

To give users more flexibility in what order form they prefer, we propose to design a vertical, single-page order form. With this design, we still guide the user to complete the steps sequentially, showing each subsequent step as the former is completed, as such maintaining the visibility of system status. This will ensure that the user isn’t overwhelmed by the amount of information shown on the page at once and can intuit how to logically proceed through the flow.

The main user types for this project are (1) our users (the vendors) who place orders on behalf of their clients (the real estate agents) and (2) clients or the real estate agents, who complete an order by entering our order form by going through their vendor's website. This was based on insights from previous interviews where the discussion of the current order form was tested (such as in the payments project).
Current Solution, Project Scope, and Users
Since the information and user flow for this project would mimic that of the current solution, I decided to forgo mapping out the IA and user flows for the sake of time. Instead, I started out by looking at various direct competitors that include an order form experience as part of their product and indirect competitors that utilize an order form, not necessarily in the context of prop tech.
Competitive Analysis + Inspiration
Examples of competitors and ideas that I took inspiration from, specifically layout-wise.
Wireframing Iteration + Internal Feedback
Upon starting wireframing, I started to experiment with several UI elements and components. For round 1, I kept the order form as similar as possible to the current horizontal layout, experimenting with elements like a vertical progress bar, branding colors usage for active and disabled states, and the usage of CTAs to act as an additional signifier to guide the users through the form.

Upon showing this to my team, we came to the conclusion that we could try making the order form even more streamlined and condensed by removing or hiding certain elements that are present on the current order form such as headers, descriptor copy, buttons, branding and logos, as well as experimenting with a full-width layout.

Following this second round, I regrouped with my team and made minor edits to the second iteration, by adding more vertical spacing between accordions and looking into a 4-row card display for the services step.
Screenshot of various iterations and versions that were explored in wireframing
Following the wireframing iterations, I mocked up a high-fidelity version for the deliverables that came from round 3 of iterations and prototyped it in Figma. I also created a few new components (such as the section accordions) that the developers would need to build out when developing this project.

My main intention for prototyping the order form flow was to test out the proposed solution with our users and to be able to get internal feedback from my teammates.
Hi-Fi Mockups  + Prototyping
The purpose of these user interview was two-fold. The first part of this interview was generative and involved understanding how users currently interact with the multi-page, step-by-step order form, taking note of any points of frustration with the current horizontal flow, what those pain points relate to (ie. layout, poor UX, too many clicks), and how they may be improved. The second part of the interview concerned usability testing and involved showing users the vertical version of the order form and understanding how this version compares/contrasts with the current version, while noting how users gauge speed/efficiency of completing with this proposed solution.

From these interviews the following were a few themes and insights that came up:
1. New order form makes placing an order faster and easier.
They appreciated the more modern, clean look. While users have not said going back to earlier steps was a pain point for them on the current order form, having seen this new version, they appreciated the option of being able to just click on the step they want to go back to rather than clicking “previous” multiple times.

2. Vendors' customers (real estate agents) are typically older, less tech-savvy, and hesitant to provide more information than necessary.
‍Vendors have expressed extensively that customers are usually not tech savvy and will need additional affordances in the UI to be able to go through the given flow. As such, the maintenance of “previous” and “continue” buttons is a necessary fallback option, if the customers don’t know that they can click on accordions to expand/close them. Likewise, the option to keep descriptor text was brought up by users to further guide the user as to what they should accomplish in each section. Users voiced that the hesitancy for some customers to create an account can deter certain customers from completing the flow.

3. Users want the option to have branding on their order form.
‍While a few of the users (2 out of the 8 interviewed) didn't have too strong a preference for the branding aspect of the new order form theme, the majority expressed the need to include their logo at the top. They voiced the need to be able to customize their branding colors on the form as well.

Following this feedback, a few examples of the design implementations that came from analyzing the feedback are listed below:
1. adding in more signifiers, such as the "previous" and "next" buttons for older users who may not know to click on accordions to go back
‍
2. adding in more information to the closed accordion section once it has been entered, such as making the address name visible in the closed accordion section so that users who have multiple tabs open and are completing many orders at once are quickly able to note the property that the order is correlated with
‍
3. mocking up the mobile responsive version of the order form; as this was something that a lot of on-the-go users expressed the need for, this mobile version would have been tested with those users in further usability testing rounds
User Interviews + Feedback
Mobile responsive version of the order form
Visibility of address name and option to include description copy.
With this project, I came out with many insights about UX research in particular:
‍Noting assumptions before designing
‍When coming up with project goals and exploring the problem definition it can become difficult to differentiate between facts and opinions. It's easy to jump to conclusions in problem definition where, for instance, we assume that a given area is a pain point for users, when, in fact, it may not be, once further user research is conducted.

User interview insights from one project can help answer questions or provide feedback for another project
When I gave users the prototype to interact with, I heard users frequently providing feedback on elements of the order form that were part of a different project, such as the services, contact, or confirm step (which were all separate projects). By being responsive and open to what users comment on when interacting with a prototype, you can easily use that feedback to iterate on projects that have already been developed. While there may be other projects that are currently prioritized, it is always valuable to note any feedback that can improve future deliverables for previous projects.
Project Reflections
Ewelina adamczak
LinkedindribBbleresume