PROJECT OVERVIEW
Challenge
La Juiceria is a brand in Malaysia that primarily selling juice cleanse. They have a current website, but it is unorganized, There are too many of information on their website. It caused to takes some time to reach one site to another.
La Juiceria expect to accomplish the brand's new online experience for its customer. Hypothetically, they are launching new product line—smoothies. Instead of creating a website for them, I created a microsite about three of their smoothies. The microsite allows me to design separate objectives and specific information from the brand's main website.
Project Scope
-
Responsive Website
-
Branding
-
Prototype
-
Usability Testing
-
User Experience Improvement
Role
-
Individual project for interactive media design class:
-
UX UI Designer
-
Developer
-
User Testing
Objective
Tools
-
Design a microsite specifically for the new product to introduce it to the audience
-
A better experience in product launching through its new and closer look of the product.
-
Adobe XD
-
Figma
-
Illustrator
-
Photoshop
-
Visual Code: HTML and CSS
Team
Individual with feedback from instructor and peers
User Journey Map
A user journey map is one of the important strategy in creating website. I decided to implement a user journey map get the ideas of users' journeys and emotions when browsing the related website
Created with Figma
From the users' journey map, I was able to comprehend what should be included and beneficial for my client in communicating their new products to their users. Since it is a microsite introducing new products, I wanted to create an approachable experience for the target users by emphasizing the product while keeping it simple.
Wireframe
Branding
While I was creating the wireframe, I started to have a visual of what my design should look like. Hence, I started to create a mood board to gather some inspirations. I tried to add common design patterns, colors, and aesthetic themes that would attract target users.
Mood Board
UI Kit
Mid-Fidelity Prototype
After I finished my first prototype, I reached out to my instructor and peers for feedback and advice. I found a mid-fidelity prototype is helpful for me to get an initial issue in information architecture and flows. It also allows me to make changes before moving on to the next step, which is the coding part.
Created with Adobe XD
Programming
Developing a responsive website, especially the programming part, allows me to understand the role of a front-end developer and a designer. These include the perspective of a developer and designer. For example, things could work very well together, or things could be easy for a designer but challenging for a developer.
For the animation part, I learned to use SVG to code for the animation I wanted. One of the smoothies page, I decided to use carousel effect to see how it turns out.
Note: Codes are under aboutus.html, berry.html, green.html, index.html, orange.html, and project3.css
Usability Testing
Process
Planning
Conduct
Findings
Conclusion
-
Reflection on the process
-
Observe users
-
Identify problems
-
Interview users
-
Analyze results
-
Solutions or recommendations
-
Updates on site
-
Identify the objectives
-
Recruit users
-
Prepare script
-
Prepare usability testing forms
Planning
Objectives:
-
To uncover the usability problems and participants' satisfaction
-
Gain deeper understanding users' path and their frustrations when users are interacting with the website.
-
To fix the problems and improve for a better user experience.
Recruit users
-
4 participants
-
Are interested in smoothies
Script
Hi, thank you so much for your time and helping me with this assignment. As you know, my name is Xin May. Please understand that I am not testing YOU or your abilities. All I need you to do is sit back and relax and access this website and then fill up a quick survey sheet.
Please use *insert* browser or device (if there is another users using the same device or browser)
*After the test*
The purpose of this study is for usability testing. Usually, when a product designer or developer create or redesign a website or an app, usability testing comes in hand to allow them to discover any dissatisfaction, expectation, problems or areas that needs to be improve on their product. Thank you again for helping me with this.
Usability Testing Forms
For user
For admin
Findings
Conclusion and reflection
The results from the usability testing are effective in helping me to uncover the details, patterns, and frustrations when users are interacting with the website. That allows me to fix the problems and improve for a better user experience.
It also helped me to accomplished my client's goals in the beginning of design process. Through this interactive design, my client are able to communication with their consumers, provide users a close-ups look of their new launching product.
If I had more time, I would dive deeper in building more beneficial features for my client and users. This would distinguish their unique selling proposition and more advantageous than competitors.
Final Product:
