ROLE
Lead Designer
SKILLS
UX/UI, Design for IoT
CLIENT
Brookfield Properties (London)
TEAM
Union Design
As the completion date approaches, we are involved in digital and print marketing for the public.
For this marketing room, Union’s development team built three technologies:
1) IoT: It allowed the remote control App to operate the screen and model lighting at the same time.
2) Interface: We’ve built a highly designed interface with an agile process.
3) CMS: It manages content for the App and screen.
Though we have developed the App for the Brookfield Properties Global team, it was the first time to design an App specifically for the London team. In order to understand their specific needs, we’ve worked on persona, joinery maps, and app maps.
How might we make small talk in the office easier?
I created a mobile app that provides users with conversation starters based on one's job, location, and coworkers' interests.
• Research and product development
• AI tool implementation
• Front-end development using a visual coding tool
Using the visual coding tool, I developed the front end based on the sketches I created in Figma. The main key screens include 1) Onboarding 2)Conversation Prompts 3) Categories, and 4) Bookmarks.
The onboarding questions help generate personalized prompts based on users' jobs, interests, and locations.
The home screen offers four daily prompts: Trending, Local Topics, Industry Topics, and For You.
Users can explore more prompts via categories and bookmark their favorite ones for later use.
I conducted desk research on how small talk impacts individuals and plays a crucial role in the workplace. This research confirmed that a small talk assistant could be beneficial for those needing extra encouragement.
72%
of workers said that small talk makes the workplace more bearable.
Journal Record
77%
said small talk helps them to improve and maintain relationships with colleagues.
Journal Record
67%
said small talk has a positive effect on employee motivation
Journal Record
To demonstrate how prompts are generated by AI (LLM), I developed a simple diagram showing front-end and back-end tasks.
After defining the app flow, I created a quick lo-fi wireframe in Figma. The purpose of this step was to layout the entire journey and identify layout patterns.
The branding for DeskTalk was designed to be professional yet friendly, providing a sense of calm. I incorporated gradients and illustrations to represent the ideas vividly.
Here are the six main screen types of the MVP product: 1) Onboarding 2) Home - Prompts of the Day 3) Categories 4) Bookmark, and 5) Profile.
After finalizing the design on Figma, I built the front-end in Flutterflow. This process emphasized the importance of maintaining consistency in colors, type sizes, and more to ensure a seamless experience.
AI tools were particularly useful during the research phase but less so during the design phase. Image generation tools could be utilized for idea sketches, such as storyboarding.
• Create a business model.
• Gain further understanding of back-end development.
• Build a stronger brand voice and experience.
• What other tools could assist in conversation? (e.g., voice assistance, AI pin, etc.)
• How can we facilitate the next steps in the conversation?
Our primary audience for the analytics tool was marketing executives who manage numerous markets worldwide. To tailor our product development, we identified their goals, key tasks, challenges, and solutions.
Identifying core issues and untapped opportunities was our initial step towards product development.
Informed by our preliminary research, we outlined the essential data and information types that users require for app usage analysis and future marketing planning.
Progressing to the design phase, we focused on developing quick wireframes. We crafted three essential pages: the home dashboard, location analytics, and technology usage, laying the groundwork for our prototype.
At this stage, we incorporated the client’s branding into our design, creating detailed charts and graphs for a more polished and functional prototype.
Our primary audience for the analytics tool was marketing executives who manage numerous markets worldwide. To tailor our product development, we identified their goals, key tasks, challenges, and solutions.
We identified two main target user groups – potential members and one-time users.
Using the existing app and our research as a foundation, we mapped out the key journey stages. We then detailed the site architecture to visualize every step users would take.
From the information architecture, we created wireframes for the key stages, then expanded these wireframes to accommodate the needs of different types of users.
We enhanced the UI and brand expression by incorporating black and gold, which convey a sense of luxury.
The final step involved producing high-fidelity (hi-fi) mockups. We focused on flats, animations, and interactive mockups to facilitate better communication with developers.
We built an interactive presentation app for desktops, iPad, and the web. This app allows the marketing team to access VR, 3D models, maps, and galleries, in addition to the presentation slides, all in one place.
We've also set up digital and print pitch decks, personalizing content based on the clients.
As the completion date approaches, we are involved in digital and print marketing for the public.
As the completion date approaches, we are involved in digital and print marketing for the public.
As the completion date approaches, we are involved in digital and print marketing for the public.
Founder and CEO
Phase 1: Service Design
The Engagement Suite has key areas; Data, Culture, and Story. Based on the storybase we developed, we created the data collection and management tool. Utilizing the data, RAP can more effectively communicate their story and impact with stakeholders.
Phase 2: Brand Design
As a part of the improvement to external communication, I also contributed to developing RAP’s new branding. After discussing with various stakeholders of the organization, RAP’s logo was updated so it could convey the youths’ positive energy and bold, resilient spirit.
Research
To understand problems in menstrual health from micro to macro level, I conducted secondary research and primary research, which includes observation, survey, interview, and workshop.
Learning
From the research I learned that there is
• a lack of knowledge/awareness
• a lack of personalization
• an opportunity in connecting different industries
Based on the research, I ran an ideation workshop with 10 women, redefined the question, and created an opportunity map determine what would be the high-impact and feasible solutions.
The concept is to create an app, maru, that helps people who want to have healthier periods by providing menstrual resources, experts, health information, and period tracker, all in one place.
To hear users opinions and suggestions, I conducted three user testings that include a paper prototype workshop, business model testing (with product providers and medical providers), and an app interface testing.
The final prototype was all-in-one app that provides personalized health information, products, and professional help. I’ve also developed a business model to show how to gain profit by aggregation app.
The first step was to analyze the old app and seek improvement opportunities. Overall, the UI was flat, and the UX felt outdated—it almost felt like a static slideshow.
The main users were leasing teams across the globe, who utilized this app to showcase their signature buildings to prospective clients. Additionally, we identified where and on which devices they were using the app to better understand their needs. They primarily utilized the app in large conference rooms, during video calls, and at tradeshows.
We have developed a UI system, including icon and layout systems, in alignment with Brookfield’s branding.
We've published four different apps: desktop, iOS, web, and controller versions. This allows the team to use the app in every setting, whether in marketing suites or on the go.
The horizontal scrolling presentation allows the marketing team to showcase a dynamic vision. It is animated, responsive, and fully customizable.
The app includes various features such as narrative (presentation), image/video/3D gallery, interactive maps, interactive stack models and floor plans, and a 3D model.
The app kept evolving after the launch. We helped the London team to create an IoT model controller app at their signature marketing room.
We’ve also created a custom analytic tool for the marketing executives to track the app usage.
Here are some examples how we supported the client.
Stay updated.
Sign up for our newsletter
