Pro-cery (shop like a pro)! — Wireframe Prototype
It is said that time flies by when you are having fun. We are now at the last 3 episodes of the “Mastering Prototyping Techniques” series. In this episode, we were taken into the digital world and reminded of the prototyping techniques in the digital design space.
If one asks any designers, say UX designers, about what is the most commonly used prototyping technique in the digital design space, they will probably say wireframe. Wireframe is an early, low-fidelity version of a digital product (e.g. website, app) where only lines and vertices are used. It is commonly used to explore the early concept and design of an idea as well as a communication piece across different teams. In this episode, to better illustrate my understanding on wireframe, I rapidly generated a wireframe for a grocery list tracking app. Since this wireframe prototype was used only to illustrate my understanding, no user research was conducted in the design process.
Design
Ideation — user requirements, scenario and features
To begin the design process, I pulled out pencil and paper to conduct a quick ideation session on grocery list tracking. This topic was chosen because I have been a common grocery shopper and I found that sometimes I forgot items I needed to buy. I started the ideation by recollecting the problems I ran into while I shop in the stores, and I listed them out on paper as “user requirements”. From the user requirements, I rapidly wrote out the scenario when the app would be used. Along with the scenario and user requirements, the features needed for the app naturally flowed out! The major problem I came up with was that users might not know where to go inside the grocery store. Thus, a combined functionality of grocery list and in-store navigation seemed fit. After generating the features, I quickly sketched out an IA for the app, so that during the wireframing process, everything could be kept in order.
Wireframing — sketches on paper!
After listing out all the requirements for the app, it was then time for the design of the layout. Since this was still a very early phase of the design, I sketched out multiple ideas of the layout. In design, sketching is probably one of the most useful tool to generate ideas. In the sketch, I focused on the layout, i.e. what the overall interface might look like, where was certain buttons, etc.
Wireframing — make it digital!
After sketching the key pages out and making sure all the functionalities were included in the wireframe, I proceeded to move the wireframe to a digital platform. As I mentioned in the very beginning, wireframe can be used as a communication piece across teams. Thus, the ability to generate wireframe on a digital platform is thus essential. There are a lot of tools for this particular purpose, e.g. Axure, Sketch, Adobe XD, etc.
I chose Axure for this step because I was experienced in it!
Axure — wireframing with ease!
With the built-in widget library, Axure makes the wireframing process really easy. Users could drap and drop boxes from the library and create the interface layout in no time. With the sufficient amount of annotation, the wireframe could then effectively communicate the idea of the app!
Adding some simple interactions!
Sometimes, a mere collection of wireframes was not sufficient in communicating the concept of the app, especially the connection between different pages. Thus, it could be a good idea to add some simple interactions. That way, different team members could play with the wireframe and get a full idea of the product. Again, there are a lot of tools out there allow you to do that, but since I have already started with Axure, I will use Axure to implement some interactions.
Axure — not a simple tool for this!
With my experience in wireframing tool, I must say Axure is not the easiest tool to use for implementing simple interaction. To add simple interaction, I would recommend application such as Marvel (previously know as PoP) or Invision. Here, I will give you some hands-on tips on what to look out for adding interaction using Axure.
Axure — master
For elements that would appear in multiple pages, you should create them in masters, so you do not need to add the interaction in multiple places. For example, I have a navigation bar at the bottom of the screen, thus I created the navigation bar as master and add the interaction there.
Axure — using interaction style!
When you button is clicked, you probably want to indicate that (e.g. the button is grey out). Of course, one might be thinking to create another screen with the grey out button. However, Axure actually allows you to define the interaction style. To do that, simply right-click and choose interaction style to define what should happen to the button after the defined activity (such as clicked). In this case, I made my button go green when clicked.
Axure — share it with others!
To share it with others, simple use the Axure Share feature. It locates at the top right of the interface. You can play with my interactive wireframe here:
User feedback
After creating the interactive wireframe, I recruited some real-world users from my peers to test out the concept. Overall, participants seemed to enjoy the concept of the app because it provided in-store navigation based on users’ grocery list. However, participants were confused with the description of the “routed page” (in-store navigation). Since they were able to understand the function of the page after explanation, the name of the page should be changed if it were to be implement in the future. Other than that, participants were also confused with the position of the buttons on the navigation bar. Thus, future usability testing on the navigation bar should be conducted.
