Hello 👋🏻 I'm Josie
I'm a UI UX designer with a passion for turning ideas & problems into impactful user experiences
Previously at amazon web services
Nice to meet you 🙂 I'm Josie
My intro into design started when I was around 12 years old. Instead of learning how to do my makeup (sensitive skin), playing road hockey with the neighbourhood kids (no girls allowed), or attending sleepovers (strict parents), I taught myself Photoshop and how to code HTML and CSS.Since then, I've held various creative positions, transitioning from graphic designer to video editor. Within the last few years, I’ve had the opportunity to dip my toes into UI UX and discovered the joys of solving user problems and creating inclusive designs.Outside of work, when I'm not stuffing my face with dumplings, I enjoy true crime podcasts, camping and pottery.
What have I done?
- Performed competitive research to identify industry standards and user expectations
- Developed design system, ensuring consistency across the platform
- Advocated for user-centered design principles, prioritizing user needs and business goals in all design decisions
- Designed features to support A/B testing and data-driven decision-making, enhancing the user experience based on real user interactions and analytics
- Led the entire product design lifecycle, from ideation to execution, and ensuring a cohesive user experience
- Lead designer for over 15 features, delivering solutions that effectively addressed customer needs and enhanced user experience
- Led initiative to integrate inclusive design across new features and redesigns
- Delivered high-level mockups with tight deadlines
- Assumed responsibility for any graphic and visual design tasks, as the sole team member with such experience
- More than doubled our subscribers in under a year and reached 1.5 mil subscribers within a year by producing videos at a rapid pace with efficiency
- Edited studio's first video that reached top 8 trending on YouTube
- Co-produced a new YouTube channel surrounding the successes and struggles of local restaurant owners
- Redesigned and developed responsive pages for Wickr's website
- Produced and edited videos demoing Wickr's unique features
- Created graphic and illustrations for marketing decks
What others have said
explores all possible outcomes
. She conductsdetailed research
on competitors which drives her design decisions. She has shown tremendous ownership in our accessibility efforts. Every new feature shipped on the client side is accessible and Josie can be credited forfinding issues, educating the devs and accessibility testing
."eye for details
. She can see when icon/text are slightly misaligned in the app and is willing to work with the developer to figure out the proper spacing so it meets the highest standards. She makes sure that design wise,our customer will be receiving an amazing UI
."tries to think of holes in it
. In addition, all of her design docs are thorough. This has helped me a great deal as a PM becauseit gives me confidence
we didn't miss anything."asks questions about feasibility
. She is always available to clarify her designs and provides any assets or resources that are needed."improves our work quality as a team
. Josie always brings her ideas to the table butaccepts when the team goes in a different direction
. This is key to us moving the project forward and getting the best result."aws wickr
Let's get emotional
| Quick reactions feature redesign
Project overview
Quick reactions play a key role in our busy lives, yet the experience loses its efficacy when there aren’t many reactions to choose from. Many of our users echoed this sentiment, expressing a desire for more options to react to messages without having to type a response.As the lead designer on this project, my aim was to introduce a broader range of reactions with the intention of expanding into custom emojis and gifs in the future. I also wanted to move away from the bulky design and revamp the emoji experience across all platforms.
Role: UI/UX designerProcess: Competitive analysis, user experience, visual design, prototyping, accessibility, and user testing
DEFINE
Problem 😤
Wickr users experienced pain points with having only 6 quick reactions to choose from, creating friction in a fast paced and busy working environment.
The design was also bulky, outdated, and took up a lot of real estate.
Research
Competitor analysis
I began by conducting a competitive analysis to understand common design patterns and user expectations. One common feature I noticed was the inclusion of a 'more reactions' option in their quick menu.
Ideation
Low fidelity
The initial task involved an additional 10 quick reactions. I explored different options that featured 16 emojis. However, this would make the desktop experience even bulkier.
ideation
Saving space
The current reaction bubbles are bulky and takes up a lot of room. Shifting them to the edge of the message bubble leads to a more streamlined design. This not only offers a more modern aesthetic but also improves space efficiency, allowing for more room for messages in the chat window.
Ideation
Designing with accessibility in mind
Another area of improvement for Wickr is designing for impaired users. Roughly 42.5 million Americans and over 8 million Canadians are living with a disability. Therefore, to ensure the app is inclusive for all, we worked on integrating keyboard navigation, alt text and hover text bubbles into the design. We also swapped out colours to ensure our components met the WCAG accessibility guidelines.
Keyboard navigation
We worked on defining states for each element and labelled their keyboard navigation steps to ensure comprehensive accessibility.
Solution
Make way for the more button
Introducing a more button in our quick reaction menu offers users seamless access to a wide range of emojis by opening a new emoji modal, aligning with existing app conventions. The quick reactions were also reorganized to include a temporary thank you emoji 🙏 and replacing negative emojis with more positive reactions. 😊
Access a multitude of emojis
Users can now enjoy unlimited access to all the emojis their ❤️ desire!
Cleaner desktop experience 💻
A refined experience that allows quick and easy emoji access
Testing & validation
Usability testing
Before releasing to the public, we conducted usability testing with our internal users to gather feedback, identify pain points, and ensure the design met user needs effectively.
Design decision: through user behavior analysis, we discovered that most interactions involve one or two emojis, guiding our decision to display only a few.
iterate
Incorporating feedback
We identified key pain points during testing and addressed them through an iterative design process to enhance usability. Starting with the desktop version, we redesigned the chat bubbles to accommodate more emoji reactions, allowing users to see a wider variety of responses directly attached to each message.
More next steps: future iterations will focus on scalability, including custom emojis and GIFs to enhance the user experience further.
👇 Check out some of my other projects 🙂
Furious engineering
Rekommendo - a shopping app
AWS Wickr
Custom status feature design
AWS Wickr
I'm on vacation
| Custom status feature design
Project overview
You're on PTO, but despite notifying your team, you return to a flood of messages from unaware colleagues. Following up with every individual takes your entire morning — a frustrating waste of time.Many of our users share this frustration, juggling separate apps for OOF notices and our current online status doesn’t provide much indication of users’ whereabouts.This project aims to streamline communication about your availability in just a few clicks. Additionally, we took this opportunity to reorganize the navigation drawer in the app, where the online status is currently located.
Role: UI/UX designerProcess: Competitive analysis, market research, information architecture, user journey, user experience, visual design, accessibility, and prototyping
DEFINE
Problem
Users are able to set their status to online or offline but the online status only informs other users of their inactivity for the last hour in 15 minute increments. If they want to notify their coworkers that they’ll be out of office, they will either have to message everyone individually or use other apps.
DEFINE
Current interface
Status indicator isn't very helpful.
Navigation drawer is messy.
Research
Competitor analysis
Slack and Zoom have provided invaluable insights, filling the majority of gaps for online status. Yet, in the realm of remote work, group chats are vital. Therefore, it is crucial that the status indicators extend to group chats if some users are primarily engaging with others there.Slack also offers a limited ability to schedule their status in advance, but plugins are required. Building in scheduling capabilities can help users plan accordingly.
Synthesize
Empathy map
I created an empathy map to understand users' frustrations and needs with managing availability, including the hassle of notifying colleagues, unclear online statuses, and the challenge of catching up on messages after being away.
User messaging someone on PTO:
User on PTO:
Synthesize
Personas
So, how do we allow users to easily notify colleagues that they’re OOF?
Ideation
Information architecture
While brainstorming, I was considering several different maps to enhance custom status and optimize navigation within the app. This involved a comprehensive review of the navigation drawer¹, as well as a reorganization of elements in the chat list header². The primary goal was to design an efficient and seamless experience.
The first map includes the use of the existing account info modal³ where users currently go to toggle their presence. I also removed the navigation drawer entirely. Settings and additional options were moved to the chat list header, following a common pattern in many other messaging apps.
The second and third map dissected the account info modal and lists the options into a context menu. A couple of list items were also moved to a more appropriate location. The second map also combines contacts and settings within a single menu, while account info lives in a different one. A concern with this approach is a cluttered header, considering there's already a button there.These considerations were part of an effort to design an interface that not only streamlines the user flow but also maintains a clean and intuitive design.
Design
Low fidelity
Focusing on interaction design ensures a smooth user flow for status updates. After assessing my IA maps, I concluded that the third option best enhanced the user flow while maintaining a logical organization of items. The emphasis on consistent modal sizes not only contributed to a visually polished design but also minimized cognitive load.
Solution
Final designs
Set your custom status
Whether taking a lunch break, busy in a meeting, or leaving for vacation, the custom status feature gives our users control over their notifications. Our new modal empowers users to schedule and set a clear after date for their custom status.
Status indicators
Custom status icons appear next to the users' names for visibility. A message will also appear in the chat bar to inform users when their colleagues have their notifications turned off.
Streamlined navigation
As depicted, items previously found in the navigation drawer were moved into a context menu. Furthermore, we've standardized the size of the modal for each menu item (excluding settings), ensuring consistency in appearance and location.
Why not take a look at my other projects?
AWS Wickr
Quick reactions feature redesign
AWS Wickr
More feature designs
Typing indicator
Role: UI/UX designer
Process: Competitive analysis, user experience, visual design
A real-time typing indicator plays a pivotal role in enhancing the interactive experience for Wickr users. Positioned above the text box in the chat screen, it helps users maintain natural flow of conversations by minimizing interruptions and overlapping messages. This feature also enhances the user experience by providing real-time feedback, allowing users to anticipate incoming messages and adjust their responses accordingly. Additionally, we incorporated an option for admins to disable the feature to maintain privacy.
Project Highlights:
Short Turnaround:
Short turnaround due to simple and straightforward requirementsEfficient Design Process:
Conducted brief competitive analysis to identify best practicesInclusive Design:
Delivered user-focused and inclusive solution
Desktop dark mode
Role: UI/UX designer
Process: Audit, visual design, design system, and prototyping
The prevalence of dark mode usage is at an all time high, where approximately 80% of users favour dark mode across their devices. Beyond its visual appeal, dark mode provides many benefits such as battery conservation, mitigating blue light emission, and reducing eye strain. Therefore, it comes to no surprise that dark mode has been a longstanding user request for Wickr's desktop application, reflecting a clear user need.
Project highlights
Comprehensive Audit:
Conducted audit of entire app, categorizing and dissecting each componentDesign Research:
Studied guidelines to understand how colours, elevation, and contrast work together in dark modeDark Mode Palette:
Created dark mode palette that aligned with Wickr’s brandingImplementation:
Applied curated colours to components, resulting in a user-friendly dark mode experience for Wickr users
Message edit
Role: UI/UX designer
Process: Competitive analysis, user experience, visual design, and prototyping
We all make mistakes sometimes. With the introduction of our message edit feature, we empower users by providing them with control and flexibility over their conversations. This feature not only allows users to rectify errors but also enhances efficiency by eliminating the need to delete and resend messages or send follow-ups to clarify misunderstandings. By addressing this pain point, we improved the overall user experience, making interactions smoother and more intuitive.
Project Highlights:
Quick Turnaround:
Small project completed within tight timelineDesign Audit:
Conducted audit of existing components to identify reusable elements for seamless integrationConsistency & Efficiency:
Reduced need for creating new components and minimized cognitive loadStreamlined Design System:
Maintained cohesive and cost-effective design systemPositive Feedback:
Internal teams and external users validated feature’s usability and alignment with user needs
Wanna see what else I've worked on?
AWS Wickr
Quick reactions feature redesign
AWED studios & Freelance
Video editing & illustrations
Video editing
Adobe Premiere Pro, After Effects, Illustrator & Procreate for iPad
Illustration & print
Adobe Illustrator, Photoshop, After Effects & Procreate for iPad
Take a look at my UI UX projects
Furious engineering
Rekommendo - a shopping app
AWS Wickr
Quick reactions feature redesign
furious engineering
Rekommendo
| Trusted recommendations - shopping app
Project overview
Research shows that 95% of consumers read online reviews before making a purchase, yet 51% trust personal recommendations over online reviews. This highlights a critical gap in reliability, as online reviews often lead to purchases that fail to meet expectations, creating a disconnect between consumer trust and decision-making.Rekommendo bridges this gap with a user-centric approach to recommendations. By leveraging trusted, personalized reviews, it delivers tailored recommendations that align with individual preferences. This human-centered design ensures a reliable and intuitive experience, empowering users to make confident purchasing decisions.
Role: Product designerProcess: Market research, design system, branding, information architecture, user journey, user experience, visual design, prototyping, and accessibility
Personalized recommendations in seconds
Receive product suggestions tailored to your personal preferences, backed by trusted reviews from your community
Share honest reviews
See what users are looking for and get paid for sharing your honest thoughts
Connect with others
Discover vibrant communities where you can ask questions, share insights, and explore product ideas with like-minded individuals
Discover
White paper research
Consumers often invest significant time reading reviews before making a purchasing decision. However, online reviews are becoming unreliable and they tend to benefit businesses more than the consumers.
Research
Competitor analysis
I conducted a thorough competitor analysis by examining a large variety of review platforms to understand user preferences and pain points. This helped me identify gaps and opportunities to improve the user experience and differentiate our product.
❌ Free product bias
❌ Incomplete reviews
❌ Not intuitive
✅ New and niche products
✅ Review prompts
❌ Approximately 43% of reviews are fake
❌ Hides cheaper items with faster delivery
❌ Too many ads
✅ Wide range of products
✅ Q&A section
❌ Prioritizes items with high earning affiliate links
❌ High cognitive load
❌ No community feature
✅ In depth research
✅ Options for different demographics
❌ Ambiguous star rating
❌ Outdated
❌ Reported fake reviews
✅ Ability to report suspicious/fake reviews
✅ Businesses can respond to reviews
❌ Increased numbers of companies posting fake reviews
❌ Overwhelming number of comments
❌ Lots of fake reviews
✅ Broad range of opinions
✅ Still a level of authenticity
❌ Lack of disclosure for sponsored content
❌ Fake reviews
❌ Lack of detailed information
✅ Demoing real world use
✅ Short and engaging videos
❌ Time consuming
❌ High focus on affiliate links
❌ Lack of transparency
✅ Thorough product analysis
✅ Comments for discussion
❌ Steep learning curve
❌ Limited social interaction
❌ Too many ads
✅ Personalized recommendations
✅ Visually appealing endless scroll
Empathize
Persona & user journey
Based on my research, millennials and Gen Z rely more heavily on online reviews than previous generations, which highlights an opportunity to address their specific buying behaviours and needs. Therefore, for the preliminary launch, the target demographic was new moms, as they are in a stage of life where frequent purchasing decisions are required.
So, how might we...
• incentivize users to leave reliable reviews?
• help consumers to reduce research time?
• empower users to make confident purchasing decisions?
Ideation
Crazy 8's
After research, I started sketching a variety of ideas and solutions.
Ideation
Information architecture
I mapped out intuitive navigation and content hierarchy, focusing on recommendations, reviews, and communities that helps users make informed decisions quickly.
Design
Lo-fidelity
I created a variety of wireframes to quickly visualize and test design concepts.
Design
Design system & mood board
I built a design system that incorporates a purple colour palette, chosen to resonate with Millennials and Gen Z's. By moving away from worn-out blues, this design choice helps differentiate the platform.
Solution
All-in-one trusted solution
Rekommendo transforms the way people shop online by combining trust, personalization, and community. It’s not just a shopping app—it’s your go-to tool for confident, informed decisions. Experience a smarter way to shop with Rekommendo!
Solution
Final prototype
Don't miss my other projects
AWS Wickr
Quick reactions feature redesign
AWS Wickr
Custom status feature design
