In this article, you will see the evolutionary process of developing a modern interface and a functional widget, as well as learn about the features that made our design convenient, interactive and useful. We invite you to see how the interface was created from the draft stage to the commercial version.
Optimized Widget for Recording Photo and Video Reviews: How We Developed a Modern Design for a Promising Startup.
Client Background
A British client presents a promising business socialization startup using the convenient Visual Review web service, which allows you to create useful visual reviews of various products. The goal of Visual Review is to enable customers to share their experience through photo and video reviews, where they can recommend products and help others shop by watching personal review videos.
Client’s Inquiry
The client approached us with a startup idea for a platform where users can upload photos and videos of consumer reviews of various products. They also asked us to think through the process of creating an optimized, modern widget that can be added to the sites of online stores. The idea was to create a really useful assistant for buyers. From a marketing standpoint, widgets help you attract new customers, increase loyalty, and help drive users to make a purchase.
From a business perspective, according to the client’s idea, stores with an “Enterprise” subscription will be able to customize the location of the widget on their webpage. Other types of subscriptions will not include this functionality, they will have only a self-service option.
The client expected us to develop a UI/UX interface design: think through the entire user flow, diagram all user roles and third parties. They also needed us to develop the main landing page to demonstrate the product. The priority was to draw the design of the mobile version and adjust the desktop version to it. The main request for the visual component of the widget is to make it like Videoask.
Discovery Phase: Communication Strategy
We started the project by holding several meetings with the client and the UI/UX team in order to collect as much input as possible regarding its market, target audience and better understand the very idea of the product.
While working on this project, we chose the design-thinking approach, which is user-oriented and involves non-standard problem-solving. It just so happened that, in our case, this approach was the most optimal solution. Our past experience has shown that exactly design thinking involves immersion in the consumer experience, a third-party approach to identifying problems, focusing on personal scenarios of behavior and actions. The approach involves creatively rethinking the problem, while still being based on common sense.
Project Estimate
After working through the ideas, we determined our further strategy and conducted an assessment of the working time: for a deeper analysis, creating a UI/UX design for the main product site and an admin panel for setting up the widget.
Research and Market Analysis
We collected all the requirements in one table and plunged into a deep study of the audience. To better understand the consumer experience: we focused on personal scenarios of behavior and actions. This helped us better define the approach and choose the best practices for implementing the design.
The analysis and preparation for design development were as follows:
- Conduct an interview with the client to clarify all the necessary questions
- An analysis of the potential audience and similar third-party services
- Teamwork, generation of ideas (brainstorming) that will work for the case under investigation
- The embodiment of the idea – at least in the prototype of low fidelity wireframes
We divided the work within the framework of this project into the following stages of the design study:
- Empathy. Here we understand what our users need, what their values are, what their emotional and physical needs are. To do this, we use such methods as observation, information search in open sources, interviews, focus groups.
- Focusing. At this stage, we process the information received and form an overall picture for ourselves. We determine the needs of our target audience.
- Generation of ideas. We think about ways and means of solving the problem. Brainstorming within the design team.
- Choice of strategy. Now it’s time to identify viable ideas. Remember that the product should be needed by users and liked by its creators.
- Accordingly, we choose ideas that are both valuable to the business, useful to consumers, and technically feasible.Prototyping an idea with low-fidelity wireframes. We created a prototype script, describing, step-by-step, each user action in order to solve the task.
The next step is to get feedback from the client and approve the concept. After the ideas are approved, we proceed to the full rendering of high-fidelity wireframes and UI style.
From Idea to Actualization
After a deep analysis, we identified the main functionality that will be included in the MVP stage, described the difference between a site and a widget, and divided user paths into several roles. The main site should show additional information about the reviewed product.We worked out the flow for different roles and realized that the number of user steps should be reduced both when playing or recording a video and for taking a photo. Ideally, the design itself should guide the user, as well as explain what the next action needs to be. Ease of use is the main goal of our design.
So, our main plan was to create a convenient UX and a modern UI for both the service site and the widget display. At the same time, the design of the Mobile-First widget is a priority. We paid special attention to the following important pages:
- Landing page.
- User registration flow by roles.
- User Dashboard by Role.
- The visual solution of the Widget.
- Widget settings.
The most interesting and coolest challenge of this job was to develop a custom role path.
Key Pages: Design and Emphasis
In order to create a good user experience, we modeled the flow using a step-by-step funnel technique, thus helping the user move on to complete the targeted action.
Now let’s show a part of the user path for key pages and widget settings for the Visual Review web service.
Landing page: Functional blocks
As part of the study, we analyzed a large number of landing pages, formed visual recommendations, and proposed an information structure for the project for an effective landing page. We have defined the main functional blocks:
- Hero block – Its function is to make the right impression on the user, inform them about where they are, motivate them to stay, and scroll down the page.
- Information block, as a comprehensive story about the project – In this block, we have posted a brief onboarding about the product: what it is, how it works, and who it’s aimed at.
- Target business block: subscription – This block is focused on lead generation: choosing a subscription with details and a price list.
- Why Join Visual Review block – This block includes clear benefits for the user and highlights exactly what the advantage of our product is.
- Discovery page Target block with a call to action: explore the product.
The final target business block with a call to action is Sign Up.
The next stage is to fill it with color and place accents. Since we were faced with the task of creating a trendy, bright, recognizable UI style that will last for more than one year, we paid special attention to the development of the logo and the selection of the color palette. The fact is that the client did not plan to develop a full-fledged brand book with market positioning.
At the MVP stage, we limited ourselves to choosing an icon and suitable typography for the logo, and also picked up a color scheme for the site interface. First of all, we decided on the top element of the logo, which became the main and our guideline in working on the visual style. We were guided by two principles when creating a palette: there should be one active color, and additional colors should not distract attention.
The next step is the visual design of the interface, and we really wanted to create a real kaleidoscope of impressions and place stylish accents in the landing interface. We focused on visual solutions and thought over the UI concept: a logical sequence of information blocks, a common style, a logo, a suitable color palette, graphic patterns, fonts, and selecting a suitable grid.
The navigation was designed in the form of a horizontal menu on the desktop and in the form of a burger in the adaptive.
We paid special attention to the Discover block with a call to action, which is the entry point to the strategically important Discover page.
Discover Page
The challenge was to have more visualization and less textual information.
User Scenarios and Roles: Dashboard Structure and Data Visualization
We think about interactions throughout the UX design process, but only start designing them now that we have a clear design vision in mind.
In the case of the dashboard, before starting the design, we processed the information that we collected at the stage of research and analysis of business processes. We thought over the key scenarios, structure, and ways of visualizing data on the dashboard. It is important to understand what goals and needs a particular user has who will use the system.
So, we have defined the main user roles for each type of dashboard and registered user scripts for the following roles:
- Guest User
- Registered Customer
- Brand Admin
- Visual Admin
- Super Admin
Guest User
When accessing the website, a Guest User can see the library of created reviews, filter them by brand, sort by date and popularity. They can see reviews, leave likes and anonymous questions, see a link to an email where you can write to support.
When using the widget in guest mode, we have defined the following available actions:
- Open the widget
- Sort by popularity and date
- Watch videos/photo reviews, as well as all reviews
- Place likes on reviews
- Ask and answer questions anonymously
- Record a photo or video review
- Create an intro with a title for the review and add a description with custom emojis
- Log in or stay as a guest
User Dashboard: Registered Customer
A registered user has more options. After authorization, the user gets access to the control panel, with all their reviews with the statuses “Under moderation”, “Approved”, “Declined”. They can also sort their reviews by date and popularity, filter by status “Need reply”, “Approved”, “Denied”. While remaining authorized in the system, the veviewer will be able to ask and answer questions on their behalf. When using the widget, the registered user will be able to perform all guest actions.
Also, we proposed to implement a loyalty system in the form of bonus points. Users will be able to accumulate points by creating new reviews, answering questions, and getting upvotes. The more points, the more chances to get level badges. We implemented the grading of points as follows:
- 0-10 points = none
- 10-25 = Expert
- 10-50 points = Guru
- 50+ points = Star
User Dashboard: Brand Admin
A user in the role of a brand admin, in addition to all the capabilities of a registered user, can customize the appearance and location of the widget, copy the script that needs to be inserted into the code on the brand product page so that the widget is displayed on this page.
When opening the dashboard, the following information and settings will be displayed:
- All reviews recorded on the brand’s website;
- The ability to sort reviews by date and popularity;
- Filter by “Need approval”, “Displayed”, “Not displayed” statuses.
- The ability to confirm the display of a review in the widget on the product page and on the Discover page;
- See the display of statistics on the number of all recorded reviews, as well as the total number of likes;
- Edit the subscription, see the invoice history display, change the payment method.
- Receive notifications about new reviews, debiting of funds for a subscription, the expiration of a subscription in the near future.
We linked the dashboard settings to subscription types. This way, the Enterprise subscription does not provide the ability to copy the script. When choosing an Enterprise subscription, the administrator contacts the brand agrees on the terms of cooperation and the appearance of the custom button (optional). In this case, the script will be sent personally by email.
User Dashboard: Visual Admin
A user in the role of visual admin in addition to all the features of other roles can see the entire history of the existence of reviews, as well as reject any review for display on the Discover page on the site.
User Dashboard: Super Admin
The widest range of activities. All actions are similar to those of a Visual Admin, and the number of filters increases when selecting statuses: “Need approval”, “Displayed in the widget”, “Not displayed in the widget”, “Approved for Discover”, “Not approved for Discover”. In addition, the super admin will be able to view the list of Registered Customers, delete their accounts, and help recover user passwords. They can change the cost of subscriptions for brands, view the list of brands, confirm the change of subscription for the Enterprise type.
On the part of the client, there was maximum involvement, active participation in the coordination of decisions.
Optimized Widget: Design and Emphasis
As we worked on the design of the optimized widget, the task acquired new details and transformed. Since the client preferred Videoask’s design implementation, we chose this service as our main reference. In general, we liked this idea. We began to study various analogs, discuss them with clients, regularly held stand-ups, and gradually came to a single concept of how the widget should look. The main requirements for the functionality of the widget were as follows:
- A Mobile-First design is a priority
- The video should be viewed in the same window, with the ability to switch from viewing one video to another
- Fewer pop-ups, fewer extra steps
- The video preview page should not completely cover the store page. It should be possible to watch the video at the same time and continue to use the store page
- There should be filtering by popularity or by date
- The UI style should look minimalistic and fit seamlessly into any brand website design
At the widget design stage, we tried to discuss every step with the developers. In general, we managed to create a harmonious design of the widget and correctly place accents so as not to distract attention from the video review.
We all know that a beautiful design sells. This is also true for designing optimized widgets. If you want users to choose your product among hundreds of others, you need to make them fall in love with your product as soon as possible. Studies show that it takes only 7 seconds for a user to decide whether they like a visual or not.
Conclusion
The basis of any system is always the goals and expectations of the customer and the effect that we want to achieve. A custom dashboard is formed for specific tasks that are identified from the data array. The dashboard will work in the case of deep analytics in the early stages. It is for this reason that personal communication and external expertise are very important. An analyst who is outside the system can see more than one who is inside.
We very briefly described our approach and all the processes of creating a design for a startup. Roughly conveyed a general understanding about creating custom dashboards, so many things will be given in general terms. The dashboard is assembled for a specific business and a specific list of tasks. But please note that this is just an example, all cases are individual and for each project, we find our own solution.
Insights of leading groupBWT UX designers, after completing the work:
You should put forward hypotheses and be prepared for the fact that most of them may not be confirmed. The real market and customers often think differently from you.
