Michael's Imagination

A web responsive portal to elevate productivity by eliminating the physical copy transit time and providing centralised storage for approval records.

Project overview

Bank internal Change Requests UAT acceptance letters are handled with paper printouts and passed by internal mail to each approver to sign. Bank started an initiative to achieve paperless approval whilst improving productivity. This electronic approval system is a central hub for creators, approvers and observers to organise their approval cases digitally with a To-do list • Calendar • Finder hybrid navigation, an effortless single flow case creation and Autopilot continuous cases delivery for the approval process.

My Contributions

I interviewed case creators, approvers and observers to gather and validate their pain points. Most of the pain points are complex and intertwined with other pain points, I need to interview some of them to know their existing whole journey and align all related users to a reduced complexity journey.

After mapping out the new user journey and drafting a wireframe prototype, I started user testing by hosting small focus groups. Iterating a couple rounds of workshops actively listening to their feedback and clarifying their doubts, workshops gave me a lot of insights not only to improve the journey but also the system UX logic.

The final deliverable turned visions into reality, at this stage I prioritise different departments onboarding to this new platform and demonstrated all these new powerful functions to reduce their effort in approval process via Teams meetings.

Draft

Initial wireframe/ prototype

⌃ Home page dashboard

⌃ Case approval screen

⌃ Approved/ Rejected case viewing

⌃ Approval documents directory

⌃ Case creation page

Final stage deliverables

Hi-Fi Prototype

⌃ Home page / Start your AUTOPILOT auto case delivery process which you don't need to select a case from the navigation

⌃ Approve or Reject / You may also click "Skip this" to skip this case from current queue

⌃ Case details page / You may view other approvers' comments

⌃ Approval documents directory

⌃ Case creation page

Components

Iteration

Support site

support website provides how-to videos and step guides.

Adobe XD Prototype

If you're curious about under the bonnet screen flows, go ahead and click the XD link:

Project overview

Dedicated credit card reward app for you and your friends to achieve rewards together.

The Bank credit card department would like to start a loyalty program which able to grow customer loyalty by providing high quality rewards and services.

Weward is a credit card loyalty program infused with gamification and social media. Your rewards are now in a journey of different Chapters, each Chapter contains solo or group Challenges to win rewards.

My Contributions

This project started as an existing service revamp project. I am working with landing department colleagues to gather and review current customers’ spending patterns and rewards earnings. We discovered most customers would spend more than their average spending to achieve reward requirements.

I was inspired by the Bank tagline “ Together, we thrive” and curated spending challenges which required 2 or more participants to achieve the challenge across different spending categories.

As this project is in the POC stage, the new user journey I drafted only focuses on challenge gameplay and its rewards. I started user testing by inviting a few colleagues and giving them a quest card and subsequence quest cards when they achieved the goal. The gameplay feedback was positive as this is an opportunity to create great memories with their friends.

After the user testing, this project was handed over to the vendor to handle the entire app development. Gamification of the spending challenge concept has been adopted in the final app design. However, due to system limitations, the concept of 2 or more people joining in a challenge hasn’t been implemented.

⌃ Challenge tiers and rewards journey

⌃ Co-challenge gameplay journey

LOGIC

Game mechanics

Reward goes beyond traditional credit card reward apps by adding collaboration and gamification elements to its challenges which encourage users to team up and spend wisely whilst having fun with friends.

PROTOTYPE #1

Participants will receive a challenge tailored to their level with 3 elements: spending category, spending target & timeframe and team-up requirement.

TESTING #1

Some participants were less engaged which affected the overall gameplay.

REFINE & PROTOTYPE #2

The system identifies halted collaborative challenges and allows remaining participants to change to solo challenge (with updated target and timeframe.) By adding a quit challenge mechanism to avoid conflicts and stress on both the challenge initiator and joiner.

TESTING #2

Participants were able to swap to other friends’ challenges when they noticed the progress wasn’t as they expected which greatly enhanced the engagement. However, there’s a risk that participants might focus more on earning points and rewards and deviate from their usual spending pattern.

REFINE & PROTOTYPE #3

Adding challenges target ceiling restrictions and reminders on each participant and allow participants to share transaction history within the group.

TESTING #3

Participants appreciated the sense of community to achieve rewards together as well as promoting healthy credit card spending habits through challenges.

COMPONENTS

Quest cards & Rewards

The quest card mission is tailored to the customer’s spending pattern and the rewards also match their spending categories, such as a foodie customer’s rewards will be curated on food and drinks categories. When different spending category customers start a mission, the system also will expand the rewards categories to encourage them to use their credit card on different category merchants.

TESTING #1

Participants praised the co-challenge gameplay is innovative and it would be better if there’s an in-app communication to notify their co-challenger to achieve the target before the deadline.

REFINE #1

Proposed to add emoji based communicator within the ring progress indicator.

PRODUCTION

Official launch

Rewards and Challenges will proposed to customers based on their spending patterns and habits.

My contribution

Since this project is a continuation of the all-in-one account opening flow, I developed an additional flow for opening an investment sub-account. This includes the account selection UI and an investment knowledge check section.

New customer flow

⌃ Capture ID cars details

⌃ For existing customers who already has an account with the bank

⌃ Face recognition

⌃ Basic info and account selection

⌃ Application details

⌃ Upload address proof

⌃ Investment knowledge check

⌃ Signature capture

2020 brings work from home to our daily life.

We've experienced a revolutionary change to our work experience in just a few months from your office desk to your home or anywhere.

Main goal is to encourage colleagues to embrace more distanced office working space by using WiFi connection and using VPN tunnel to connect to company's internal network.

Work outside of your desk

A series of comics demo the effortlessness to connect to bank intranet services no matter where you are.

Connecting people

Inspired by a poster of 2010 13th Festival de Cine Málaga and people are connected by WiFi no matter where you are.

"Bifrost" to intranet

I reckon you know Marvel's Ascard Bifrost rainbow bridge, don't you? VPN works similarly like this.

Internal procurement process revamp

In order to let more colleagues enjoy the work everywhere service, a poster was created to promo the streamlined application process.

Dublin is a great weekend getaway destination and is known for its landscape as much as its culture. One of my to-do items whilst I was in Dublin was to listen to busker live on Grafton Street. And I met Sean, the Dublin City Today Youtube channel owner, and we had a chat about these buskers are class!

That made me think if there're intros, logos & hoodies promoting the DCT Youtube, it would have been the icing on the cake.

Logos

DCT logos always want to reflect the splendid performance diversities of buskers, guitarists, pianists, vocalists and more in Ireland.

Banner

Community Posts

Merchandises

An essentially enriched credit card service. Virtual card + Insight + Saving pot + Content driven rewards

From cards to a card.

Wouldn’t it be nice if managing your credit card wasn’t a big, stressful, complicated thing?

Now your online shopping can be more secure through one time disposable or recurrent virtual card. No more leaking credit card info online.

Travel abroad always worry fee and rate? Now you can pre-paid your foreign currency with no fee* and location auto switching let you spend like a local, simple and hassle free.

It’s the only card you need to carry. Plus, you can control every credit card functions right on your smartphone, like disable contactless payment and lock your card when you left your card at the pub.

Full speed ahead

With intelligent analysis, you get reminders that tell you how to get most of the rebate and reward offers that deeply integrated with your spending pattern(behaviour adaptive).

Spending turbocharged.

Turbocharge automatically detects spending spike* of each category and covers part of those unexpected spending.

You can top up by saving account debit or round up spare changes.

* Over category average spending

Private shopping for your rewards.

We welcome you to an infinite rewards story with different Chapters tailor to you. You’ll unveil different chapters, when you’ve accumulated enough reward points.

We link up activities to experience as a package, so you don’t have to. Plus, we offer generous credit card spending offer whilst you enjoy the experience. Brilliant.

With content driven reward offers, we provide a profound experience in one very smart place.

Gamify rewards with friends.

Dedicated to you and your friends to spend happily together. You'll receive a variety of quest challenges to reach your better spending pattern with your friends.

This carnival mission has never wavered. We are here to bring new ideas to our world. It’s what inspires the amazing services that will reach people around the globe. It’s what drives us to relentlessly push the boundaries of innovation and design. And it’s why we continuously strive to involve whilst those ideas spark.

Like a carnival

This event encourage everyone  to walk around to participate different sessions and workshops. So, everyone has different paths to create their own fintech projects.

Carnival Day 1

The first day of the carnival is identifying barriers to implementing closed-loop solutions and crafting projects from different sessions. In many cases, we have deepened our understanding within our ideation process.

Storytime. Celebrate Humanity. Know your customers and step into their shoes. This is the first step to make your solution become the solution.

Create Wonderful. Follow your dream make it come true with Lean canvas. This canvas bridging imagination and reality.

Carnival Day 2

The second day of the carnival continues to work with experience design and prototyping to forge new paths, build unique solutions, and inspire others to continue to perfect their ideas.

T-shirt design

1. Revolutionary service deliver system

2. Astonishing people tracking and identification

3. Delightful tellers and customers connection

Services are curated by people not digital bits.

Therefore we need a human touch on each service that is created by people to tell customers what they need to prepare and aware of. All services are pre-defined by people. Therefore customers can have a right service at the right place and right moment when they want to.

A cognitive system act as a behaviour analyst.

Time slot that allocated to customers are constantly updated. It’ll shorten or lengthen based on the cognitive model of previous services log and initial data from observations.

Everyone has beautifully shaped. So we know who’s who.

Branches are rigged with cameras to track customers whereabouts. System will identify them at the check-in kiosk and keep updating their location within the branch to staff and teller.

An ecosystem everything has a linkage with each other.

Provide details of what customer wants and what has been done before.

In the near future, when we visit a bank branch, giant screens may be is the only thing you will see.

Project overview

Developing a portal for bank staff to learn more about the fintech solutions that are tailored to their job nature by categorising into business nature, latest and deployed solutions.

My Contributions

Creating a portal which introduces solutions to user based on their tasks’ nature and their needs is my main vision for this project.

I interviewed a few colleagues who are using deployed solutions and validated the concept of which solutions should be presented as a business nature tool instead of its technology advancement.

Based on the research findings, I crafted a prototype with HTML & CSS which navigates the portal with a business nature or beneficial to certain tasks then grouped by the latest acquired and deployed solutions showcases.

COMPONENTS

Tagging

Tags are useful when you try to explore further based on current viewing and a solution can be tagged multiple domains. The navigation of this portal empowers us to find suitable solutions more effectively and encourages us to find solutions beyond the origin domain.

COMPONENTS

Menu bar

As the main navigation, it should adapt to the current page and provide useful links and information.

⌃ Menu bar items are the quick jump links to different home page sections.

⌃ Solution direct link

⌃ Year sections links

Vlog platform is our business, but collaborative vlogging is the beating heart of HELIOS.

Helios is a collaborative vlogging app for a group of people to create a vlog in an event. It provides content diversity suggestions to allocate every vloggers to shoot different angles. After the event, viewers can switch between different vloggers’ angle whilst watching the vlog and get a sense of time perception by a timestamp showing the clip shot time for an immersive viewing experience.

FYP report 

Annual Show - 1 June, 2017 - 15 July, 2017

V922, School of Design Jockey Club Innovation Tower The Hong Kong Polytechnic University Hong Kong

FYP Final Report:https://drive.google.com/file/d/1osexYtJx4vFSkADwsyuO9OSjYAz-XHmV/view?usp=sharing

Week 12-14 Demo day production period

Prototype: https://xd.adobe.com/view/ba3e15c9-9c75-4025-a172-584b269e94e2/

1. A0 Poster

2. Table top (Left)

3. Table top (Right)

Week11 (WeWork)

Demoday materials list

A0 poster similar to design 2.0

Lay-flat tabletop A1 (Left) - Terms explanations & demo video cut out

Lay-flat tabletop A2 (Right) - iPad mini Adobe XD prototype & miniature showing Suggestion mechanism.

Week 10 - Demo Design 2.0

Feedback from Jeffery 

1. Reduce advertise “AI” without any prototype to demo 2. Narratives can let visitors try to switching angle 3. Research findings documents

Week 9 - Design 2.0 (Beta)

Link: https://drive.google.com/file/d/0B2JVS13y_b-UQklRbXp4RV9PUG8/view?usp=sharing

Week 8 - Logic tweak

1. Publish page >  preview vlog before publish  2. Edit during vlogging  (trim) 3. Narratives shows published vlogger first ( Denied, vlog watching will be more difficult. Watching time become a factor to vlog content.)

User Review

1. Vlogging suggestion’s radar chart create confusion whilst text and radar chart are overlaying.

Suggestion modify to use natural language.

2. Hastag bubble add a badge to show current or finished clip

Week 7  - InnerRing User test 2

GOAL: Match user mental model of existing app.

1. Radar chart throughout vlogging and viewing is consistent feeling 2. Pop notification wording. 3. Ongoing vlog add LIVE badge 4. Viewing vlog angle changing need trying to understand.

Fix - Background blur index increased 

Week 6  - InnerRing User test

 Inner ring 1a user testing found out critical state of experience continuum flaws.

Inner ring 1b and 1c postponed to next week.

1. Vlog page centre “you” icon

2. Re enter back to vlog group with vlog page notification

3. Vlogger himself/herself interests bubble change to white colour 4.  View other captured/capturing footage by 3D Touch bubble

5. Viewing radar chart centre bubble colour scheme same as interests 

Week 5 Materials

FEEDBACK:  Use scenarios to let audience know the special of this app.

User Journey shows user situation and system reaction. The Vlogging is a loop to emphasis vloggers can do multiple times in one vlog.

Unify vlogging bottom Point of interest and suggestions interface. suggestions highlighted and background changed to draw user attention.

Notification of ongoing vlog and unpublished vlog.

Week 4 App logic

Add people (Hints to tell user nearby vloggers)

Suggestion section layout as typical messaging chat layout

End vlog can set private and public vlog

Search vlog as entry

Week 3 Pitch add  scenario to guid audience. Wireframe  - User step to vlog and input parameters.

Week 2 Question > Lead audience to a scenario.  1. Steps 2. Ways to achieve 3. Guide them to a solution

Week1

An environmental awareness tangible device.

Giving and taking is a serious problem our world is facing. Humans realise something is wrong but our impacts to the earth are too small which makes us feel what we did are not significant. Therefore the concept of Butterfly Effect intended to address people confusion.

The original idea is a linear system will change each incident happen priority to simulate the dynamics of earth balancing our action. But after few weeks of tutorials, the system should pick up humans as a parameter as they participate in this earth balancing system the most. Therefore, Butterfly Effect model lets visitors change different values of the system to check out the responses from the system. During the brainstorming period is not easy to generate a possible to build a tangible device and compromising the concept expected outcome. Let people understand something require imagination and fate trusting is hard to handle the soft spot for persuasive messages to deliver.

After prototype 001, visual changes should interpret as metaphors like city heat can represent by red and blue LED spotlight on the city model to let visitors have a better perception of the problems which we are facing now.

HSBC Connect idea - Gesture Pay

Wearable payment screen flows.

Users can utilise hand gestures to effortlessly pay with either a credit card or a saving account.

UN Global Goal 13.Climate Action Individual electricity consumption.

Worthwhile captures lots of a-ha moments.

Worthwhile intend to draw our target audience just a glance while they are waiting for the lift at the elevator lobby. The prototype unit can demonstrate the core interaction design which develops from PD1, PD2 and user tests. Also, the demo section keeps it simple and clean to let visitor realise the importance of their actions. Although the connection of rating and feedback to the visitors are not polished to connect each section strong enough. I’m satisfied with the outcome which takes almost a week of 24 working hours to build 13 weeks of preparation.

Visitors /tutors feedback

- Tree animation is impressive Visitors general love the effect of the tree time travel. Most of them are impressed by the animation. - Step back and see it again Most of the visitors understand the step back - scroll back meaning which tells them not just to focus on a time frame, changes need a longer time to show. - Tree final appearance Although visitor can scroll back to watch the animation from start to end, a comparison between different attempts’ tree final appearance can help visitors know how they were and noticed the improvement they made. - Tree final appearance social share Social sharing to compare with hows others’ tree shapes can create a stronger resonance. - Scale selector press button is better Wait to select may confuse the visitors. - Time travel may add a unit to clarify the time interval Give a sense of distance of time.