Presentation given at OZCHI'09 Industry Case Studies.
This case study reviewed the challenges of developing a style guide (covering both interaction and visuals) to guide the design of future applications. Although the general usage context and audience could be inferred from existing web applications, no specific information regarding future workflows was available. The style guide therefore took the form of a framework that empowers non-UCD experts to design consistent and learnable applications – thereby increasing data integrity, as well as reducing stress and frustration for the end-users.
Design system presentation - How to sell it internallyEugene Kardash
Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience.
This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.
Designing Windows 8 application - Microsoft Techdays 2013Markus Jönsson
Presenting the design and UX paradigms when designing for Windows 8. The presentation is focused around the 5 design principles from the Microsoft design guidelines for Windows 8 applications.
The presentation was performed during the Microsoft TechDays 2013 in Helsinki, Finland by Markus Jönsson & Arturs Polis.
Presentation for graphic design students showing various creative careers in the web business. This acts as an intro for them to explore career choices in designing for the web. Presentation given at Suffolk university on Sept 25, 2009
Most people think that UI/UX designing comes under same category or both are the same. But actually UI refers to User Interface and UX refers to User Experience which are completely different paths. More briefing about those two will be discussed in this presentation.
Swetha Dubbaka is a Visual Designer with good work experience in providing design solutions for a variety of industries. She has good experience in User Interface & Interaction design for Web based applications, Corporate Web sites, Logo designs, Intranet portals using Adobe Photoshop CS, Adobe Illustrator CS, Dream weaver and good familiarity of HTML, DHTML, CSS etc.
Expertise
Creative approach, Client Requirements gathering, Advertising Conceptualization, Brand Development, Photography, Capable of working independently as well as part of a team, good sensitivity on color implementation & Brilliant visualization power.
Responsibilities as a Visual Designer
Implemented user interface designs from conceptualization through prototyping and helping the team until implementation.
Responsible for development of UI design. Works closely with the software developers throughout the development process to refine usability features, such as font size and buttons.
Designing New User Interfaces / concepts based on the requirements.
Played a key role in the design layout of entire web applications.
Sample Engagements:
Website design for Leading Companies
Visual Design Research and Visual Design Concepts
Created unique and brand conscious visual design concepts for their Global Website to improve user experience.
Application design for Leading Companies
Visual Design Research and Visual Design Concepts
Created Master Page layouts and User Controls
GUI design
Touch Screen UI design for Kiosk for Logistics Industry
Mobile and Tablet Apps (Android and iOS)
Other projects include visual designing for multiple projects across platforms and verticals in both: Website and Web Application domains.
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
How front-end can help UX and Back-end guys? How they interact? I tell a little about it in this slides, showing how the front-end can help the back-end and UX.
Case Study: Starting a Design System with MOVUMar High
Using Sketch, Abstract version control, Anima toolkit (flexbox), and InVision. This talk was held at the SHARE NOW offices in Hamburg, as part of the Moinworld design meetup.
There is certain topic discussed in every company: communication between departments.
As FE developers, we sit in between UX designers and BE developers.
Our apps must follow the guidelines from the UX, be compatible with the BE APIs while meeting the business requirements from our POs.
In this presentation I am addressing the relationship between UX and FE devs.
One way to collaborate better with our UX colleagues is to… learn a bit of UX and maybe share some Front End knowledge with them too.
Design system presentation - How to sell it internallyEugene Kardash
Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience.
This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.
Designing Windows 8 application - Microsoft Techdays 2013Markus Jönsson
Presenting the design and UX paradigms when designing for Windows 8. The presentation is focused around the 5 design principles from the Microsoft design guidelines for Windows 8 applications.
The presentation was performed during the Microsoft TechDays 2013 in Helsinki, Finland by Markus Jönsson & Arturs Polis.
Presentation for graphic design students showing various creative careers in the web business. This acts as an intro for them to explore career choices in designing for the web. Presentation given at Suffolk university on Sept 25, 2009
Most people think that UI/UX designing comes under same category or both are the same. But actually UI refers to User Interface and UX refers to User Experience which are completely different paths. More briefing about those two will be discussed in this presentation.
Swetha Dubbaka is a Visual Designer with good work experience in providing design solutions for a variety of industries. She has good experience in User Interface & Interaction design for Web based applications, Corporate Web sites, Logo designs, Intranet portals using Adobe Photoshop CS, Adobe Illustrator CS, Dream weaver and good familiarity of HTML, DHTML, CSS etc.
Expertise
Creative approach, Client Requirements gathering, Advertising Conceptualization, Brand Development, Photography, Capable of working independently as well as part of a team, good sensitivity on color implementation & Brilliant visualization power.
Responsibilities as a Visual Designer
Implemented user interface designs from conceptualization through prototyping and helping the team until implementation.
Responsible for development of UI design. Works closely with the software developers throughout the development process to refine usability features, such as font size and buttons.
Designing New User Interfaces / concepts based on the requirements.
Played a key role in the design layout of entire web applications.
Sample Engagements:
Website design for Leading Companies
Visual Design Research and Visual Design Concepts
Created unique and brand conscious visual design concepts for their Global Website to improve user experience.
Application design for Leading Companies
Visual Design Research and Visual Design Concepts
Created Master Page layouts and User Controls
GUI design
Touch Screen UI design for Kiosk for Logistics Industry
Mobile and Tablet Apps (Android and iOS)
Other projects include visual designing for multiple projects across platforms and verticals in both: Website and Web Application domains.
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
How front-end can help UX and Back-end guys? How they interact? I tell a little about it in this slides, showing how the front-end can help the back-end and UX.
Case Study: Starting a Design System with MOVUMar High
Using Sketch, Abstract version control, Anima toolkit (flexbox), and InVision. This talk was held at the SHARE NOW offices in Hamburg, as part of the Moinworld design meetup.
There is certain topic discussed in every company: communication between departments.
As FE developers, we sit in between UX designers and BE developers.
Our apps must follow the guidelines from the UX, be compatible with the BE APIs while meeting the business requirements from our POs.
In this presentation I am addressing the relationship between UX and FE devs.
One way to collaborate better with our UX colleagues is to… learn a bit of UX and maybe share some Front End knowledge with them too.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
7 Alternatives to Bullet Points in PowerPointAlvis Oh
So you tried all the ways to beautify your bullet points on your pitch deck but it just got way uglier. These points are supposed to be memorable and leave a lasting impression on your audience. With these tips, you'll no longer have to spend so much time thinking how you should present your pointers.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
4. The Hiser Group:
Hiser is an interface design company
3,800 projects
Millions of customers using our designs
5,000 design evaluations with users
3,000 people trained on our courses
500 clients
5. standard |ˈstandərd|
noun
an idea or thing used as a measure, norm,
or model in comparative evaluations
guideline |ˈgīdˌlīn|
noun
a general rule, principle, or piece of advice.
17. The client:
NSW State government agency
Seeking to improve consistency across
in-house built web applications
And to improve data accuracy & integrity
18. The context:
Small team of solutions architects &
developers - no designers
Piecemeal approach to app development
due to changing goals and budget cycles
Legal framework and internal culture
19. The challenge:
To design UI standards & guidelines for
future apps, without being able to apply
and test concepts with an actual app
21. First steps:
Illustration by Renato Feijó - All rights reserved
Understand general characteristics and
attributes of the different user groups
22. First steps:
Illustration by Renato Feijó - All rights reserved
Understand the ways in which the direct
and indirect user groups need to work
with the applications
23. First steps:
Characterize the issues associated with
Illustration by Renato Feijó - All rights reserved
the physical and organisational
environment in which users perform
tasks and identify the implications for
design
24. First steps:
Survey existing apps
Illustration by Renato Feijó - All rights reserved
35. Looking through the design principles lens to envision
Design patterns
Page/screen types
Layout & composition
Typography
Colours
Code modules, etc
36. Illustrations by Renato Feijó - All rights reserved
Design this
to allow the construction
of any of these
37. Defining layout behaviour:
Hybrid: mix of fluid (percentages) and
elastic (based on em units)
html {font-size: 62.5%;}
16 px ÷ 0.625 = 10 px = 1 em
body {font-size: 1.2em; line-height: 2em;}
38. Applying modularity:
(12px)
12px
A 20px
ϕ= 1 + √5 / 2 ≈ 1.618... 20 ÷ 12 = 1.666...
46. Lessons learned:
Designing corporate UI S&G’s without a
sample app is difficult, but well worth it
UI S&G’s are a key piece in helping
organisations move up to the next level
of the usability maturity model (UMM)
ladder
Hi
This case study is about the development of corporate UI standards & guidelines, aka Human Interface Guidelines. Some people also refer to them, wrongly or rightly, as styleguides.
In this project, couldn’t use an existing application - or build a dummy one - to try and test concepts. The resulting styleguide would be applied to future, at that point undetermined applications.
I will talk more about the thinking and the process that happened behind the scenes than the actual resulting document.
My name is Renato Feijó, I’m a Brazilian interaction designer and I have a graphic design and architecture background.
I came to Australia about 3 years ago from Switzerland, where I had the chance to design web sites and applications for a number of global brands (and others not so global).
I work for The Hiser Group, in Sydney. We also have an office here in Melbourne and we are very proud sponsors of this conference.
Standards exist since immemorial times. They are useful to regulate exchanges between people and compare things.
I’d like to do a historical survey of styleguides before digging deep into the details of the project, mainly because many of the ideas and concepts presented in the next few slides informed our decision-making process.
Perhaps the earliest example of a styleguide is Vitruvius book “De Architectura”, aka “The Ten Books of Architecture”.
It gives precise instructions to design and build buildings according to the principles of the Greek and Roman orders.
It also contains precise descriptions of how to harmoniously work out plans and façades compositions using the golden section (or golden ratio)
Vitruvius was an architect, builder, inventor, public administrator, and ballistic engineer. His scope of work went far beyond what today’s architects can imagine.
Here’s him presenting his ideas to Cesar Augustus, with an early version of PowerPoint.
His writings were re-discovered in the Renaissance period, and his ideas influenced a lot of thinkers at that time.
Here’s the famous Da Vinci illustration of the Vitruvian Man, based on what Viruvius thought were ideal human body proportions.
Many of Vitruvius’ ideas are still in use today.
The next important development happened in the industrial era. At that time, furniture-making was a painful and lengthy process for today’s standards, involving complicated joints and intricate carvings to hide those joints.
Michel Thonet, an Austrian cabinet maker, developed a repeatable process for bending wood that allowed him to design lightweight structures. He then had this brilliant idea of parts that could be shipped anywhere in the world, and assembled by anyone.
The chair #14 has celebrated its 150th anniversary and is still sold today, which makes it arguably one of the most successful products of all times.
A cargo box could contain 36 chairs and this concept is the most important design principle at current-day businesses such as Ikea.
Michel Thonet is considered my many design historians as the first industrial designer.
Also worth of mention is the work of Peter Behrens for AEG.
Behrens was commissioned as an external “artist” to look after the design of all AEG products. His scope of work was also astounding: he designed everything for AEG, from buildings to products, through typefaces, logo and posters.
Behrens, an architect by training, was member of the German Werkbund, and stars like Walter Gropius, Mies van der Rohe and Le Corbusier worked for him in their early careers, and his work was highly influential for many generations after him.
Olivetti was among the first firms to understand the importance of unity in design.
From the prewar to the postwar, and beyond, for a long period of time, Olivetti harnessed the genius of multiple designers to deliver on a consistent corporate image.
This is different from the Peter Behrens’ example because there are multiple designers involved, and this is perhaps the first successful example of a corporate identity, which inspired many american business of the postwar, including IBM.
Also worth of note is Le Corbusier’s Modulor, which was his hat-tip to Vitruvius.
What makes this concept important is the notion of human proportions as the starting point of all design considerations.
This was conceived at the early days of human factors as a field of study, after cabin design became critical to airplane engineering during the war.
BMW and Braun were among the first to extend the idea of unity in style across their product range.
In this photo, we can see the same stylistic principles applied through the 3, 5 and 6 series, which led some of the cynical critics to say “Same sausage, three lengths”
Last but not least is Apple’s efforts to develop UI guidelines for all of their products very early in the company’s history.
They basically wrote the book on UI S&G’s
All of those examples helped to frame our minds for this project.
Now let’s see..
The client - who decided to remain anonymous today - came to us with a very clear request: they wanted the “coffee-table” book.
What was intriguing, though, was the need to improve data accuracy and integrity. This, we initially thought, would be hard to address.
Because the organisation is ran according to a precise legal framework, every time that legislations changes, so their systems need to change.
On top of that, an order and command type of culture was not really conducive of positive collaboration between people.
When designing UI S&G’s, it is key to have an existing or dummy application to experiment with and try out concepts.
For reasons beyond our reach, we could not do that: we had to find a workaround.
So, if you are familiar with UCD methodologies, some of the following will be familiar to you.
We first identified user groups and modelled their profiles.
This was a key part of the process, that helped us to identify common tasks and workflows.
These were then synthesised and used to form a matrix mapping to interface elements or design patterns that supported those tasks and workflows.
It was at this stage that we understood what they meant by improving “data accuracy and integrity”. You saw Bill Moggridge’s example of a person trying to buy a drink with her mobile phone: at some point in the middle of the process, she was asked to fill in a form, which had nothing to do with “getting a drink”, the task at hand. My client’s applications had numerous examples of this kind, and people just filled in the forms with whatever data, only to get past that step as quickly as possible.
Understanding the environment in which people perform their tasks, as you know, is also important for informed decision making in UI design.
To identify “design opportunities”, as the jargon says, in our profession.
Wouldn’t it be beautiful if moving from the problem space to the solution space could be done in a straight line?
The reality is that design ideation and experimentation can take you into a rather chaotic route
The best thing to do to avoid going all over the place is to set clear signposts, in other words, to define the key design principles that apply to your project.
In this case, we chose a integrated approach to UI design and looked at three levels of principles at the same time
(UI technology as in the actual UI matter)
These were our key interaction design principles. There are many others around, but those were the most important to our project.
Consistency was a high priority to the client.
Simplicity, was sort of a self-imposed principle - but a very important one nevertheless - because we wanted developers to be able to build easy-to-use applications. Simplicity also applied to the final deliverables - which included code - and, without being patronising or condescending - the whole stuff should be easy for developers to implement.
Graphic design principles were also prioritised.
Finally, we made a list of web design principles. In reality, we helped them to define their accessibility policy well before we started designing.
We also helped them to define their policies defining what could be built using web based technologies and what should be better acquired as off-the-shelf desktop products or hacked in-house, e.g GIS technology
We felt very strong about modularity. At that time, libraries such as YUI and others were in their early days and browser compatibility was - and still is - a big barrier
The typical design process - in most organisations - unfolds as shown.
This is a curiosity, because this waterfall model is the antithesis of the inherently iterative nature of any UCD method.
Important information and knowledge is lost at every milestone and, worse, some key design constraints relevant to people coming next in the line is often overlooked by the people preceding them, which results in more research done late in the process. More research often translates in new data, which creates a basis for challenging design decisions made in the previous step.
Who in this room hasn’t heard a developer say “it can’t be done that way”?
To harness and leverage the knowledge and the experience of the team, we employed an integrated approach to design - not unfamiliar to those versed in agile methodologies.
With this approach, ideation, exploration and selection can be done almost simultaneously across the three design layers. This led to increased speed and, we believe, superior results.
Here’s how it worked:
With our minds framed by our ancestors’ teachings, the knowledge acquired during the research phase, and our professional experience, we looked through our design principles lens to unveil the likely solutions.
We were not designing full-blown applications, or page templates...
At a conceptual level, we were designing all the bits and pieces that allowed for a varied, unexpected, unanticipated number of solutions.
Our building blocks should nevertheless support unity.
What are the building blocks of UIs? Code snippets.
By defining some general rules, we could better support unity and, at the same time, achieve simplicity.
In HTML/CSS, it’s easy to define horizontal rhythm - to create columns, for instance. Vertical rhythm, however, is a different story. Due to poor browser support of the “height” CSS declaration, and the ways that increasing and decreasing text size work in a browser, the workaround consists in determining a line-height.
The layouts should maintain their integrity (without being pixel-perfect) across a variety of screen resolutions and platforms. We therefore used relative units, such as percentages and EMs, instead of pixels to ensure scalability, and we used a trick to get a round EM value.
Here’s how it works: the default font size in all of the mainstream browsers is set to 16px. With the body element declaration, we get a computed font size of 12px and line-height equal to 20px.
So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi)
On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi)
On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi)
On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi)
On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi)
On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi)
On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi)
On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi)
On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi)
On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi)
On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
The baseline grid constitutes the superstructure allowing the various building blocks to click into place...
The baseline grid constitutes the superstructure allowing the various building blocks to click into place...
Thus.
This is a generic screen, that was used as proof of concept and proved to be a nice platform to explain to our client how everything worked.
You can see how the various interface elements align vertically and horizontally, and how they can be ordered side by side, or stacked up one on the top of each other.
Here’s an example of a high-fidelity wireframe of a mapping interface.
Here’s a an actual screen with colour scheme applied. We had 5 different themes, mainly because the client couldn’t agree on a single colour scheme and asked us to develop 5 in total. This turned out to be a good idea, since we could develop at least one high-contrast version for people with visual disabilities. The colour scheme can be changed with the element inside the toolbox.
You can see examples of two visible design patterns: the tab panel (inside the page), which supports non-linear workflows, and the date picker defaulting to today’s date to make the user smarter.
I’m sorry I can’t go into more details of the final outcomes, that’s all I can show you.