How I used paper to prototype a new visual editor for MyOnlineStore
Organisation
MyOnlineStore B.V.
Project
Paper prototyping
Challenge
MyOnlineStore aimed to launch a new visual editor. The goal was to create an editor that was both powerful and accessible to users with varying levels of technical expertise. The key challenge was to determine the most effective layout, feature set, and user flow that would cater to both novice and experienced users without overwhelming them.
My role
UX / UI Designer
Duration
4 months
The way designing your webshop worked in MyOnlineStore was very form heavy. There was no preview or visual way to edit your store. It all had to be done in form fields. Meanwhile the competitors had fancy visual editors, with drag and drop and a wide range of features to design your store directly as you see it. The objective was to design a intuitive and user-friendly visual editor as a Minimum Viable Product (MVP) that allowed our users to easily create and customize their store.
To address this challenge, I decided to use interviews and paper prototyping. This method allows for rapid iteration and user feedback, which is crucial in the early stages of design. Paper prototyping enabled us to explore different design concepts quickly and affordably, ensuring that we could refine our ideas before moving to digital prototypes.
To start of the project I did desk research and a competitive analysis to get a feel for what our customers were used to in the competitor field. It appeared that MyOnlineStore was far behind when it comes to editing the design. The competitors mostly had similar visual editors to directly edit the layout, content and style of every page. It was clear to me that if we managed to structure the elements we had on a page, we could identify a set of basic building blocks. The blocks would be easy to maintain (as it is a limited set), but would provide flexibility in placement and style. (Basically like Lego's).
In the meantime I planned and conducted user interviews with potential users to understand their needs, pain points, and preferences. They confirmed what I had found in the competitor analysis: they wanted to see what they were changing and they wanted to directly impact the layout, content and style in a modular way.
To prepare for the paper prototype sessions I created modular elements out of paper. I created the most popular sections, blocks and elements from the competitor analysis in a pdf and sent it to a copyshop. After a day of cutting I had a wide set of wireframe-like elements for the participants to use during the sessions.
Over the course of several weeks I ran 3 sessions with up to 5 customers at a time. During the sessions the goal was to create their ideal homepage using the paper elements. This showed me what elements were most important and how they would lay them out. In the second part of the sessions we had a discussion about what content they would put in the elements and if they would want to change anything about the blocks provided. This gave me a basic understanding for the necessary features of the editor. The key take-away was that it was a must to 'see what you are doing' and a must to be able to 'easily change the content'.
After the sessions I had a very good understanding about the requirements for a MVP for a store editor. The initial idea to divide the page into modular sections, rows and blocks was spot on. During the sessions there were little to no questions. The participants were very excited about the prospect even though a first digital version would mean they would have far less features. It felt so much easier to use because they could see what they were doing and were simply moving blocks around.
I turned the learnings from the paper sessions into a first digital version of an editor. I started with a lot of wireframes. The main challenge was adding the interactive menu's and interactions in a way that was not intrusive to the design. So light and minimal. This was done verbally during the paper sessions. Once I had a prototype wireframed I was happy with, I tested the flow by several usability testing sessions.
After testing the basic prototype I added a more appealing style to the flows and screens. I kept it lightweight, round, modern, with light colors. I decided to use white and blue to resemble modern design tools of the time and to have a distinct color for the editing UI. This resulted in a pretty detailed prototype ready for more user testing.
This project highlighted the value of paper prototyping in UX design, particularly for complex tools like visual editors. The iterative nature of paper prototyping allowed me to experiment freely and refine our designs based on real user feedback. By prioritizing user experience from the outset, I was able to deliver a MVP instruction that met user needs and expectations effectively.
