“
All data problems begin with a question - Benjamin Fry
Hi, I’m Stephanie. about me I’m a an experienced Information Designer with a passion for information architecture, data visualization and usability. I love to look through large data sets and uncover patterns and correlations that translate into new knowledge. In addition to my technical skills, I also have a passion for articulate design and meaningful content —content drives design and users always come first! I’ve worked as a contract information designer for a variety of companies spanning sectors such as Energy, Non-Profit, Academic, Research, Government and Medical. I specialize in communicating sensitive, high consequence information tailored to specific audiences for a dedicated purpose.
LEGEND data visualization
technical writing
Communicating information clearly and efficiently to users via the information graphics
To document or convey scientific, engineering, or other technical information
usability testing
typography
Evaluating a product or service by testing it with representative users.
Aa
information architecture
The art and technique of arranging type to make written language readable and beautiful
wayfinding
The structural design of shared information environments through the organization and labeling of information to support usability and findability
The user experience of orientation and choosing a path within the built environment
interface & web design
research
The process of developing a method for two (or more) modules in a system to connect and communicate
The systematic investigation into and study of materials and sources in order to establish facts and reach new
graphic design The methodology of visual communication, and problemsolving through the use of type, space and image
human centered design
HCD
A methodology that promotes interacting with people in such a manner as to facilitate the detection of meanings, desires and needs.
In a complex world, clear and accessible communication, across a broad range of media, has become essential. Information Design addresses this need by blending typography, illustration, communication studies, ergonomics, psychology, sociology, linguistics, computer science and a variety of other fields to create concise and unambiguous messages. While virtually all forms of design are human-centered, information design focuses on the accurate representation of specific knowledge sets and the unique needs of the end user receiving the content – excerpt from The Information Design Handbook by Jenn + Ken Visocky O’Grady
todaytum web interface
client: code
2015
competition
type: web application industry: government team: stephanie stobart, ezequiel perdomo, king huang
summary Todaytum is a web-based interface matching trending topics in the news with visualizations generated by contextual data sourced from the government. The news is the context by which users are able to interact with the data in hopes that they will draw meaningful insights from otherwise unusable data.
PROCESS
TEAM CREATION Team Datum is a combination of two information designers and a systems architect who blend programming, UX design, interface development and data science to make up a well rounded team.
OUR CATEGORY: BUSINESS OPPORTUNITIES
IDEATION
UI DEVELOPMENT & PROGRAMMING
WHAT’S IN A NAME?
Our team recognized that although the government has a wealth of open data, the general public has little desire to access it in it’s current form. We wanted to make this data more accessible and contextual.
One of the main goals of our interface was to provide accessibility to users. Therefore, we wanted to ensure the user would be able to access information in the least amount of clicks, having maximum flexibility for navigating between different articles and content.
TODAYTUM is a synthesis of the our team name datum, which is the latin word for data, and the word today. Therefore, the meaning of the application is essentially “today’s data”.
Opportunities are opening up for businesses to grow and for consumers to benefit from due to: changing markets; increased demand for digital and mobile services; rapidly shifting demographics.
PLACED TOP 5 IN OUR CATEGORY
THE COMPETITION | CODE 2015 CODE 2015 is an intense 48-hour coding sprint where innovators from coast to coast compete to build the best app utilizing federal government data from Canada’s Open Government portal.
SUBMISSION
FEB 19
FEB 20
48 HR HACKATHON
FEB 22
MARCH 6
PITCH EVENT: TORONTO BRANDING
SOCIAL MEDIA LAUNCH
PRESENTATION CREATION
Since our app was now getting national attention, we recognized the need to establish a brand identity that would act as an easy identifier as we received more exposure.
Once our brand was solidified, we launched a social media presence so that we would be able to reach out to as many interested parties and potential investors as possible. We made sure to carry our brand across all platforms to ensure users were able to see the connection between each medium.
POST EVENT Since the CODE2015 event, Todaytum has received praise and attention from a variety of parties in a diverse set of industries. It was featured in MRU’s alumni magazine, Summit and has received attention from fans on social media. Currently team Datum is hoping to further develop the interface into a working prototype and insert more data sets from both the public and private sectors.
VIDEO CREATION
MARCH 7
PREPARATION
MARCH 17
MARCH 16
Suncor Refinery Infographic Aa
client: suncor energy type: infographic industry: energy
summary Suncor needed to communicate complex environmental and plant information to the surrounding aboriginal population in Sarnia, Ontario. Due to cultural sensitivities and the necessity to retain transparency, Suncor consulted my information design services to develop communications that would be both accurate and cognizant of the existing relationship between the aboriginal population and the corporation. To maximize the impact of the communication, I created an infographic that represented the technical environmental information alongside contextual descriptions and definitions that would allow the audience to understand the information in relation to their existing knowledge. The goal was to retain quality of the information without being overly simplified or complex, within the visual brand of Suncor. The infographic created was successful in communicating the intended information to the audience, opening the dialogue and strengthening community relations and trust between the aboriginal population and Suncor.
Sophia Models Website
client: sophia models international type: web interface industry: fashion
summary Sophia Models is a multi-faceted modelling agency that caters to both the international and local markets. Striving to maintain their status as a premium agency in the modeling industry, Sophia Models needed a website that would showcase the talented individuals and models in the country while providing an easy way for clients, agents and aspiring models to find information easily.
Adapt-Action Usability Testing
“I’m not sure where to go next” - User #5
client: miistakis research institute usability team: ezequiel perdomo & stephanie stobart type: heuristic evaluation & moderated user testing industry: environmental research
summary MIISTAKIS is a research institute dedicated to communicating environmental knowledge to communities so that they can actively support and promote conservation. The Adapt-Action Tool is an initiative that MIISTAKIS has developed to provide municipalities with accessible information in the form of strategies. They wanted to ensure that the tool maximizes their user’s ability to access information quickly and efficiently. As a result, the usability team was commissioned to perform a series of usability testing to provide MIISTAKIS with insight into the effectiveness, efficiency and user satisfaction with the tool.
Heuristic Evaluation
PHASE ONE
Criteria for Evaluation (Jakob Nielsen’s Ten General Principles) 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
Analyzing the Interface
Moderated usability testing refers to evaluating a product or service by testing it with representative users. During a test session, participants try to complete typical tasks while moderators watch, listen and take notes. The goal of this type of test is to identify any usability problems, collect qualitative and quantitative data and determine the participant’s satisfaction with the product.
Process
1
Assess Adapt-Action interface individually and identify violations of Nielsen’s Ten General Principles within the interface
2
Combine findings and review the tool as a design team, identify patterns in observations and determine key usability issues
3
Assess the severity of each issues based on its impact, frequency and persistence on the user’s experience
4
Organize and communicate findings and suggests possible solutions
Sample Issue: Formatting of Navigation Links The lower case formatting of the links in Figure 3. is misleading, as some selections run over multiple lines and make it difficult to determine where selections begin and end. Additionally, Figure 2 and Figure 3 are formatted differently: Figure 2 following sentence case, while Figure 3 utilizes title case.
Test Components - 7 Test Participants - 7 Task Questions - Pre-Test Questionnaire - SUS Questionnaire - Post-Test Questionnaire
PHASE TWO
A heuristic evaluation is a usability inspection method for websites and computer software that helps to identify usability problems in the user interface (UI) design. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles
Moderated User Testing
1
Identified user base and worked with MIISTAKIS to recruit representative users.
2
Set up test tasks, script and determined metrics to be collected
3
Performed user testing with participants using a combination of test components
4
Analyzed collected data and uncovered patterns in behavior, responses and task success
Metrics Collected
Results
Task Completion Measures the users success in completing a task based on a pass or fail system
Through the combination of the heuristic evaluation and moderated user testing, MIISTAKIS was able to identify, through our reports, the most problematic usability issues with their site.
Time on Task The amount of time the user takes to notify the moderator when they believe they have completed the task Confidence Level Measures the users confidence in their success of the task
The usability team reviewed the Adapt-Action interface individually and than combined observations and results to form a master report outlining key findings. By reviewing the interface first as individuals, the design team was able to reduce bias in the results and increase the amount of usability issues identified.
Process
Negative & Positive Reactions Qualitative information that documents the participants reactions during each task
This opportunity has given MIISTAKIS the chance to increase the value of the AdaptAction interface for their shareholders and potentially increase the longevity of their product. Additionally, MIISTAKIS now has a benchmark of usability to aide them in further improving the usability of their website.
Think-Aloud Responses Documented expressions from the user during the task Satisfaction Measures the users satisfaction with their overall experience with the interface
An average SUS score within the range of 81-100 usually indicates minor usability issues with the interface.
Find & Follow Human Centered Design HCD
client: the us. department of state type: human centered design & interactive experience design team: stephanie stobart, ezequiel perdomo,
samantha mclaughlin, dustin paisley
industry: government
summary Within a multi disciplinary team, Design Thinking and Human Centered Design was used to address the specific social issue of Violent Extremism (CVE). Our goal was to address the misconception amongst some people about the Muslim faith and culture. With media coverage often focusing on violence, aggression, and extreme acts of terrorism, the team set out to open a dialogue on the issue and create a counter narrative to challenge those assumptions. This narrative came in the form of ‘Find & Follow’ — an interactive, text-based experience which invited participants to interact with a variety of different installations depicting true aspects of the Muslim faith and culture. The team developed an interactive experience using a text message platform to send location-based clues to participants, directing them to installations that encouraged a range of interactive experiences. Via the text message platform, participants were encouraged to share what they saw and reflect on their thoughts and experiences. The program culminated in participants receiving a representation of their individual path, displayed within the combined contributions of all participants in the form of a tapestry.
PROCESS
H
C
HEAR
CREATE
Defining the Challenge & Defining Knowledge
Opportunities, Solutions and Prototypes
THE CHALLENGE
OBJECTIVE
Muslim radicalization and recent terrorist acts have presented an opportunity for counternarrative. However, there is a significant knowledge gap between populations and minimal safe space for the public to engage in dialogue pertaining to the issue at hand. Our goal is to design the appropriate approach for representing information that is sensitive to current events while highlighting diversity within the Muslim community.
To educate, change perceptions and challenge assumptions about Islamic culture through physical engagement with people, places and histories.
PRELIMINARY RESEARCH According to Human Centered Design methodology, it is important to identify the challenge that the design is trying to overcome. Once the challenge has been identified, the designers than discuss their existing knowledge as well as identifying weaknesses in their knowledge. Finally, talking to the constituents is the key to understanding the population that we are trying to communicate and represent through our design. The plan proposed is the initial steps to planning and implementing our execution of identifying and meeting these people. IDENTIFYING EXISTING
1
2
Identify the Design Challenge
Recognize Existing Knowledge
PILOT DETAILS - CONVERSATION
3
Identify People to Speak with
What do people need or want? - Accuracy of information - A safe environment for discussion - Fairness - Individuals need a human connection. Though statistics and information can be powerful tools, combining a persons experience, a representative of Muslim
Initially the design team wanted to implement an interactive physical experience that took the form of a timeline situated to form a tapestry on the ground. However, through discussion with our constituents, it became clear that this may be offensive to the cause we were representing. As a result, we switched the installation of the path to a digital interaction, similar to a scavenger hunt, allowing us to retain the spirit of our initial concept while accurately retaining accuracy and credibility.
community in this circumstance, with the information at hand will make for a more powerful understanding. - People want to be engaged. Creating a “lived experience� not only encourages participation, it also establishes a baseline of knowledge and increases the likelihood of people taking part in a counter narrative.
The conversation will continue as follows: 1. You will be sent a challenge with coordinates/directions 2. You will take a picture of text back the answer which will be displayed physically in some form (model, text, artifact) 3. If you are correct, you will receive the next question and its location 4. If you are incorrect, you will receive a prompt to try again 5. You will have one hour to complete the challenge once you have accepted
D
DELIVER
Pilot Project and User Journey
“
The world is complex, and so too must be the activities that we perform. But that doesn’t mean that we must live in continual frustration. No. The whole point of humancentered design is to tame complexity, to turn what would appear to be a complicated tool into one that fits the task, that is understandable, usable, enjoyable. - Don Norman
Edward T. Hall Timeline Aa
client: academic type: infographic industry: n/a
summary This visualization outlines the life of Edward T. Hall, a renowned anthropologist and cross cultural researcher. It focuses specifically on how his location, academia and life events affected his discovery, publications and contributions to his field. By organizing and cross referencing his history, connections that may not have been apparent emerged through the reorganization of the information.
Get Vegucated Infographic Aa
client: academic type: infographic industry: nutrition
summary Vegetarians are often questioned on their diet choices and although the information is readily available on the internet and in books, it is scattered across multiple resources. This infographic compiles reputable government and health resources, visualizing them in a way that is easy for users to identify the details behind a vegetarian lifestyle and its potential benefits.
The Process of Information Design Aa
client: academic type: magazine article industry: n/a
summary People often focus on the final product of design however, the finished outcome of a process embodies a methodology that is comprised of planning, iteration, testing and refinement. This article describes components of an information design process through visualization and attempts to help explain why information design is integral to any communication or information challenge. This article was part of collective magazine effort by the graduating class of Information Design 2015
CAKE Mag Logo & Cover Concept Aa
client: academic type: magazine article industry: n/a
summary This logo concept, chosen to be the official logo for the fourth year information design magazine, plays off the idea of a venn diagram and the simple forms of a circular cake. It represent layers of an information designer, the simplification of the complex and the value of transparency in communication. The cover concept takes this idea further by showcasing the ‘layers’ that comprise the abilities of an information designer.
This concept plays off the idea of a venn diagram and the simple forms of a circular cake. it represents layers of an information designer, the simplification of the complex and the value of transparency in communication.
Standard Modern Speakeasy Aa
client: standard modern speakeasy & social club type: design industry: hospitality
summary I was commissioned to provide comprehensive design and marketing materials spanning print & digital mediums. Contracted as a brand director, I conceptualized a redesign of the brand to align with the current nightclub trends for target clientele. As a result, I redesigned and implemented a variety of items such as the website, signage, menus, ad campaigns, social media accounts and event promotions.
Team Alberta Solar Decathlon Aa
client: us department of energy type: signage, print, apparel industry: government
summary The US Department of Energy Solar Decathlon is an international competition where universities plan, design and build a solar home. Team Alberta was comprised of students from U of C and MRU spanning multiple disciplines. My role on the team was a designer within the Communications team. In this role, I collaboratively created a comprehensive visual identity and style guide that expressed the core message and target audience of Borealis, met with printers and negotiated costs for the printing of 10, 000 brochures, designed and printed unique team apparel for team members, faculty and VIP guests and collaborated with Interior Design, Architecture and Engineering team members to develop appropriate signage for interior and exterior use. My team also worked with representatives from Cygnus to determine available materials and printing techniques for the signage installation.
PROCESS Signage Design & Wayfinding The living wall USES
plants ideal for air purificatioN
THE MECHANICAL ROOM CONTROLS AND MONITORS 73
000
TEMPERATURE
Borealis’ design is centered literally and figuratively around the central mechanical room situated in the central module
THE Water heating system 1
The sun heats a solution in the rooftop solar collectors
2
The heated solution is pumped through the heat exchanger in the hot water tank
3
The heat exchanger heats the water in the hot water tank and the solution recirculates back to the rooftop solar collectors, where the cycle continuously repeats. The heated water is now ready for use in the home. SOLAR RAYS
dieffenbachia
spider plants
Instead of dirt, the plants in the living wall are grown in a soilless growth medium.
Water travels along the troughs where it is wicked up into individual plant pots by a device that promotes capillary action.
EXCESS WATER IS CAPTURED AT THE BOTTOM OF THE WALL. NO WATER IS WASTED.
8
3 heat EXCHANGER
Centralization MINIMIZES the distance travelled for systems such as
PLUMBING
Flexibility of the furnishing configuration allows these modules to be modified according to the user’s needs, whether for a
work OR LIVING SPACE.
arrowhead
2
ELECTRICAL WIRING
furniture
COMMONLY USED PLANTS
HELPS CONNECT RESIDENTS TO THE OUTDOORS DURING LONG WINTER MONTHS
heated SOLuTION
HOT WATER TANK
spaces and
Top left - Planning signage placement based on tour route was an important phase of the installation. We needed to be cognizant of the time visitors would spend lined up to enter the house and at what points they would pause or have questions of specific aspects regarding the architecture, engineering, interior design or commercial availability. Bottom left- We began experimenting with acrylic as a primary material for the exterior and interior signage. We had to take into consideration, their exposure to heat, transportability, weight and flexibility. We also considered the transparency of the signs as we wanted to ensure the interior design was not diminished by the signage.
ALL HOUSEHOLD SYSTEMS
ENERGY EXPENDITURE
1
The living wall consists of individual plant modules and an independent water delivery system. This system ensures that the plants can be maintained and removed individually for servicing or replacement.
Flexible interior
HEATING
VENTILATION
The living wall increases overall health and wellness by providing a substantial and spiritual connection to nature.
The layout and connection points of the modules have been carefully considered to minimize interior walls, and maximizing the potential for open space.
Borealis’ clean sleek lines and angular modulAR structure make the house aesthetically pleasing from the inside and out
Right - The final signage designs were printed onto vinyl which was applied to the acrylic blades on-site. Each sign detailed specific information pertaining to its placement in the house.
MALE (TOUR)
FEMALE (TOUR)
Visual Identity & Apparel
CASUAL
Aa
client: calgary retina consultants type: logo design & website industry: medical
summary The Calgary Retina Consultants have been providing the highest standard of retinal care for the last 14 years. Specialising in vitreoretinal surgery and the treatment of all retinal diseases, Calgary Retina Consultants is the largest retina practice in Southern Alberta and among the most respected in Canada. To aid in communicating their practice, they required a uniquely identifiable identity that would set them apart from other local businesses while being cognizant of the special needs of their client base. The goal with their website was to clearly articulate the clients identity and information to patients who may have eye conditions that interfere with reading and colour distinction.
Website Planning
Identity Guidelines
client: smart fuel type: identity & logo design industry: health & nutrition
summary Smart Fuel is a health focused service that provides nutritional consulting, health assessments, advice and resources to a wide variety of clients who are looking to live a more holistic lifestyle. Courtney, the founder, wanted a logo that embodied energy and symmetry through nutrition and its importance to the centre of being and unity.
GROUP 933 HOSPITALITY
client: group 933 hospitality type: logo design industry: hospitality
summary Group 933 is the parent company of restaurants such as 1410 World Bier Haus, Roosevelt and 80th & Ivy. The client required a logo that was flexible, yet still embodied the high end nature of the brand. Potential logo treatments included web, print and signage.
www.s t e p ha nie .s t ob a rt @g ma il.c om www.s t e p ha nie s t ob a rt .c om