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.
Data Lake information
analysis
The Upsync dashboard is used to view, manage and automate data-lake information streams for easier analysis, allowing the customer to learn from the huge amounts of data they are collecting.
Users add data sources, set-up sync jobs and define destinations for exporting & analyzing data.
Users add data sources, set-up sync jobs and define destinations for exporting & analyzing data.
Example flow showing how a new sync job is defined and created. Users select sources, choose sync properties and define a destination for the data.
* This is a conceptual project meant to explore initial UX ideas and layouts along with preliminary UI look & feel.
A JOURNEY AWAITS YOU.
Journey is a collaborative travel app that makes it quick and easy to make sense of your travel plans. Whether you are the type of traveller that plans every step, or someone that prefers to get recommendations from friends - Journey keeps everything organized and easy to follow.
Starting a new Journey is easy - just add all the cool places you found, or get personalized recommendations based on things you have saved from previous Journies. If you’re travelling with friends or family, it’s easy to collaborate together and make the trip exciting for everyone.
If you need some inspiration for your next adventure, you can search for popular Journies from other users and discover places you never thought of visitng.
If you need some inspiration for your next adventure, you can search for popular Journies from other users and discover places you never thought of visitng.
Case Study: Building a design system for the Wix mobile app
Designing for large-scale and complex projects has inevitably led to Design Systems becoming common practice in today’s leading companies - many of them adopting different variations of the concept in order to maintain design integrity and scalability across their ever-evolving products and platforms. In this case study we’ll examine how we conceptualized and created the robust design system that is used today by the Wix mobile app team.
Initially, our team had no design system in place and we relied on meetings, team-syncs and group decisions in order to maintain a cohesive UI an consistent UX patterns. While this is managable in a small team and a relatively simple product, we quickly realized that this wouldn’t be sustainable as more parts of the Wix ecosystem were being integrated into our app.
Although we were fully commited to developing using React Native, a framework designed to make such projects quicker and simpler to develop without the need for code duplication, our team was still maintaining two separate versions of the app for both iOS and Android. Every screen and flow had to be designed and QA’d for each platform which greatly hindered velocity for all teams involved.
For us designers, this meant that we had to learn and monitor all of the subtle differences in design, UX and behaviors specific for each platform. For example, we designed with San Francisco as the system font for iOS and Roboto for Android. In addition, the constant evolution of iOS’s Human Interface and Android’s Material Design demanded ongoing monitoring to make sure we were up to date with each of their design standards.
Besides the core team of 3 UX designers (at the time), we also needed to be capable of supporting ~12 other Wix verticals that were being integrated into the app in parallel - each with their own teams of designers, devoplers and PMs.
It became obvious that designing on this scale required drastic changes to be made, and luckily one of our our lead mobile developers took this monumental task head-on, with others quickly jumping on board and realizing its potential.
Research and planning
Researching how industry leading brands such as Airbnb and Spotify approached this dillemma strengthened our determination to turn our vision into a reality. We began by mapping out all of our components, from simplest to most complex, and decided on optimal guidelines for design and implementation.
From the start, I strongly believed that the key to our design system’s success was the unification of UX/UI across both platforms, allowing for a system that could be easily maintained on the design side but also the development side. To me, split designs seemed old fashioned and cumbersome, especially for apps that wish to have a more branded experience. Such a change obviously required a fair amount of convincing due to the fact that most people are very loyal to their platform of choice - believing one is superior to the other in terms of UX/UI.
Although most components would become unified, some were deliberately left “native” in order to keep the familiarity associated with each platform. Here is an example of our custom top navigation that conforms to native guidelines but uses the Wix MadeFor font and custom icons.
Some components evolved into “hybrid” versions that mixed custom elements with platform-specific ones. For example, we made our bottom tab navigation adhere to iOS and Android dimensions and spacing, but we adapted the icon styles to fit our brand and removed the textual labels.
In addition to those considerations, I believed that the Wix brand should be the prominent driving force behind our designs. Having our designs aligned to Wix’s brand would mean that our users would be benefiting from a holistic experience across Wix’s desktop & mobile products.
A Generic System Architecture
Because the app was constantly evolving, our secondary criteria for the design system was to create a flexible architecture that could adapt to future changes easily and seamlessly. Together with the lead developer we defined a generic structure upon which we would build the sytem - essentially breaking down all elements into their most atomic form. Most importantly, the most common elements like typography styles, colors, inputs and buttons would be detached from any specific context.
For example, we defined our typography styles with generic names instead of specific ones (i.e. “title” instead of “card-title”).
This decision proved to be key in the success of our design system. Utilizing this centralized method of control makes communication between devs and designers much simpler and most importantly enables us to make cross-app changes very easily.
Similarly, our color palette was broken down to system colors spread across several tints. This proved to be flexible enough for use but also scalable if needed for future expandability.
If we ever want to change the main color of the app, we could do it in one place and instantly change it across all components.
Besides the system colors, we automatically generate these tints for any color chosen by our user - allowing for true customization while still staying within the design system’s logic.
A system within a system
Having defined a basic system for colors, typography and spacing, we then moved on to the most basic elements such as buttons, inputs and forms since these would be the building blocks that make up more complex components and flows.
Creating new components suddenly became was simple because of the basic rules that we previously laid out. Every component that was added came with its own guidelines, specs and behavior based on any previous components it was made up from.
Taking a button as an example, we used our typography styles for the text, our color system to define the colors for every state and spacing presets to make sure everything could scale to different texts.
As a testiment to its success, the design system has managed to support very large-scale changes such as updating the app’s font, adding support for tablets and even things such as accessibility for the visually impaired and RTL support - instantly applying these changes and updates app-wide.
We estimate that over 90% of the app is built using components from the design system, while the remainder are custom components that have not met the criteria for being added (one-of components that are not reused by any other teams). The system has proven its power to increase velocity and consistency for all teams.
Today, the mobile design system is maintained by a dedicated team of over 10 designers and developers that support the various internal teams working in the Wix App environment. Head over here to see more about the Wix App itself.
This case study is a work in progress and will be continuously updated.
The Wix App enables users to manage their website from their phone or tablet. Users can write blog posts, update store inventory, create and manage events and even live-chat with clients viewing their site. Users can also create their own mobile communities called “Places" and invite their clients to join.
As a Product Designer on the team, I was an integral part of planning the structure of the app, defining its design principles, developing the design language and also creating the main flows. Along the way we also created a mobile design system to help with consistency and design velocity.
CREATE YOUR ONLINE PRESENCE.
All projects, photos & images © Copyright 2021, Roy Sherizly