Semble

case study, ui/ux, mobile.

Semble was initially an app concept created at Startup Weekend Toronto 2014 with a team of six members. Semble uses augmented reality to teach users how to assemble furniture by overlaying instructions through a device's camera. I revisited this case study on my own to reflect my thoughts and changes.

Problem Space

There are many ways people learn and how they learn is different from person to person. These range from following someone's lead and emulating their actions to pure memorization of written instructions. The problem space that Semble tries to tackle is how people learn. What is the most effective way to teach someone at their own pace and make them retain that information?

During the hackathon we decided to focus our attention to building Ikea furniture because we found that their manuals was a pain point for many people. We conducted a survey to see if this would be something people would be interested in during the Hackathon.

Ikea manuals are well designed as they cut down on the amount of paper that needs to be included in a package. They use diagrams to communicate how the furniture is assembled which reduces the need for multiple translations and physical copies as there are no words. Unfortunately this doesn't cater to how everyone learns because people still struggle to understand instructions with static imagery and the lack of descriptive words. We also decided to go this route because we wanted a situation that was familiar and relatable for most people.

Goals

The goal of Semble is to create an environment where people can learn at their own pace using augmented reality. The app aims to make it easier for users to digest complex constructions to simple steps of assembling. We wanted to demonstrate that this concept of learning can be applied to other areas such as constructing a watch to fixing a flat tire.

Brainstorming Process

Before defining what pain points users had with Ikea manuals, I took a look at the overall user experience of an Ikea customer using a journey map as a starting point.

A day at of shopping is always exhausting and shoppers tend to get hungry as they spend more time searching for the right item. Ikea has thought out this experience and found that it works best by making the customer walk through the entire store to get to the good stuff (meatballs). The next half of this experience is the customer being in the comfort of their own home and assembling the furniture they bought. While they open up the neat packing they look at the tools and materials and feel a sense of dread. They take the manual and look at it. What they see are illustrated instructions. There are no words because a picture is universal in all languages and it's easier/cheaper to make one version of instructions. This has a certain elegance to it but as they start to look closer at the illustrations they realize that a lot of the screws look very similar and the only differentiators are a bunch of lines. They try to understand the positioning of the illustrations and how their materials should face themselves. The assembly experience just gets more tedious and frustrating because the manuals use a narrow form of instruction for the sake of universality. It's tedious and frustrating because they just want to put things together without actually figuring it out. There are many pain points in this situtation. Ikea's manual is the key to making or breaking their brand's experience. Some of these pain points are:

  • The manual doesn't convey perception very well since it uses two dimensional diagrams to instruct how to create a three dimensional object.
  • It can be difficult to differentiate similar materials (such as screws) because of the illustrations.
  • There are extra screws at the end or the final product is a little wobbly. The customer did something wrong somewhere in the process but they don't know at which step.
  • The time it took to build a product was longer than expected.

In order to figure out who would use this app I created a stakeholders map to get an idea of who the customers at Ikea were and their motivations for purchasing new furniture. I found that their motivations boiled down to the same few reasons which were furnishing a room, old or new. As a result, instead of focusing on creating user personas the focus was on the task at hand when assembling furniture. These common tasks were created with the previously mentioned, pain points in mind:

  • When I am searching for my product I want it to be fast so I can start assembling ASAP.
  • When I have finished assembling the furniture and find that I have extra screws left over, I want to see all of the steps that uses those screws, so I can figure out where I went wrong.
  • When it is my first time assembling furniture I want to see how long it will take so I can plan my day around it.
  • When I assemble my furniture without consulting the instructions and I get lost so I need to look up the next step, I want to see a progress model so I can quickly figure out what is the next step.
  • When I stop assembling or close the app to take a break, I want a history of what I was building so I can quickly resume my progress.

User flows & wireframes

For the next step I created user flows to chart out how the user would interact with the app and plan out what screens would need to be created for my wireframes. Click the flow chart to view in a new window.

Below are the wireframes of the general flow of the app and the features that would help the user complete the tasks above. Click the wireframe to view in a new window.

Mockups & Interactions

Below are high fidelity looping mockups of the app. To create the interactions I used Principle.




These three screens show the interactions and flow of the primary feature of the app. In the first screen, when the user opens the app they are directed to scan the barcode of their product. The user scans the barcode and is taken to an overview of the product which show the amount of steps, estimated time to build it, and material and hardware information. They click the play button to get to an overview of the steps involved.

In the second screen, the user selects the first step. They are prompted to align their hardware to what is shown on the screen. (They have the option to disable this feature by turning the AR toggle off.) The user completes this action and the tutorial starts.

In the third screen, the user has completed the step and is ready to verify it with the app. They select verify and the app prompts them to align their work. Their work is verified and the user can go to the next step.

The user has the option to search for their product if they don't have the barcode on hand. In the screen above the user selects the magnifying glass on the main screen. They type in the name of their product and the results display all products with that name along with a description of the product category.

In the screen above, the user selects the clock icon and is shown a history of products that they have worked on. The history page is categorized into two sections: most recent and completed products. When they select a product they are taken to its' product page.

When the user is on the products' steps screen they have the option of searching for specific steps. The user selects the magnifying glass and can type in what they're searching for or select the displayed materials and hardwares. The results highlight which steps have their query.

On the product page overview the user can scrub through a timeline of the product. This tells the user what stage the product looks like at a certain step and the estimated time it will take to build it from the beginning.

Constraints & next steps

While working on this project I came into a few constraints and problems that I couldn't really address due to lack of programming knowledge. One of these being, ideally you would just point and shoot your camera at what you're building without laying out your materials and hardwares in a specific manner. The app would just know from any angle and then show the tutorial. But because of technological limitations and wanting to keep this as plausible as possible, I had to design around this.

Another problem that came up was whether or not the user's camera has a wide enough angle to capture the product. There are many factors when it comes to capturing something on camera such as how big the room and product are and what this would look like on smaller screens. I designed this app with an iPhone 6 screen size, so users with smaller screens might have trouble capturing their products.

If I had all the time and money in the world these would be the things I would do next: Do some research through user testing to see how effective my current solution is and to see if there is a better way of learning. I'd also think about how adding audio could enhance the experience. Lastly, I'd gamify or add a little sense of playfulness to the app to make it even more engaging and encourage the use of it. It could work as, the user's total time spent building their product could get uploaded to a worldwide scoreboard which they can share their status to social media accounts. Although this would only work if they've completed the verification process in each step instead of skipping it.

© 2016 Stephanie Hou
top