CHENGDU LAID-BACK MAP
A map app that enables tourists to explore the authentic Chengdu laid-back culture, tailoring a tour to users' interests and needs.
Opportunity
I synthesized the insights from my primary and secondary research. I discovered a demand for my product since users often feel frustrated once they engage in online disputes. On the other hand, a common thread between my user research was that ignoring and then giving up the chance to engage in online arguments is one way to de-escalate the negative impact brought by online disputes. With this knowledge in mind, I formed an HMW statement so I can translate the insights into an actionable design solution:
Brainstorming
We started by researching our potential customers, possible problems existing, and possible HMW statements. We contributed our research findings to
Chengdu Laid-back Map is a map application that helps tourists go around the city of Chengdu with ease, immersing them in a cultural yet fun traveling environment.
For this project, our goal was to create a high-fidelity prototype for Chengdu Laid-back Map through rapid collaborative design operations.
Personas
I developed two personas to match my target audience archetype. To give a short description of them, Steve is a high school student tired of online arguments, and Valen is a mom who wishes to give her child a guide to interact with others in online forums. These two personas helped me empathize with my target audiences and gave me directions when making design decisions.
Tourism in Chengdu
Inspired by the recent social media attraction around a Chinese city called Chengdu. After the first round of secondary research, we knew that this city is most famous for its slow-paced lifestyle, delicious Szechuan foods, rich Chinese culture, and pandas. Chengdu is becoming a city with high tourism potential. We then started ideating what kind of experience we can create for tourists ao they can explore Chengdu with ease.
When creating the primary mind map for our initial ideation, we decided to focus on the keyword "Slow-paced" as it keeps reappearing during the secondary research phase:
.png)
Provide an inclusive and easygoing space for users to get educated and change their old behaviors
.png)
Implement the use of nudges over "warnings" before users posting potential hateful message
Give users full autonomy to ensure a natural behavior-changing process and protect their freedom of speech
Features
Since the stage before posting any online messages is typing in the textbox, I decided to implement nudges at that stage. With this premise in mind, I came up with a list of main features to implement into my app. These features serve the purpose of slowing down the message sending process and eventually cause users to rethink their choice and give up sending the potentially harmful message.
1. A push-notification sender whenever the app detects harmful message;
2. A keyboard that suggests better word choice to replace harmful words;
3. A terms of service reminder;
4. A quick action button to delete harmful words once it got detected;
5. A notification appears whenever users ignore the features above and send a potentially harmful message.
I also came up with two ancillary features to complete the "hook model" framework to make my app an effective habit-forming product:
1. A growth chart that shows how well the user is performing in online forums;
2. A word of the day push notification to immerse the users in a mindful and peaceful environment.
UI Sketches
With my main and ancillary features settled, I started to develop concept UI sketches for each feature. These concept sketches helped me figure out the low-fidelity wireframes for my app, and they will be helpful when I conduct concept testing later on.
01. Concept Ideation
Wireframes
I ran a concept testing session with my colleague and instructors to figure out if the user flow and the functionality of my app were clear. The result is that the onboarding flow is clear and well constructed, but the testers suggested that I should implement more brand identity into my app, like a logo, even if it's a keyboard app. On the one hand, it can be a constant reminder for my users to use mild language when the app is on. On the other hand, it could also enhance the feedback stage whenever the users type a harmful message or follow the instructions to make their text better.
Onboarding Experience
The first-time user experience, particularly the onboarding experience, plays a crucial role in introducing the product usage and helping users set up. Without this experience, users would have minimum knowledge regarding how my app function.
Style Guide
I created a fresh and endearing interface and I want to establish a positive connotation throughout. When designing the style guide, I used green and light grey as the primary color palette. I used Quicksand as the primary font family for typography and Roboto as the secondary font family.
Final UI Design
Taking what I learned from the wireframe usability testing session, I made some changes to the final design. Changes to the overall user flow included adding an extra step to let users set up and combining some main features together to establish a more streamlined flow. You can also view this prototype on Figma.
What I Learned
This project strengthened my skill in designing micro-interactions, FTUE, and developing an experience that aims to change users' behavior. On the other hand, it also improved my concept testing, usability testing, and wireframing skills. All these skills would help me become a more professional UX designer. I am also proud that this project addresses a real issue, and according to my instructor, the solution I provided is relatively strong.
My design process follows a double-diamond design process. From initial ideation and conducting user research (diverging) to establishing a problem statement (converging); from setting my design visions (diverging) to designing the experience and the UI for Nudge (converging). I was able to walk through a complete and past-paced double-diamond design format and eventually produce a high-fidelity UI design along with a demo video.
Let's work on something exciting together!
Framework
Then with the "Hook Model" framework in mind, I ideated an initial habit-forming pattern for my app that will increase its effectiveness and help my users cultivate a behavioral change in the long run.
.png)
Key Insights
I started by conducting user research to determine if there was any demand for such a service. I made a questionnaire to help me validate the user's needs and gather the initial user insights regarding online disputes and online hate. How often does one encounter online arguments? Where do online arguments take place? What are the users' motivations, goals, and expected outcomes?
To find the answers to these questions, I established a survey and sent it to 15 of my provisional target users. Through the survey results, I observed the pattern regarding the negative factors that push people to engage in online disputes that usually end with high user dissatisfaction.
Main Pain Points
Using the survey results, I validated the fundamental demand of my project since engaging in online disputes will frequently bring adverse emotional outcomes, and more than half of the interviewees mentioned that they wish to avoid such consequences. I also learned that the typical approach for them to deal with online disputes is either ignoring the other sides' opinions or not engaging in the argument in the first place.
Welcome to Chengdu
With our onboarding experience, users can have a comprehensive understanding of Chengdu culture and our service content
Itineraries & Attractions
Users can choose from three themed trips. For each trip, we provide them with essential attractions suggestions and navigation plans
Highlights & Reviews
We provide our users with the latest information they need to know about one attraction, as well as its local reviews
Collectibles
Users can unlock unique collectibles by visiting various attractions. Each collectible has a specific connection with its corresponded attraction
A map app that provides tourists with essential attraction suggestions, optimal transportation plans, helpful local reviews, and most importantly, a memorable touring experience in Chengdu.
02. User Research
03. Synthesis
"How might we improve each cyber citizen's online satisfaction by guiding them to engage in fewer online arguments?"
04. Design Vision
05. Early Development
06. Final Design
07. Evaluation
Product Features
The Product
Project Overview
Where is Chengdu? Why Chengdu?
Do you like pandas? If your answer is yes, then Chengdu is a place for you. As the largest giant panda protection and breeding center in the world, almost all the giant pandas were born here. This southwestern Chinese city recently gained its attraction as people started discovering its rich yet unique culture. From its delicious culinary art to its unique teahouse culture, besides giant pandas, there are many other things to see in this city.
Moreover, Chengdu is most famous for its laid-back lifestyle, when you walk on the streets, you will be amazed by Chengdu's easygoing and relaxing atmosphere. Needless to say, Chengdu has a huge tourism potential and we want to use this opportunity to motivate tourists to visit Chengdu and to explore its rich culture.
Background Information
Achievement
Users will be able to see all the attractions they've been to and craft their personalized map as a memorable souvenir
MY ROLE
SKILLS
TOOLS
TIMELINE
February - March 2022
4 weeks
User Research
UI Design
UX Design
Prototyping
Collaboration
Lead UX Designer
User Researcher
Prototype Developer
Figma
Adobe Illustrator
Zoom
Mural
Slack