CYNTIA CLAUDIA Mobile UX/UI, Design Portfolio | 2021
Contents [01] Portland Art Museum Virtual Tour App [02] Hue+ Pavilion [03] Shopee UX Redesign Contact cyntiacldp@gmail.com
Google UX Certification
Project UX / UI / VISUAL DESIGN
Experience arts from your home. The pandemic has changed and limited the way we interact with our physical world. This app will enable art lovers, artists, curious students, or city explorers in Portland or even around the world to access Portland Art Museum exhibitions virtually.
PROJECT DURATION
COURSE
DELIVERABLES
MY ROLE
TOOLS
06.01.21 - 09.30.21
Google UX Design
Virtual Tour App
UX Design
Pen & Paper
Professional Certification
Full Process Deck
UI Design
Figma
VIsuals
Adobe Photoshop
Course
Adobe Illustrator
Kickoff In this project, I took a user-centred design approach that proved to be effective and easy to understand in my design efforts as my first UX work. I found the qualitative research method to be appropriate and the most useful. It consists of foundational research, competitive analysis, user interviews, and persona creation. I started by asking some initial key questions:
‘What is the product and
‘Who are the
‘What do the primary
who is it for?’
primary users?’
users need the most?’
‘Who do I see as
‘What sources should I revie
the biggest competitors?’
to familiarise myself?’
‘What is the current
changes that are happening
because of the pandemic?’
w
These questions act as a starting point for me to understand the overall context and situation and allow me to proceed with the next step.
Challenge Due to the pandemic, we rely a lot on now with technology to interact with each other. Many museums or art galleries have moved their exhibitions and events virtually. However, it is still difficult to compete with a real visit when a virtual visit still lacks the immersion it requires to offer such an experience close to a real one.
Solution An app that allows users to experience art more closely from the comfort of their homes by reframing how arts are presented. Achieved through creating different modes of art walkthrough.
Research I interviewed a sample of four participants when conducting my foundational research. In the recruitment, I tried to have people different in gender and level of interest in art but, had visited an art gallery both in-person and or virtually.
When preparing the script, I kept the questions open enough for the participants to elaborate on their experience with art museums or galleries. In this phase, I intend to identify primary user groups and their pain points.
Identified pain points:
1
CONTENT
2
IMMERSIVENESS
3
ACCESSIBILITY
Users find no exclusive contents that differ from the offline visit.
Platforms for a virtual tour are not interactive enough or do not have immersive features to enhance the tour experience.
Confusing and hard to understand indicator and navigational elements.
‘I still prefer an in-person visit for a gallery. Because I want to enjoy the architecture too. Unless they’re able to offer me something exclusive on a virtual tour.’
‘Whenever I visit a gallery, I like it more if they have an exhibition I can interact with.’
‘I tried to use a virtual tour before, but somehow I found it quite confusing. I remember that I didn’t quite know where to click.’
4
IA
Some information are hard to find.
Competitive analysis I audited industry competitors to understand how the existing virtual tour compares. Several aspects that I reviewed are audience, first impression, user interaction, visual design, and lastly contents.
The majority of aspects between competitors were quite similar, however the main differences that I noticed were:
1. Bright/distracting interface vs minimalistic interface
2. Variety of immersive features
3. Easily accessible vs hardly accessible
4. Too wordy vs short and to the point descriptions
5. Coherent branding
Persona development
I conducted interviews with four people and created empathy maps to understand the users I’m designing for and their needs. Two primary user groups identified through research were working adults and university students who love to explore overseas art galleries for entertainment and learning.
These user groups confirmed initial assumptions about art gallery visitors, but research also revealed that location and interactive content are strong factors that determine whether users will be willing to book virtual tour activities. Other user problems such as confusing navigation tools, and the inability to fully experience the space also make the users hesitant to participate in a virtual tour.
NAME: Dio
AGE: 24
FAMILY: Lives alone
OCCUPATION: Post-graduate student, Jakarta - ID
NAME: Chinda
AGE: 30
FAMILY: Lives with a husband
OCCUPATION: Freelance illustrator, Queenstown - SG
NAME: Jerry
AGE: 20
FAMILY: Lives with his parents
OCCUPATION: Cultural & Media Studies student, Liverpool-UK
Dio is a 24-year-old postgraduate student who loves overseas city jaunt and taking pictures of his journey to social media. He enjoys visiting art galleries with amazing architecture. However, because of the pandemic, he could not travel abroad. To cure his wanderlust, he likes to go online for the newest exhibitions from his favourite art galleries. However, he finds the platform is difficult to navigate and confuses him because a lot of elements are hard to understand or read. Dio wants to experience the virtual tour more intuitively, simpler, and without losing the beauty of the space itself.
Chinda is an art enthusiast. She works as an illustrator for luxury brands packaging design and personalised wedding invitations. For her, an art gallery is one place where she can get inspiration for her works. She also likes to collect art souvenirs from galleries. Chinda is disappointed with the existing virtual tour as it feels boring and offers no unique value from the offline visit. Chinda specifically would like for there to be unique features or contents which are different from an offline visit.
Jerry is a full-time student who currently researching a certain topic about culture for his important assignments. He has a keen interest and is curious about different cultures around the world. Jerry sometimes encounters difficulty in the art gallery, when he wants to ask specific further questions about certain art history or the artist. Jerry wants easier access to more in-depth materials of the art or the artist that can help him with his study.
Preparing the journey I constructed user flows for each persona from start to finish as they might have different journeys. This helps me in understanding ways users can interact with the product, as well as allowing me to see navigation through user goals. The user flows will predict how my personas might carry out the tasks.
A. DIO - USER TASK: Use the app to choose a virtual tour and use the features
Action Screen Decision
B. CHINDA - USER TASK: Use the app to find an online workshop
C. JERRY - USER TASK: Use the app to participate in a live virtual tour and Q&A session
Portland Art Museum App in action (use case storyboards) NAME: Dio*
AGE: 24
FAMILY: Lives alone
OCCUPATION: Post-graduate student, Jakarta - ID
Big picture storyboard
GOALS H To treat his burnout and wanderlustP H To experience all the great online exhibitions which he may not be able to go to if they are not online.
FRUSTRATIONS H ‘I’m just confused which button I have to press to move around the virtual tour, sometimes it moves to a different direction I intended to.v H ‘I wish they can present the tour as if I was really inside the building.’
PROBLEM STATEMENT
Close-up storyboard
Dio is a traveller who needs an easier and more seamless way to navigate around the virtual tour because a difficult to perform navigation will hinder him to immerse and enjoying the virtual space.
*Dio’s journey will be the primary focus of this project as his experience represents the key path scenario of this app.
Paper wireframe
HOME SCREEN
EXHIBITIONS & EVENTS SCREEN
TOUR SELECTION SCREEN
VIRTUAL TOUR SCREEN
Digital wireframe & lo-fi prototype After sketching out some p&p wireframes and thinking through the preliminary flow, I reviewed what was necessary, unnecessary, and what areas needed improvement. I make sure the basic structure of each page and underlying UX, highlight the intended function of the product before moving on to the visuals.
Usability study & findings After creating the prototype from low fidelity wireframes, I prepared a script of a list of prompts for participants to perform. The first usability study mainly focuses on how the navigation feels for the users. The next step was to create the hi-fi prototype on which I asked 3 different participants to run through different scenarios in my prototype in hopes of garnering enough feedback to use for our next set of design iterations. By the end of it, participants were asked to fill out a SUS survey based on their trials. The overall findings are:
TIME ON TASK
INTUITIVE
USABILITY
On the membership payment page, users spent the longest when trying to complete the task. They found that the flow and the CAT button wording to be confusing.
Initially, the expendable button is created to maximise the virtual tour interface and to give minimal distractions, however, icons such as a fullscreen or volume icon is a familiar interaction for most users and should not be hidden.
Based on the SUS results, 3 users found the virtual tour page to be engaging and moderately increasing their interest in art. Furthermore, users want the audio function to be available on all the virtual tour contents.
Iterations Feedbacks from usability studies are used for design iterations and translated into intuitive solutions. Please refer to the process deck for the complete iteration explanations.
EVENT SELECTION PAGE
VIRTUAL TOUR PAGE
Too many colours
Most users don’t realise this important information at a first glance CTA button doesn’t appear clickable or inducing enough
Several functions are hidden and can’t be accessed directly
Essential functions are now easy to spot
Iterations Feedbacks from usability studies are used for design iterations and translated into intuitive solutions. Please refer to the process deck for the complete iteration explanations.
MEMBERSHIP PAGE
Confusing and wrong user flow for purchasing a membership
Confusing button placement and text hierarchy
Portland Art Museum App main features
1
Experience art within your hands.
Read & listen to the story. The app will offer different types of virtual tours. It will be presented in three formats. One of them is where the exhibition is designed in a storytelling approach- for example if an exhibition main interest is its story, philosophy or history.
Interactive sound is also added to this format to enhance immersion or even to hear direct commentary from the artists or the creator.
Portland Art Museum App main features
2
Experience art within your hands.
Meet the experts and fellow artists. Directly learn and interact with the experts and the community. Portland Virtual Tour App will provide live interaction that enables users to directly ask and receive instant response from the experts.
Portland Art Museum App main features
3
Explore art within your hands.
Walk inside the building. The third format is a similar experience to an in-person visit to the museum. Users can walk around and interact with each medium to reveal more information and interactive features. Users can also explore different floors or areas by a tap on a button.
As previous pain points mentioned before, some users experienced confusion in navigating around a similar 3D experience, thus the map overview button that can be enlarged, recognisable iconography, and intuitive gestures.
With this feature, users will still be able to enjoy the interior and architecture of the museum. It is also available in different themes.
Portland Art Museum App main features
4
Tour with or without a guide.
Your choice. The 3D space exploration offers recommendations for finding important piece of art as highlights. Once users tap on the button, it will automatically guide users to the exact spot of the highlighted art.
5
Immersive sound & interaction.
Enjoy it with ambience sounds or friends. Currently, there aren’t many competitors that utilise our hearing senses as part of an immersive experience. While in a real-life situation, we hear footsteps, people talking, or even music inside museums. For that reason, this app offers a tailored ambience sound for added realism.
Users can also share a link with other people to invite them into the virtual tour.
Portland Art Museum App main features
6
Knowledge for all.
Access all the museum’s resources. All important resources from the Portland Art Museum will be accessible for users to see even virtually. Users can also request support from the museum’s staff.
Accessibility considerations
To help people with low visual acuity or colour blindness, I’m using text labels, font-weight, underline text style as visual cues other than colours.
Inclusivity is important to reach user groups that will benefit the most from the virtual tour feature. Therefore, the design implements the ability to directly translate texts and change the app’s language. This consideration will accommodate people of all ages, abilities, especially non-English speaker users that would like to experience the Portland virtual tour in their language.
Takeways In this project, I learn to always put the user front and centre. This is the most important lesson I learn while doing the project. As this is my very first dive into the UX design world, I encountered several moments during the process where my prior knowledge or what I thought can be a solution is entirely different from what the user wants and needs. Therefore, user research and usability study are what every UX designer needs to invest their time to attentively and thoroughly with empathy.
Access the link below to see the prototype:
https://www.figma.com/proto/kua9v9IsHLgT3qfZZS8VBm/Cyntia-C---Portland-Virtual-Tour-App?node-id=473%3A4226&scaling=scale-down&pageid=473%3A3093&starting-point-node-id=473%3A4276
Hue+: London Winter Pavilion ARCHITECTURE / INSTALLATION / IoT
A collective consciousness. Hue+ is a conceptual architecture installation with IoT integration that uses collective consciousness and emotions to produce interactive and immersive space experiences at the heart of London, Hyde Park.
TIMELINE
CATEGORY
DELIVERABLES
MY ROLE
TOOLS
5 weeks
Switch international
design competition
Architecture installation
with IoT integration
Architecture Designer
3D modelling
VIsuals
Pen & Paper
AutoCAD
Sketchup
Vray Render
Adobe Photoshop
Overview BRIEF To create a multi-usage pavilion in the emblematic Hyde Park that can connect people, nature and architecture. The pavilion should celebrate and capture the essence of the winter landscape by hosting different activities that would invigorate the zone. The pavilion space should have an immersive architectural quality.
APPROACH I began by breaking down the design brief into important keywords. After that, I started to research what makes people excited about winter in London and form the core idea of winter activities. This allowed me to find connections between events and people’s behaviour. Site - Hyde Park aerial view
Tangible quality
Intangible quality
OUTCOME A pavilion that embraces the beauty of Hyde Park winter landscape through reflective, transparent, and light materials that blend with its surrounding. Enhanced with IoT that captures the emotions of people. It connects people all over London from social media to a real tangible place.
Proposed Plan
Context
People tend to not visit the park during winter because of the cold. Outdoor activities are limited. Also, Hyde Park landscape is quite barren during wintertime.
For Londoners, the sight of having a white Christmas is considered to be the most anticipated since London doesn’t always experience snowfall every year. Hence, snowfall will be an important feature to energize Hyde Park throughout the winter season.
People connect through social media. Pictures and videos are the preferred media to share memories. For example, during snowfall, social media and news outlets in London are full of photos of people celebrating and enjoying the snow around the city.
Inspiration
Design Objective
To design an installation that blends with its surroundings and features IoT integration that uses collective consciousness and emotions to produce interactive and immersive space experience at the heart of London, Hyde Park.
Concept
360° views of the
open plan
transparent & light
different levels of
lights as a dynamic feature
surrounding
with no dividers
materials
platforms
=
=
=
the main attraction during
blends with the
variety of
wintertime, the pavilion can
landscape
functionality
be a subtle landmark amongst the barren landscape
THE INSTALLATION CHANGES ITS COLOUR & PROJECTS PATTERNS BASED ON WHAT PEOPLE POST AND TYPE ON SOCIAL MEDIA
Design - IoT
Interactive urban experience: How does it work?
A conceptual approach.
Pictures uploaded I’ll upload this to instagram!
Open source textual & visual analysis technology
... Recognises the visual, selected location, and hashtag
A program that sources the data
#snowing #snow #whitechristmas #londonxmas #chilly #london #winterwonderland #hydepark #christmas #travel #winterwonderlandlondon #uk #photography #winter #instagood #hydeparkwinterwonderland #england #instalike #love #lights #unitedkingdom #happy #instagram #fun #photooftheday #photo #night #funfair #picoftheday #friends #travelgram #travelphotography #art #visitlondon #life
Data get translated into different colours & patterns based on the most popular hashtag or visual category which is then sent to the automatic wifi-enabled projector to cast onto the surface.
Colour & pattern intesity
The result is the changing colours and patterns which is reflected around the pavilion to represent the emotions and trends of Hyde Park visitors. Hence, the Pavilion acts as a collective consciousness of the city of London.
The more people gather around the pavilion, the more input it can incorporate into its data analytics
Design - details
Interactive
Projector
Portable Heater
Shopee UX Redesign UX / UI / VISUAL DESIGN
Redesigning Shopee app wishlist page & affiliate experience.
PROJECT DURATION
DELIVERABLES
MY ROLE
TOOLS
11.21.21 -12.08.21
Ecommerce Platform
UX Design
Pen & Paper
UI Design
Figma
VIsuals
Adobe Photoshop
The challenge Shopee is the leading shopping platform in South East Asia, especially in Indonesia with a 37% market share and 126 million monthly traffic. The app also has a massive influence on social media, such as Instagram. Its popularity through influencers in Instagram affects how the consumers access and navigate the app. However, it has an inefficient user flow and offers no customised organisation on the wishlist page.
Solution An interface that visually organises the data, and presents options to personalise the user experience, making a streamlined experience and better engagement.
Why the wishlist page?
Many people bought items on Shopee through their findings from Instagram influencers or reels. These Shopee affiliate creators and influencers go to Instagram to promote items from Shopee stores. They utilise Instagram stories and reels while attaching direct links to the item page on the app or create a mini web where they’ll put all the list of links.
With many similar items yet a variety of price ranges circulated in ecommerce platforms, people would likely make a purchase based on other people recommendations once they already tested or used the items.
Many Shopee users save their recommendations by adding the items to the cart without finalising their payment. Once they finally want to buy a certain item, they will open the cart and scroll through to find it. It’s a behaviour where they tend to do because they feel the wishlist feature is not greatly introduced, so they find themselves not using it. Moreover, on the Shopee cart page, users are not able to search from the lists.
?
Current user flow A
Bought & recommended items are grouped on highlights to browse
Users need to tap through all the stories to find the items they’re looking for
Users tap on the item’s link Influencers often regram their followers purchase of the same item
Added to the wishlist
Users tap on their profile and access the wishlist page
If users want to find an item they can filter by category or search by its name
A product page on the Shopee app opened
Users tend to just add products to the cart for future purchase
Cart page is used as users’ temporary wishlist section
Without a limit in quantity, the cart can hold hundreds of products. Users then have to scroll through one by one to find the one they want to buy.
Shopee affiliates promote items on Reels and put a description to click on their profile to get the item’s link
Users tap on the link
Users are directed to a mini web where there’s a list of all the promoted items, users have to scroll through hundreds of lists
B
C
Redesigning process Problem summary
TOO MANY TAPS
ENDLESS CART
UNORGANISED & OVERWHELMING
The user flow of finding the link of a certain item to the wishlist page requires too many taps. Especially when it comes to other apps, the user flow is not streamlined.
Adding items that users want to buy in the future to the cart creates an endless list of items inside it. Plus there’s no limit to how many products users can add. Users then have to scroll an endless list of items.
All items getting clumped and mixed on the wishlist page plus the inefficient filtering categories create unorganised information that can make users feel overwhelmed while browsing the list.
Redesigning process User flow
Redesigning process Wireframes
Redesigning process Lo-fi screen flow
Usability testing THINK ALOUD COGNITIVE WALKTHROUGH Task 1: Ask user to access an affiliate profile from Instagram.
Task2: Ask user to favourite/un-favourite a product from affiliate recommendation..
Task 3: Ask user to choose a category from an exisiting wishlist.
Task 4: Ask user to create a new wishlist category.
Task 5: Ask user to sort products on the wishlist folder based on the discount state.
Task 6: Ask user to delete multiple products from a wishlist folder.
Task 7: Ask user to access the wishlist page from home.
INSIGHTS r Users thought that categorizing the wishlist page, make the experience feel more organised even though they will need time to get used to itU r All users thought assigning an item to a wishlist category were usable and easy to learnU r Some users thought, sometimes they just want to view all their saved items as it is on the wishlist page based on recency similar to how the cart is updatedU r Some users thought that the wishlist icon on the homepage was not recognisable because the other UI was already too loudU r All users feel positive toward the dedicated affiliate profile feature.
Final iteration Interface
Before
After
Insight from usability study reveals that some Shopee users prefer to see the entire list of wishlists based on recency. The left prototype focuses only on category folders and discounted products. For that reason, the new iteration gives freedom for all users to preview their list on folders, discounted items, or to see all the items.
Before
After
A new blocker appeared during the left prototype test when I integrate the wishlist icon into the homepage. Users didn’t quickly realise its position on the bottom navigation bar. The reason was that they think, Shopee homepage was way too loud and crowded to notice it. So, I changed the colour and eliminate some banners that overcrowded the entire interface.
Final design AFFILIATE PROFILE
DIRECT WISHLIST
Access reccomendations by one tap.
Add products to your own category directly.
Final design CHOOSE A CATEGORY OR VIEW ALL
QUICK SEARCH
A more organised experience.
Search items without the hassle and sort them out.
Takeaway & impact From this project, I learn to realise that the users' behaviour and experiences of a product with a huge number of users and are used almost daily are heavily affected by their habit. They also tend to stick to a certain path of navigation. With my early hypothesis about the underused wishlist feature, the usability study did challenge my perspective about it. Hence, during the process, I also contemplated whether the problems can be solved simply by adding a search feature on the cart page. However, I want to add more value to this app.
What I meant by this value is from the business perspective. With many Shopee affiliates having to rely on the microsite to sort and organise their recommendations, sometimes they mix other products from competitors. The impact of Shopee’s business value also can be expanded by securing that each traffic will come to the app and from that specific affiliate.
See the prototype