OpenSnap

A brand new product of OpenRice, a photo dining guide without typing any word, had launched 1 and half years ago. OpenRice is a food and restaurant guide website which currently operates in Hong Kong, Macau, China, Singapore, Indonesia, the Philippines and Thailand, Taiwan, India.

It is observed that long reviews are not common in overseas and teenagers, which has few submission. Therefore OpenSnap is packaged as a social, everyone is allowed contributing / uploading dish photos with simple steps.

I mainly response OpenSnap this product (all platforms) for these 2 years. From wireframing, layout design to collaborating with the development team and user testing, I’m getting familiar with collaborating with other departments and providing the best solution according to the data from Google Analytics provided by the product manager.

Moodboard

A collaborative collection of images to demonstrate the product’s visual style guide. Determining the art direction according to the behavior and wish of persona. Few different directions had been proposed and finally we picked stylish, trendy, interactive as our design principles. Did some research and took reference from competitors.

Journey mapping

A comic strip that illustrates the series of actions that consumers need to take while using the product. Translates functionalities into real-life situations. It would be more easy for us to create empathy with the consumer while having a first look at the product scope.

Persona

Female would be the key target segment, but some male would have taking dishes when having meals.
There are 3 main personas has been developed.

Sitemap and wireframing

Briefly draft the key features and requirements from product team into the wireframe and demonstrate how is the navigation. Transition / visual reference will be attached, it would be more ready to reveal the steps and sync the expectation on the final product, also discuss the difficulty on the implement with developers.

For capturing photos, we had a discussion on should we show the capture first or album first by default, then we did a simple interview internally about their behavior. And found that they seldom to take 1 photo with all dishes, while most of them will take multiple photos 1 by 1 due to the dishes serve time are different. Therefore, we worked for multiple uploads after MVP.

 

 30%  will keep the camera on until the last dishes
 70%  will use the default camera to take and upload to OpenSnap
Within those
70% interviewees
 Most of them will use the stickers or filter to decorate the photos due to the dark environment in the restaurant
 Interviewees like the stickers with local terms

 

Finally, we still keep capture screen first, but there is another option to select photos from camera roll, once user upload photos in 3 hours at the same restaurant, photos will be grouped into same feed.

UI design

Create layout by adopting the corporate color, font family and corporate UI style based on the wireframe.
Competitive research has been done before UI design process.

Usability test

Checking on the UI / UX on the product before working on the user test. And we conducted 10 interviewees with usability testing with a consultancy, I was an observer and provide supplement questions during the session. With the feedback from users, we fine-tuned some UI or ratio in the coming phase, e.g. some user preferred 1:1, some preferred 4:3 scale photos, they also wish looked for restaurant reviews.

Pattern library

It will be done after a deployment, in order to keep the UI consistent, a UI guideline has been set and shared with the design team and developers.

 

Duration 8 months for the first launch
Role
  • Brand identity (Collaborate with marketing designer
  • Journey mapping
  • Persona
  • User research (Collaborate with product manager)
  • Wireframe (Collaborate with design manager)
  • User interface design (Collaborate with UI designer)
  • Usability test (as an observer)
Year 2014
Platform Responsive website, website, iOS, Android
Final version

Brand Identity, UX, UI, Website, App: To use food photo for searching restaurant, dinning guide in Hong Kong

Category: UX