ANGELA DONG UX / UI DESIGNER
2015 PORTFOLIO
TABLE OF CONTENTS
04
ABOUT ME
08
UX PROCESS
10
HONEST MOM PREGNANCY iOS APP
16
SPARKACTION IA + RESPONSIVE WEB DESIGN
22
QUORA VIDEO AMA WEB FEATURE
29
CONTACT
Nice to meet you, I’m Angela. I love storytelling, promoting clarity, and incorporating a delight factor to any experience. To me, meaningful design is the synthesis of complex ideas to their most simplistic form.
The pursuit of understanding people has been a life-long driving factor in both my studies and career. Coming from a background in journalism and psychology, my five years of work experience in digital marketing, branding, and content strategy left me hungry to understand design’s impact on human behavior more deeply. All roads led to UX. I recently graduated from General Assembly’s User Experience Design Immersive in New York City and am excited to begin solving problems while creating beautiful designs and impactful products for real, everyday people.
Experience
Education General Assembly, New York, 2015 User Experience Design Immersive Columbia University, 2015 Publishing Certificate University of Southern California, 2010 B.A. in Journalism; Minor in Psychology
Work
Background
2015 SparkAction (General Assembly) UX/UI Consultant
UX / UI Design
2012 - 2015 HarperCollins Publishers Marketing Associate
User Research Information Architecture Content Strategy Digital Marketing Brand Development Social Media
2011 - 2012 Penguin Random House Marketing Assistant
Book Publishing Journalism
Skills & Tools
User Interface
Visual Communication
Sketch OmniGraffle Balsamiq
Adobe Photoshop Adobe InDesign Adobe Illustrator
Sketching
Animation
Freehand drawing
Hype After Effects
Prototyping
Languages
InVision POP Axure Flinto
English Mandarin, Chinese HTML/CSS
Productivity Slack Trello Basecamp Google Analytics
Contact angela.y.dong@gmail.com www.angelaydong.com linkedin.com/in/angelaydong medium.com/@angelado
UX IS A PROCESS
First, discover the problem, then define the solution. Next, develop the design, then deliver the product.
Designer John Maeda said that great art makes you wonder, but great design makes things clear. Although every project is different, my primary aim for each design I create is to ensure clarity, learnability, and usefulness. My UX process is fairly simple. First, I seek to fully understand the problem, then I set out on an iterative process to design a clear and communicable solution.
READY, SET, GO.
Design Sketching Wireframing Prototyping Mockups
Project Plan Agile Methodology Deliverables Timeline Process Strategy
Research Stakeholder Interview Heuristic Analysis User Flows Site Maps
Ideation Affinity Mapping Feature Prioritization Design Studio
Understand the User User Interviews Contextual Inquiries Persona Creation User Journeys
LAUNCH
Test & Iterate A/B Testing Paper Prototypes Interactive Prototypes
Communicate Design Decisions Client Presentation Annotate Wireframes Product Documentation Next Steps
HONEST MOM Pregnancy iOS App
CASE STUDY Platform: Mobile Duration: 2 weeks Team: 3 UX Designers
The Opportunity Expectant mothers are often overwhelmed by the quantity of information and resources available. Our goal was to design a new product that would allow for a better way to filter information and personalize the maternity journey.
The Solution Today’s expectant moms want access to pregnancy-related info as well as the ability to note and share their experiences while staying as active as possible. By focusing on our MVP of expert content and a timeline feature, Honest Mom meets their information, recording, and sharing needs in one native application.
My Role
Deliverables
As UX/UI designer and project manager in a team of three, I was responsible for creating a project plan, personas, research data visualizations, performing usability tests, making hi-fi mockup iterations, and designing the final interactive prototype.
Executive Summary Heuristic Evaluation Layout Analysis Competitor User Flows Tech/HIG Guidelines User Survey + Interviews Personas + User Journey Annotated Wireframes High Fidelity Mockups Usability Test Insights Clickable Prototype Next Steps
HONEST MOM 11
Project Plan As the team’s project manager, it was my responsibility to implement and manage timelines to ensure we met our deliverables deadline. Using agile methodology, I created a high-level project strategy that included both overarching goals for each day along with more granular time-boxing exercises throughout the day.
WEEK 1 mind map MON 7/13
survey TUES 7/14
research WED 7/15
WEEK 2 interview THURS 7/16
9am
competitive research
survey synthesis
personas
sketching
wireframing
prototyping
testing
project doc
FRI 7/17
MON 7/20
TUES 7/21
WED 7/22
THURS 7/23
FRI 7/24
design studio
wire pin-up
sketching
med-fi wireframes
hi-fi wireframes + prototype
project doc + assets + roles
plan pin-up
12pm
12pm
intro + ground rules 3pm
mind mapping: problem statement 6pm
9am
complete proposal
conduct interviews
conduct interviews
paper prototype
POP testing 3pm
user research: survey screener
research plan
personas, scenarios, storyboards
affinity map affinity mapping
feature prioritization
feedback iteration
6pm
hi-fi wireframes + prototype
lo-fi wireframes
usability testing
iterations + prototype II
additional testing
research report
presentation prep, dry run complete project doc retrospective
Brand Identification The goal for this project was to explore an area of opportunity for an existing brand. Once our team decided to focus on the experience of birthing, we identified The Honest Company as a natural brand-fit for our new product. The company is already a trusted brand for parents in the baby product industry and we believe with our app, Honest Co. is poised to move into becoming a resource for informative content in this space before users are customers.
INITIAL ASSUMPTION An emotional fear element surrounding childbirth is attributed to a lack of information.
HONEST MOM 12
Understanding the User Insights from user surveys quickly revealed that our initial assumption was incorrect and required revision. From user interviews, we identified the behavior of gathering information from scattered sources to be a primary source of anxiety. INITIAL SURVEY
33
SECONDARY SURVEY
HEAVY RESEARCH, 46.2%
LEVEL OF PLANNING
MEDIUM RESEARCH, 46.2%
14
MINIMAL RESEARCH, 7.7%
RESPONSES
BOOKS, 92.3% ONLINE BLOG/WEBSITE, 84.6%
INFORMATION SOURCE
HEALTH CARE PROVIDER, 84.6% FRIENDS + FAMILY, 76.9%
RESPONSES W/ CURRENT OR PREVIOUS PREGNANCY EXPERIENCE
64% USE SOME FORM OF JOURNAL OR RECORD KEEPING DURING PREGNANCY
GROWTH OF BELLY, 57% DOCTOR’S NOTES, 50%
RECORD CONTENT
HEALTH CARE INFO, 50% EMOTIONS, 43% PHYSICAL SYMPTONS, 36%
APPS, 46.2%
LIST OF ITEMS TO PURCHASE, 29% HIGHLY PREPARED, 61.6%
EMOTIONAL PREP FOR DELIVERY
SOCIAL MEDIA, 71%
AVERAGE, 30.8%
SHARING
NOT PREPARED, 7.7%
PLATFORM
PHONE, 64% IN PERSON, 50% EMAIL, 43%
REVISED PROBLEM STATEMENT Expectant mothers are often overwhelmed by too much information from too many resources; they need a better way to filter information and receive trustworthy content in a timely manner.
Competitive Analysis We conducted a concise heuristic evaluation of 5 competitor apps in order to thoroughly explore the areas of opportunity for the Honest Mom app. RESEARCH TAKEAWAY Although use of a timeline and journal are common, visual organization is a source of pain. Minimal design plus increased learnability and readability can serve as competitive differentiators.
HONEST MOM 13
Persona Creation After synthesizing data from our 47 survey respondents and 5 user interviews, we affinity mapped all key takeaways to discover commonalities and inform the creation of our 3 personas. In creating a user journey map including use cases, we were able to validate our mobile platform choice as it met user needs of: Access to info on the go Access to camera/camera roll Access to contacts for sharing
The Information Seeker Nicole C. 29 yr. & 10 weeks pregnant
The Support Seeker Julie L. 33 yr. & 15 weeks pregnant
The Partner Jimmy H. 35 yr. & married 5 years
Level of Research
Level of Research
Level of Research
Time Spent Journaling
Time Spent Journaling
Time Spent Journaling
Level of Social Sharing
Level of Social Sharing
Level of Social Sharing
Identifying the MVP Our personas were essential point-of-reference tools during the feature prioritization process and heavily informed our MVP. During the process of understanding our users, we identified the following “must have� features: (1) (2)
Weekly expert content: Digestible and relevant content to alleviate anxiety from too much info A journaling/note-taking feature: Efficient and timely means of documenting various developments (physical, emotional, or material)
HONEST MOM 14
Design Evolution Following a design studio session, we created a paper prototype of our initial design and began usability testing—this quickly led us to discover usability flaws (such as confusion in differentiating key screens) and allowed us to iterate early in lo-fi. A primary point of refinement (our “ah-ha” moment) was our decision to consolidate the expert content, timeline, and journal features into one home screen; ultimately, prioritizing the content and making it the UI. V1 Design studio sketch ideation
V4 Annotated wireframes of key screens
Prototype Mockups
Timeline
Weekly Content
Note Taking
Clickable Prototype Project Retrospective
HONEST MOM 15
Navigation
Expert Advice
SPARK ACTION IA + RESPONSIVE WEB
CLIENT PROJECT Platform: Desktop Duration: 2.5 weeks Team: 3 UX Designers
The Opportunity SparkAction is an online journalism and advocacy center for children and young adults. The client approached our team to streamline the information architecture of The Readiness Project campaign page within SparkAction.org to ensure that the content is easy to engage with and access. A top priority was to create a responsive design of the campaign page and increase interactivity of key features.
The Solution By focusing on a narrative-driven campaign page, we were able to meet both business and brand needs by ensuring that the content is not only easily accessible on a single page but also highly engaging. The final design incorporated a storytelling narrative with a playful use of color for an added element of delight.
My Role
Deliverables
As the information architect and interaction designer in a team of three, I was responsible for creating the mobile responsive design and our final interactive prototype. My most significant leadership roles were in the processes of persona creation and design ideation.
Executive Summary Layout Analysis Heuristic Evaluation User Flow Analysis User Survey + Interviews Personas Site Map Usability Test Insights Annotated Wireframes High Fidelity Mockups Clickable Prototype Next Steps
SPARKACTION 17
Stakeholder Interview From the initial client meeting our team was able to identify key project goals and outline a deliverables plan to meet a 2.5 week deadline. User Experience goals: (1) Streamline information architecture (IA) of the campaign page (2) Create a responsive web design for mobile (3) Increase interactivity of key elements such as the “tools” feature Brand goals: (1) Design should appeal to both young individuals as well as smart adults (2) Aesthetic aim is clean, colorful, and young but not frivolous (3) Develop dynamic content strategy to better facilitate user engagement
IA Heuristic Evaluation A heuristic is a best practice or rule of thumb. In order to streamline SparkAction’s IA, we began by evaluating the strengths of three comparative non-profit websites to help facilitate critique and predict the effectiveness of a potential solution.
FINDABILITY ACCESSIBILITY CLEAR COMMUNICATIVE USEFUL CREDIBLE
HEURISTIC TAKEAWAY Scoring the lowest heuristic total of 2 out of 5, there is clear room for improvement in SparkAction’s IA structure, particularly in the qualities of being clear, communicative, useful, controllable, learnable, and delightful.
CONTROLLABLE VALUABLE LEARNABLE DELIGHTFUL TOTALS
SPARKACTION 18
2
4.125
3.65
4.25
Comparative Layout Analysis To better identify redesign opportunities for SparkAction, I took the lead in exploring a layout/footprint analysis of our three competitor’s websites. We took design inspiration from charity: water in particular as their website contained the most visually engaging content including large banner images, a playful use of color, and a clean linear format conducive to storytelling.
charity: water
Action for Children
Translating User Data After conducting 9 interviews with self-proclaimed advocates, we analyzed our user data by affinity mapping the info into pains, pleasures, contexts, and behaviors to begin identifying similarities and trends. RESEARCH TAKEAWAYS Many activists enjoy being helpful and become frustrated when there is a lack of resources, especially when they’re “in the field” mentoring or campaigning. These findings emphasized a user need for us to design (1) a highly accessible tools feature and (2) a mobile-friendly responsive design.
SPARKACTION 19
Teach for America
Personas From our affinity mapping session, we were able to identify three distinct personas to represent SparkAction’s key demographic. The motivations, behaviors, and contexts of these archetypes helped guide our IA, content, and design priorities.
The Activist
The Parent
The Educator
Site Map & Content Strategy Keeping in mind the needs of our personas, we looked to simplify SparkAction’s global navigation by creating a new site map that reorganized the website’s vast array of content. To meet both the user and brand goals of greater engagement and accessibility, we chose to display all key content on the campaign’s landing page to tell a comprehensive and engaging story:
Readiness Campaign Page
Readiness Campaign Page About
Newsletter
Stories
Social Media
Problem
Blog
News
PDF Download
Solution
Tools
Footer
Readiness Campaign Page
Blog
About: What we stand for Tools: How to take action Blog: What’s being accomplished Stories: Inspiration and motivation News: Stay informed & connected
Stories
Readiness Campaign Page
News
Readiness is a Right
Stories
Commentary
Readiness Dispatches
Twitter Feed
News Twitter Feed
Innovation in Schools
Blog Article Readiness Campaign Page
(1) (2) (3) (4) (5)
Readiness Campaign Page
Stories Article Readiness Campaign Page
News Article Readiness Campaign Page
Article Content
Story Content
News Content
Commenting
Commenting
Commenting
Share via Social
Share via Social
Share via Social
SPARKACTION 20
Narrative Design In prioritizing the new IA structure, we focused on a linear narrative design that incorporated: (1)
(2)
Playful full-bleed color blocks of each category with “peeking� of next section to entice scrolling A bullseye design of the tools to visually represent resource hierarchy
Prototype Mockup Screens
Desktop homepage narrative
Mobile responsive homepage narrative
Clickable Prototype
SPARKACTION 21
Paper Prototype Sketches
QUORA Video AMA Feature
CASE STUDY Platform: Desktop Duration: 2 weeks Team: 2 UX Designers
The Opportunity With the growing popularity of AMA (Ask Me Anything) style interviews on Reddit and elsewhere, Quora sees an opportunity to leverage their expert user base by introducing video AMAs as a paid service for its users.
The Solution A desktop web application that combines native live-stream video and group chat capability accessible via an upgrade to a “Quora Video Plus” monthly subscription. This solution allows existing Quora users to follow their favorite “Quora experts” and RSVP to upcoming live video AMAs for a more personal and engaged style of learning.
My Role
Deliverables
As the UX researcher and lead visual designer in a team of two, I was responsible for the final UI design and prototype of our video feature. My most significant leadership roles were in the ideation, interview, and usability testing processes.
Project Plan Competitor Flows Comparative Analysis User Survey + Interviews Personas + User Journey Map Sketches + Paper Prototypes Annotated Wireframes Usability Test Insights Clickable Prototype Next Steps
QUORA
23
User Research Our primary user research goal was to understand how people currently ask questions and learn online via a survey (50 respondents) and 8 user interviews. INTERVIEW TAKEAWAYS (1) Most users access answers online via sideways entry (i.e. Google search) (2) Common user pains: anonymity of other users and questionable credibility (3) Common user goal: ability to participate in larger discussions online
Identifying Personas After synthesizing data from our survey results and interviews we began to identify commonalities that informed the creation of our three personas. Although they each seek out Q&A sites for varying reasons, a common goal is to contribute to a larger community discussion.
The Knowledge Seeker Ryan S. 35 yr. Product Manager Goals • • •
The Fangirl Cindy L. 25 yr. Graduate Student Goals
Receive specific answers Verify credible experts Share expertise/advice
• • •
The Moderator Laura R. 42 yr. AMA Moderator Goals
Social connection Personal interaction/chat Entertainment
• • •
Call out specific questions Facilitate orderly discussion Encourage participation
Features Needed
Features Needed
Features Needed
• • •
• • •
• • •
Highly visible search Professional bio Upvote/downvote
Follow/subscribe Calendar of events Live chat + video
QUORA
24
Question rating system Flag/remove responses Highlight current question
Comparative Analysis Our initial research focused on understanding the competitive landscape of websites related to Q&As, AMAs, video based learning, and paid subscription. RESEARCH TAKEAWAY Although many competitors provide a native live stream feature, there is clear room for improvement in community growth as only one competitor (Meerkat) has the combination of live group chat + video streaming.
Ability to Follow Users Visible User Verification Native Live Stream Group Chat Point/Credit System
Introducing a New Business Model 4 of our 5 interviewees revealed that they currently pay for at least one online subscription service, demonstrating a user openness to paying for content that (1) is relevant to their interests, (2) provides some form of exclusivity, and (3) lacks ads. By introducing a new business model of expert video AMAs as a paid monthly service option, Quora is able to better capitalize and monetize on their existing expert database.
Free AMAs
Ads
Topic & link-driven: articles videos, images
Expert Database
Pay $ Per Call
Expert Video AMAs
Marketplace that connects entrepreneurs with experts
Paid Monthly Service
Leveraging expert database to introduce paid subscription
Competitor Business Models
New Business Model
QUORA
25
Design Ideation & Iterations To create our MVP my team focused on designing the key screens of (1) a live video AMA feature, (2) an expert profile and (3) a subscription incentive. We created a paper prototype and began testing early to iterate more easily in low-fidelity before moving on to high-fidelity wireframes. USABILITY TESTING TAKEAWAY Target design iterations to focus on clarity and learnability for video participants. I brainstormed features to facilitate learnability such as a current question call out and an auto-type prompt to identify previously asked questions.
Design Studio Sketches
Prototype Mockups
Expert Profile
Subscription Prompt
Calendar Sync
Video Library
Expert Reviews
Video AMA
Question Auto Search
Question Submission
QUORA
26
User Scenario We identified Cindy, “the fangirl,” as our primary persona as she frequents both Q&A sites and AMAs; therefore our product use-case was best demonstrated via Cindy’s user goals and behaviors. During user testing as well as the final prototype walkthrough, I crafted a user scenario from the perspective of Cindy.
Imagine you are Cindy, a 25-year-old graduate student who’s active on social media and a fan of costume play (cosplay). Comic-Con is coming up and you’re curious to explore ideas for this year’s event. You’re a fan of makeup artist Michelle Phan and follow her on your social channels. On Twitter you see that Michelle is announcing an upcoming live video AMA on Quora to chat about creative ideas for Comic-Con. You click the link she provides to join her upcoming AMA.
Clickable Prototype Project Retrospective
QUORA
27
Contact angela.y.dong@gmail.com www.angelaydong.com linkedin.com/in/angelaydong medium.com/@angelado
AYD
UX / UI PORTFOLIO, 2015