Wix Mobile App: Product & Wireframe
Millions of Wix users create and manage their online presence by creating beautiful desktop websites that show off what they’re all about - whether it’s a booking system for classes, an online store, a blog or a restaurant, Wix has you covered. Mobile traffic has long surpassed that of desktop, which means that those users need to be able to manage their business on the go. Recognizing this great potential, this is how we planned and created the Wix mobile app.
What makes the Wix app different from Wix on the web?
We already knew that creating a mobile management app would bring immense added value to business owners, allowing them to manage on the go, but we also wanted to create value for their customers as well.
This led us to conceptualizing a mobile “member view” where members can join and see a mobile version of the business (think of a website, but in an app). This new concept resulted in both “Owners” & “Members” having a significantly different way of engaging with the business, and thus following different paths when using the app.
Owners
Use the app to create & manage their business while also engaging with their members. Owners want to be able to customize and manage their online presence while on the go, which in turn gives them incentive to invite members to join and interact.
Use the app to create & manage their business while also engaging with their members. Owners want to be able to customize and manage their online presence while on the go, which in turn gives them incentive to invite members to join and interact.
vs.
Members
Join to consume services/media or to socially engage with the community surrounding the business (i.e. store, blog, forum etc.). Members need to find value in using the app, through easily doing meaningful actions. Hopefully this experience also leads them to create their own Place (viral loop).
Join to consume services/media or to socially engage with the community surrounding the business (i.e. store, blog, forum etc.). Members need to find value in using the app, through easily doing meaningful actions. Hopefully this experience also leads them to create their own Place (viral loop).
Bringing the Wix experience to mobile
Wix has a huge and established online offering that is built for use on desktop - beginning from the business manager, then on to the website editor and finally to a finished working website.
We used Wix’s vast existing framework as the base for planning a mobile version that would encompass much of the same (and sometimes added) functionality. This process began by identifying the main root-screens of our app (Home, Inbox & Account) and then mapping out each area individually along with all the inner-capabilities. The initial mapping was done at a high level with many interations.
A closer look at the app
After settling on the structure of the app, we started diving into the main screens - testing our ideas and assumptions and re-iterating where neccessary.
Home Screen - similar to the desktop’s main screen, this is where users choose which business (or “Place”) they wish to enter. This screen works by displaying dynamic content bases on updates & notifications and shows different capabilities whether you are the Owner or Member of the specific entity.
The Dashboard - Owners can monitor and manage their business through the 2 main tabs that make up the dasboard: Overview & Manage.
The Overview tab serves valuable information in the form of widgets that can be cusomized by the owner. The Manage tab gives full access to all the user’s content according to the installed verticals & features.
The Member View - Owners can customize their Member View and invite members to join and interact with it. The Member View is similar in concept to a website - you design the layout and invite people to view it. Similarly, everything about the Member View is editable by the owner.
Customize Screen - Similar to the Wix website editor, the Customize screen allows the Owner to add, remove and arrange “Sections” (think of apps) to their Member View. Once added, Members will be able to engage with these sections.
Inbox - Shows all the users that communicate with the business from across various channels (chat, email, website chat widget). In addition chatting, the Owner can also send the user offers and links through the chat. Members can also communicate with each other if the business owner has enabled such functionality.
Account - Organizes all the settings for the user that is logged in and also shows their activity across any places they are a member in. For example, if you book a class in a business - you can see it in the Account tab.
Following these initial wireframes, we continued to iterate and expand on the various areas of the app. As we began settling on the overall structure, we moved on to more high-fidelity wireframes and initial UI concepts.
Usability testing & collecting feedback
In order to really understand how our app performed in the real world, it was clear that we needed to hear from actual users. We held various usability sessions with a variety of different users in order to hear and see how they actually use the app.
One of our best usability sessions was held at Wix’s San Francisco office, in which 30 actual users were invited to come and show us how they utilized the app for their businesses. We collected hundreds of issues, bugs, feature requests and learned a lot about what users expect from us. All this data was then sorted and prioritized, which proved to be an immensely important tool for future improvments of the app.
We continued to improve in all areas of the app, from product to design, based on the data collected. After many additional iterations and the creation of a design system, we released a stable app with immense capabilities - achieving our goal and bringing Wix to millions of users’ mobile devices. Click here for a high-level look at the app and to see the final design.
All projects, photos & images © Copyright 2021, Roy Sherizly