Wix

mainscreen.png
 
 

Background

My first client work was with Wix. Wix is a cloud-based web development platform that allows users to create HTML5 websites and mobile websites through the use of online drag and drop tools. Users can add all types of functionality such as social plug-ins, e-commerce, etc. to their websites. UpContent wanted to be one of the third-party applications for a feature called UpContent Gallery. This took a little over 2 months. I worked collaboratively with the Wix developer and UX designer for this project.

 

What is UpContent Gallery?

Basically, it's like a picture gallery, but for content. This tool embeds relevant and engaging third-party content for audiences. 

 
 BHiveLab is one of our clients that uses our gallery feature. Relevant articles appear on their homepage for users to read.

BHiveLab is one of our clients that uses our gallery feature. Relevant articles appear on their homepage for users to read.

 

Wix wanted UpContent to create how the interface would look like for Wix users who would would want to show a content gallery on their website. The steps are simple for the Wix users: pick a topic (or create a topic) and pin articles that you want to display on your website. 

The biggest difference between the regular UpContent Gallery and what Wix wanted was that they have free/premium features. We had to clearly differentiate what we wanted free users to get and what we wanted premium users to get. Thus, the user flow for these screens were very important.
 

 

 

Our Personas


JOE C.
Joe is a professional photographer in San Diego. He opened up a Wix account to upload his photos for the public to see, and luckily, his works have been getting popular. Article writers and bloggers have been positively mentioning his works on their sites. He wants a way for people who visit his site to see all his honorable mentions from other sources. By seeing positive reviews about him from other sources, he hopes to attract more customers that will want his photos.



Sharon P. 
Sharon and her husband owns a local restaurant in the suburbs of Seattle. The restaurant is known for their farm-to-table foods, so it is a popular place for people to try. She maintains her restaurant website through Wix. She wants people to know what makes her farm-to-table restaurant so special. On the website, she shares links to articles that write the benefits and positive reviews of being farm-to-table. She wishes there were better ways to provide these article links.

 

User Flow

The user flow for once users go inside the desktop modal is pretty simple for both premium and free users. In the modal, they should be allowed to choose article categories and manage displayed articles. Premium users have options to create custom categories and remove/pin articles.

 

Low Fidelity

With the user flow, the Wix team (developer and ux designer) and our team created low fidelity wireframes. These wireframes helped us to solidify our content-based placeholders. It was also important that we have all the necessary information for each screen, so creating low fidelities helped us to easily lay out all the information the user needs to navigate the pages before creating any visuals. 

 

Site Map

Besides the desktop modal (choosing categories and managing them), another responsibility was to create the settings widget. I took a deep look at other product features in Wix and noticed that all products have the same, or very similar, settings widget interfaces. The developer also stated that all settings widget require all the same options (choosing layout, design, etc). We just needed to be concerned with the user flow between premium/free users. Thus, I created a site map that shows all possible options that users can handle in the settings widget.
* The box highlighted in light blue are the ones that are only available for premium users.

 

Wix's Style Guide

For designing the high-fidelity wireframes, I used Wix's style guide. This allowed me to provide consistency across Wix's channels and platforms.

C31 - Tooltips - Guidelines.png
Colors.png
 

High-Fidelity

After many iterations, we were able to finalize our high-fidelity wireframes. Since we worked on solidifying our user flow, content, and placements in the low-fidelity wireframes, the high-fidelity wireframes are very similar. It wasn't too hard doing these wireframes especially since Wix had style guidelines that I could simply copy/paste. High-Fidelity wireframes were created for both the desktop modal and settings widget.


PREMIUM - MODAL


FREE - MODAL


PREMIUM - SETTINGS WIDGET

 

What the site looks like for end users

8.2_premium.png