UX Design| Amber Wang & Theresa Lin| Wireframe, Mockups and Usability Test

Project: 3D Cake Lab

Instructor: Azure Qian

Documented by: Amber Wang and Theresa Lin

1. Wireframe Update

After the first draft version of wireframe using pencil and paper, this week, we started to design the second version of our wireframe using the software Adobe XD. We have made changes to our previous user flow. The latest version looks as follows:

2. Mockups

To align with the topic of cake, we decided to use blue and pink as our main and secondary colors. We chose our two colors from color-hex.com/color-palettes/. The hex values are #D6FCFF and #ff8080. We also used Piktochart to edit our interface background. We added the effect of colorful short lines because it resembles the toppings on a cake. We also made our main design interface as follows.


3. Usability Test

Some really important feedback were given through user testing especially on our first prototype. In our first prototype, the option to choose the cake flavor and frosting was at the beginning and each in a separate page. Some users were concerned that towards the end if they wanted to change the cake flavor or frosting, they’d have to go all the way back to the beginning and lose progress on other choices. On the design interface, some users also preferred to have already finished designs as options to drag and drop on the cake rather than design the entire cake from scratch. Users also pointed out that there was no payment page on our first prototype. We then incorporated a payment page and the delivery section on one. Overall users said our app was generally easy to understand and navigate.

We did another round of user testing on our second prototype. We have received many feedbacks and good suggestions for our 3D design interface. A common impression of this interface to users is that it is childish cartoonish. They could immediately be indicated that they were supposed to tap and dragged the basic 3D shapes to the interface. However, some have concern that they couldn’t properly position the shapes on the cake. And it would be better if there’s an auto-filling options, like cube holes on different places of the cake for user to put in the shapes they chose, which could give them a better proportion and position which is aesthetic. Some also suggests to change the interface to be more realistic, like a real cake. Users have the concern that a cartoonish interface may be misleading and they want to know how the real cake look like. They suggest that the 3D shapes on the tool bars should also look like realistic cake components. Another suggestion come from the users is to have a search bar on the top of the 3D shapes tool bar for users to type in the shapes they want. eg. flowers, dogs, etc.

This is a demo video of one usability test we conducted.

first half second half

Leave a Reply