Lorem ipsum dolor sit ameta
Lorem ipsum dolor sit amet consectetur. Sagittis orci ac vitae proin lobo
Lorem ipsum dolor. Sit amet consectetur. Tincidunt nec amet massa pellentesque mauris vitae orciotenti.
-
0 Summary
- 3-min video
- Overview
- Project details
- Feedback
-
1 Background Context
- Context Info
-
2 User Research
- Research study
- Information architecture
- Findings summary
- Personas in action
-
3 Overall UX Solution
& Visual Design- Result
- Before Legacy Software
- After: Redesigned Software
- Visual Design
- Wireframes
-
4 3 Specific UX
Improvements- UX Improvement
- Pre-work that backed
-
5 Results & Reflections
- How the solution was received
- Personal responsibility & teamwork
- FLessons learned
- Conclusion
- Final thoughts from
Summary
Lorem ipsum dolor. Sit amet consectetur. Tincidunt nec amet massa pellentesque mauris vitae orciotenti.
3-min summary video
Busy person’s elevator version
Overview
Context: Lorem ipsum dolor sit amet. Et rerum atque ad quod sint ut quia nemo et aperiam modi et nihil numquam. Sit aperiam accusantium ut repellat culpa eos similique iusto aut eius veritatis aut nihil maiores. Et asperiores modi ut doloremque quis non necessitatibus rerum. Hic internos laborum sed recusandae omnis rem.
Problem
Lorem ipsum dolor sit amet. Et rerum atque ad quod sint ut quia nemo et aperiamm. Lorem ipsum dolor sit amet. Et rerum atque ad quod sint ut quia nemo et aperiam modidrd hgfjfj fgjhfj (1) mentally taxing to use, (2) time-consuming, and (3) error-prone.
UX strategy problem statement:
-
1. Users: Frustrated.
- Lorem ipsum dolor sit amet. Quo aperiam voluptatem eos distinctio corrupti aut adipisci ipsa vel consequuntur voluptas ut labore dolorem At neque repellat. Lorem ipsum dolor sit amet. Quo aperiam voluptatem eos distinctio corrupti aut adipisci ipsa vel consequun.
- Lorem ipsum dolor sit amet. Quo aperiam voluptatem eos distinctio corrupti aut adipisci ipsa vel covnse.
- Lorem ipsum dolor sit amet. Quo aperiam voluptatem eos distinctio corrupti aut adipisci ipsa vel consequuntur voluptas ut labore dolorem Atn.
-
2. Business: Bleeding money
- Lorem ipsum dolor sit amet. Quoaperiam voluptatemm.
- Lorem ipsum dolor sit amet. QuoQuo aperiam voluptatem eos distinctio corrupti autam.
- Lorem ipsum dolor sit amet. Quo aperiam voluptatem eos distinctio corrupti aut adipisci ipsa vel consequuntu voluptas ut labor.
-
3. Software technology: So old
that support for it was fading like everyone’s memory of flipping a floppy disk for more storage.
Problem
Lorem ipsum dolor sit amet. Eos sapiente iusto ea ratione dicta aut rerum quod id placeat rerum id quas dolorem At repellendus velit?
Lorem ipsum dolor sit amet. Eos sapiente iusto ea ratione dicta aut rerum quod id placeat rerum id quas dolorem At repellendus velit? Lorem ipsum dolor sit amet. Eos sapientefgf.
The challenge was clear:
Lorem ipsum dolor sit amet. Eos sapiente iusto ea ratione dicta aut rerum quod id placeat rerum id quas dolorem At repellendus velit? vLorem ipsum dolors.
Problem
Lorem ipsum dolor sit amet. At repellendus velit?Lorem ipsum dolor sit amet. Eos sapientehv.
The UX improvements reduced:
- 1. Loremipsm training time from 6-12 months, to 1-3 months (75% reduction). Ut fugiat magni ex sapiente atque ad amet consequatur Ut fugiat magni ex sapiente atque ad amet consequatur Utmfu.
- 2. Time to complete a task from 20 mins-2 hrs, to 5-45 mins (63%-80% decrease). . Ut fugiat magni ex sapiente atque ad amet consequatm.
- 3. Abc abcdefgeo abcdefge from 28 per shift, to 9 or fewer (68% drop). Ut fugiat magni ex sapiente atque ad amet consequatur Ut fugiat magni ex sapiente atque ad amet on.
IMPACT
Lorem ipsum dolor sit amet lorem ipsum sit
IMPACT
Qui veritatis assumenda ea enim praese
Project details
My role
Senior UX Designer
- Collaboratively led the reinvention of the lorem ipsum design.
- Responsible for driving the design of specific screens, while actively collaborating with the cross-functional team on the overall lorem ipsum experience.
UX team (9+)
- 4 UXDs (including me)
- 1 UX manager
- 1 writer, 1 editor
- 1 research team lead, 1 research director & client liaison
- Various researchers & subject matter experts
Duration
Lorem ipsum dolor sit amet. In consequatur optio qui laudantium accusamus vel saepe reprehende.
Customer
Methods & hard skills I used
Research
- 4 Task analysis (including task model diagrams)
- Developed use case scenarios
- Developed personas
- Stakeholder interviews
- Competitor & industry analysis
Design & prototyping
- Information architecture
- Sketching & wireframing
- Moodboarding
- High-fi prototyping
- UX accessibility
- Visual design
- Interaction design
- Design system
Collaboration, evaluation, iteration
- Storytelling
- Stakeholder feedback sessions
- Design reviews
- Heuristic evaluations
- Usability testing (A/B, guerrilla, & more)
- Cross-functional, multi-disciplinary collaboration
- Version control
Feedback
—Top Leadership, Company Name
— Lorem Customer
—Top Leadership, Company Name
1
Lorem ipsum dolor sit amet consectetur. Lobortis eu eu lacus massa turpis interdumi Idid?
Lorem ipsum dolor sit amet consectetur. Arcu proin purus ut pulvinar quis praesent amet. Orci tristique feugiat nunc faci.
Lorem ipsum dolor sit amet consectetur. Turpis suspendisse commodo dui est neque nunc vitae netus. Pellentesque turpis dui adipiscing felis vel viverra. Morbi arcu quis massa porttitor cum metus vel. Nibh duis blandit sed.
Lorem ipsum dolor sit amet consectetur. Nulla cursus mi eget aenean et. Gravida nullam arcu mi amet pharetra int.
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehen.
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehenderit sed obcaecati du.
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehenderit sed obcaecati du.
Lorem ipsum dolor sit amet consectetur. Eleifend tortor congue quis ultrices facilisi semper. Arcu tempor sagittis sociis turpis urna.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehenderit sed obcaecati ducim.
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehedert.
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehenderit sed obcaecati ducimus sed sapiente exercitationem. Et sunt quibusdam est possimus ipsam in voluptatem sunt ut officiis exped.
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur repr.
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehenderit sed obcaecati ducimus sed sapiente exercitationem. Et sunt quibusdam est poss.
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehenderit sed obcaeca.
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehenderit sed obcaecati ducimus sed sapiente exercitationem. Et sunt quibusdam est possimus ipsam.
Lorem ipsum dolor sit amet consectetur. Eleifend tortor congue quis ultrices facilisi semper. Arcu tempor sagittis sociis turpis urna.
Could Lorem ipsum dolor sit ametm ab? . . .
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehenderit sed obcaecati ducimus sed sapiente exercitationem. Et sunt quibusdam est possimus ipsam in vol.
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur rep.
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehenderit sed obcaecati ducimus sed sapiente exercitationem. Et sunt quibusdam est possimus ipsam in volup.
But here’s the kicker: Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehenderit sed obcaecati ducimus sed sapiente exercitation.
The question was put to us; could our team turn this extremely complex abcdefghi into something that intelligently helped the abcdefghij,and improved their efficiency, but didn’t get in their way?
2
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehenderit sed obcaecati ducimus sed sapien?
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehende.
User research: Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur
Summary:
Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur reprehenderit sed obcaecati ducimus sed sapiente exercitationem. Et sunt quibusdam est possimus ipsam in voluptatem sunt ut officiis expedita est voluptate mollitia? Ex animi nesciunt ut commodi galisum Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatur…Lorem ipsum dolor sit amet. Ab atque aspernatur ut consequatu.
Quick Facts:
8
week user research study
1
Lorem ipsum dolor sit amet. Ab at
4
UX designers abc abcdefghijk
Result: Developed a clear understanding of user needs despite Lorem ipsum dolor.
“Lorem ipsum dolor sit amet. Eos laudantium incidunt sed quia repellat et dolorum delectus et tenetur tempore sed quasi quis. Et quidem recusandae non sequi nostrum qui quisquam quidem et minima dolores et mollitia illo sed iure fuga.Lorem ipsum!”
—Lorem ipsum dolor sit amet. Eos laudantium incidunt sed quia re
The story: user research study
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Information architecture (IA): Lorem ipsum dolor sit amet. Eos laudantium incidunt sed quia repellat et dolorum delectus et tenetur
Summary:
Lorem ipsum dolor sit amet. Eos laudantium incidunt sed quia repellat et dolorum delectus et tenetur tempore sed quasi quis. Et quidem recusandae non sequi nostrum qui quisquam quidem et minima dolores et mollitia illo sed iure fuga.Lorem ipsum dolor sit amet. Eos laudantium incidunt sed quia repellat et dolorum delectus et tenetur tempore sed quasi quis. Et quidem recusandae non sequi nostrum qu.
Quick Facts:
5
days
6
main screens
1
List IA doc
produced
4
designers
Result: Developed a clear understanding of user needs despite Lorem ipsum dolor.
“Liz’s synthesis document became a golden reference for the team throughout the project.”
—UX teammate
Artifacts:
The story: Information architecture
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Summary of the research findings: Lorem ipsum dolor sit amet. Eos laudantium incidunt sed quia repellat et dolorum delectus et tenetur tempore sed quasi quis. Et quidem
Summary:
Lorem ipsum dolor sit amet. Eos laudantium incidunt sed quia repellat et dolorum delectus et tenetur tempore sed quasi quis. Et quidem recusandae non sequi nostrum qui quisquam quidem et minima dolores et mollitia illo sed iure fuga.Lorem ipsum dolor sit amet. Eos laudantium incidunt sed quia repellat et dolorum delectus et tenetur tempore sed quasi quis. Et quidem recusandae non sequi nostrum qui quisquam qui.
Quick Facts:
34
powerful slides
10 task model diagrams,
5 use case scenarios
5
cross-
functional
teammates
collaborating
1
successful catalyst
Result: Turned research findings into a roadmap that influenced design decisions
“Liz’s synthesis document became a golden reference for the team throughout the project.”
—UX teammate
Artifacts:
The story: research slide deck
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Personas in action: Collaboratively crafted research-based personas to help guide our user-centered design process, and demo our UX solutions
Summary:
Quick Facts:
3
months
4
personas
~80%
of demos
Artifacts:
Meet your UI walkthrough tour guide: Persona Lorem ipsum dolor
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
3
Overall UX Solution & Visual Design (XX min read)
Made lorem ipsum interfaces, using lorem ipsum abc-de lorem aesthetics (lorem ipsum dolor sit amet non rerum voluptatem est fugi!)
Result
Lorem ipsum dolor sit amet. Eos sapiente ipsam in architecto obcaecati quo enim omnis et omnis repudiandae esto.
Lorem ipsum dolor sit amet. Eos sapiente ipsam in architecto obcaecati quo enim omnis et omnis repudiandae est rerum praesentium sed numquam sapiente et necessitatibus aperiam. Lorem ipsum dolor sit amet. Eos sapien:
approx.
75%
Reduction in Training Time
Before:
Legacy system
6–12 months
After:
Redesigned system
1–3 months
The legacy system took up to 12 months for Lorem ipsum dolor sit amet. Eos sapiente ipsam.
The redesign system was estimated to take up to 3 months to learn (~75% less).
The backstory behind this result:
Before: Legacy Software
Lorem ipsum dolor sit amet. Eos sapiente ipsam in architecto obcaecati quo enim omnis et omnis repudiandae est.
Lorem ipsum dolor sit amet. Eos sapiente ipsam in architecto obcaecati quo enim omnis et omnis repudiandae est rerum praesentium sed numquamm.
(*The actual software screens were classified, and I never saw them, so this is just a representation of them, based on how they were generally described in the sanitized research data. So none of this shown is classified at all.)
After: Redesigned Software
Lorem ipsum dolor sit amet. Eos sapiente ipsam in architecto obcaecati quo enim omnis et omnis repudian. It included contemporary GUIs for:
1) Placeholder Text
2)
Alpha
Viewscreen
3)
Unit
Handler
4) Guidance Connector
5) Timesheet Chronozo
6) Correspo ndence Bet
Lorem ipsum dolor sit amet. Ut velit officia qui esse nobis a itaque voluptatibus At galisum quam est omnis magnam ut ipsa velit qui expedita error. Eos architecto vero quii lorem ipsum dolor sit amet. Ut velit officia qui esse nobis a itaque voluptatibus At galisum.
Lorem ipsum dolorlor Lorem ipsum dolor sit amet. Ut velit officia qui esse nobis a itaque voluptatibus At galisum quam est omnis magnam ut ipsa velit qui expedita error. Eos architecto vero qui omnis nobis qui officiis corporis ea illo obcaecati Lorem ipsum dolor sit amet. Ut velit officia qui esse nobis a itaque voluptatibus Atg.
The first thing that’s noticeable is the visual styling:
Lorem ipsum dolor sit amet. Eos laudantium incidunt sed quia repellat et dolorum delectus et tenetur tempore sed quasi quis. Et quidem rec.
Summary:
Quick Facts:
4
strong visual designers
1
mood board
1
style guide
100%
satisfaction
Key Outcomes:
Worked out consistency issues
Aligned esign with client’s needs & preferences
Differentiated from competitors
Artifacts:
Behind the scenes of a wild visual design journey: Mood board, inspiration audit, competitive research, industry analysis, and style guide later turned design system
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Early working style guide (a sampling),
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lessons learned, en route
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Worked out consistency issues
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem ipsum dolor sit amet. Eos laudantium incidunt sed quia repellat et dolorum delectus et tenetur tempore sed quasi quis. Et quidem rec.
Summary:
Lorem ipsum dolor sit amet. Et doloribus Quis qui commodi eius sed laboriosam reiciendis et consectetur fuga hic voluptate voluptas? Ex illum neque non ratione officiis sed debitis sequiLorem ipsum dolor sit amet. Et doloribus Quis qui commodi eius sed laboriosam reiciendis et consectetur fuga hic voluptate voluptas? Ex illum neque non ratione officiis sed debitis sequiLorem ipsum dolor sit amet. Etdolor.
Quick Facts:
30+
wireframe sketches
1 2
iterations
1
stakeholders& teammates
100%
of user needs
Key Outcomes:
Worked out consistency issues
Aligned esign with client’s needs & preferences
Differentiated from competitors
Artifacts:
Behind the scenes of a wild visual design journey: Mood board, inspiration audit, competitive research, industry analysis, and style guide later turned design system
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Early working style guide (a sampling),
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lessons learned, en route
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Worked out consistency issues
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
4
Overall UX Solution & Visual Design (XX min read)
Explore three targeted UX improvements I designed for Lorem ipsum dolor sit amet. Ex saepe autem eos nemo nostrum rem saepe corpo
UX IMPROVEMENT
#1
Reimagined lorem Ipsum : Replaced trial-and-error lorem with advanced UI solutions for precision and speed, catering to both expert and novice users
Before
After
UX IMPROVEMENT
#2
Elevated the UX with thoughtful accessibility, turned constraints into opportunities, and made color-coded UIs color-independent
Before
After
UX IMPROVEMENT
#3
Before
After
#2
Specific UX Improvement: Lorem ipsum dolor sitme (XX min read)
Elevated the UX with thoughtful accessibility, turned constraints into opportunities, and made color-coded UIs color-independent
Results
from this UX improvement
Proactively ensured UI accessibility compliance without being asked
Thus future-proofing the design to be inclusive from the start and avoiding costly redesigns later.
Increased inclusivity with accessible visuals and flexible controls
Such as using eye-friendly tones, and multiple modes, to reduce operator errors and improve comfort.
Maintained operator efficiency with familiar color-coding
Thus reducing re-training needs in that aspect, and smoothing the transition to the new color system.
Balanced styling with accessibility to meet both visual and functional needs
Such as using shape-based indicators and contrast adjustments.
The backstory behind these results:
Before & After: Software Design
Legacy software
Example of accessibility issues:
Legacy software
Example of accessibility issues:
Before & After: Human Impact
Legacy software
Accessibility issues led to:
Redesigned software
Accessibility solutions resulted in:
Before: Pain Points
The legacy software was very outdated, and because of its age, it did not follow many accessibility (or usability) standards.
The Tough Problem (in 2 sentence)
After: Solutions
The answer:
Accessibility does not make a product ugly, boring, or non-innovative. Rather, it presents design constraints that lead to a better product for all users.
My thought process:
My solution:
With that, I designed the new UI to follow the WCAG (Web Content Accessibility Guidelines). I wanted to ensure that if or when this went through a <123456 12> test process, anything that I had control over with the design, was designed accessibly to the best of my ability at the time.
Example: Specifically how I turned jarring color-coded interfaces into easy, color-independent ones
People really liked, and were used to, the color-coding in the legacy system. For example, on the schedule:
- Blue = Lorem ipsum dolor sit amet.
- Yellow = Lorem ipsum dolor sit amet.
- Red = Lorem ipsum dolor sit amet.
Backed by that research, I made the design
decision to…
- Used comfortable tones
I used more comfortable tones of the colors, not the pure RGB versions, and ensured they were contrast-compliant with all of their possible backgrounds.
Blue
Cyan Blue
BluYellowe
Warm Yellow
Red
Legible Red
- Prevented visual “screaming”
To prevent the colors from screaming, I didn’t use solid fills on the blocks. On the interface, there are 16+ rows, so that means an average of 30 colored blocks are shown at any given time. When they’re all colored solid that not only makes the UI look wild, but as we all know, when everything is jostling to stand out, nothing is standing out.
Examples of solid-filled blocks:
Examples of solid-filled blocks:
#
#
#
#
#
#
- Ensured that the color coding was colorblind-friendly
To achieve this, I added shapes to accompany each status color change. This ensures that if an , current or future, is colorblind or gets colors transposed (e.g., red and green), the UIs will remain usable and not the culprit of errors.
5.76
5.76
Blue + vertical bar = Lorem ipsum dolor sit amet.
5.76
5.76
Yellow + corner triangle = Lorem ipsum dolor sit am.
5.76
5.76
Red + arrowhead triangle = Lorem ipsum dolor sit.
- Color-dependent design
Shown in grayscale, simulating the most severe colorblindness:
Demo
Arm 2 Schedule
03:45 - 04:00
1.00
5.76
5.76
5.76
What’s the status of each of these task blocks? (You can’t tell.)
Now shown in color:
Arm 2 Schedule
03:45 - 04:00
1.00
5.76
1.06
2.07
Statuses are indicated by different colors. Aside from that, all task blocks share the same shape structure. (Not good.)
- Color-independent design
Shown in grayscale:
Arm 2 Schedule
03:45 - 04:00
1.00
5.76
5.76
5.76
Thanks to unique shapes, the status of each task is distinguishable.
Now shown in color:
Arm 2 Schedule
03:45 - 04:00
1.00
5.76
1.06
2.07
Color is no longer the sole signifier of the visual information.
Color is no longer the one and only signifier. If an person cannot distinguish a color, the shape is the primary signifier that communicates the task’s status.
(Even without a diagnosed medical disability, everyday situations can affect a person’s abilities. When someone uses a blue light filter on their screen it changes the appearance of blue-toned colors, creating a situational challenge similar to a color vision deficiency. This is just one of countless examples.)
Result
See other UX improvements:
UX IMPROVEMENT
#1
Reimagined lorem Ipsum: Replaced trial-and-error with advanced UI solutions for precision and speed, catering to both expert and novice users
UX IMPROVEMENT
#2
Elevated the UX with thoughtful accessibility, turned constraints into opportunities, and made color-coded UIs color-independent
UX IMPROVEMENT
#3
Enhanced situational awareness: Going from 2D awareness and juggling 12 monitors, to now having 4D awareness all on one bar
#1
Specific UX Improvement: Lorem ipsum dolor sitme (XX min read)
Reimagined lorem ipsum : Replaced trial-and-error with advanced UI solutions for precision and speed, catering to both expert and novice users
Results
from this UX improvement
Lorem ipsum dolor sit amet. Aut voluptates adipisci ea quia ullam aut dicta eligendi qui
Lorem ipsum dolor sit amet. Aut voluptates adipisci ea qm reducing XYZ XYZYXZY ABCABC by 68% Lorem ipsum dolor sit amet. Aut voluptates adipisci ea quia ullam au.
Qui minima omnis sit expedita amet a ipsam optio qui fu
Lorem ipsum dolor sit amet. Aut voluptates adipisci ea quia ullam aut dicta eligendi quiLorem ipsum dol, resulting in the system being easier for all users to operate quickly and contributing to the 75% reduction in training time (from 6–12 months to 1–3 months.)
Et magni quaerat sit fugit reprehenderit est laboriosam cumque et tempore impedit et totam voluptat
“Quick actions” positioned at the point of interaction, plus keyboard shortcuts, enable faster workflows with fewer clicks. Less reliance on deep dropdowns improves comfort and speed. By providing only what’s needed when and where it’s needed, the design enhances focus and eliminates side quests to find things.
Nam facere minus nam dolores natus aut molestias corporis sed natus quis non quibusdam error. Ut unde tem
Lorem ipsum dolor sit amet. Aut voluptates adipisci ea quia ullam aut dicta eligendi quiLorem ipsum dolor sit amet. Aut voluptates adipisci ea quia ullam aut dicta eligendi quiLorem ipsumm. Reduced basic tasks from 15-20 mins to 3-5 mins, (and complex tasks from 2 hours to now 45 minutes).
Lorem ipsum dolor sit amet. In quaerat repellat ad totam officia sed voluptas repellendus non quia fa.
Highest-Impact Result
Time to complete XYZ 123456789:
Lorem ipsum dolor sit amet. In quaerat repellat ad totam officia sed voluptas repellendus non quia facer?
The backstory behind these results:
Before: Pain Points
Manual, labor-intensive, and error-prone processes. (Representative image)
Lorem ipsum dolor sit amet. In quaeratpe
Low-fidelity, faulty, and untrustworthy “XYZXYZ 1234567”.
Impact? Jeopardized safety, and caused missed XYZXYZ and XYZYXZ.
Non cumque voluptatem re
Tedious manual input of XYZXYZ XYZXYZYXZ.
High cognitive load
Non cumque voluptatem rem veritatisNon cumque voluptatem rem veritatisNon cumque voluptatem.
The Tough Problem (in 1 sentence)
After: Solutions
Lorem ipsum dolor sit amet in quaeratpe lorem ipsum dolor.
Lorem ipsum dolor sit am
33 voluptas magni et quia facilis qui harum ipsa sed aperiam voluptas non expedita dolo.
Non cumque volupta
33 voluptas magni et quia facilis qui harum ipsa sed aperiam voluptas non expedita dolor in ducimus.
High cognitive load
33 voluptas magni et quia facilis qui harum ipsa sed aperiam voluptas non expedita dolor in ducimus de.
4 specific UX improvements I designed and their impacts
Lorem ipsum dolor sit amet. Et beatae iure eum quaera:
- Lorem ipsum dolor sit am
Result: Et maiores itaque aut repellat rerum non mollitia labore at maiores itaque aut repellat rerum non mo
Lorem ipsum dolor sit ametm
Ea obcaecati Quis sed itaque magnam ex quis nihil. Eum fugiat expedita vel rerum adipisci ut necessitatibus enim est molestias sequi eos obcaecati galisum et perspiciatis placeat et mollitia beatae. Est beatae esse et sunt ipsa est quos aliquam et nisi pariatur ut velit natus rem animi ipsam 33 optio modi.Ea obcaecati Quis sed itaque magnam ex quis nihil. Eum fugiat expedita vel rerum adipisci ut necessitatibus enim est molestias sequi eos obcaecati galis. “The system does not give any indication of how much room is left,” according to operators.
Pain point:
“Safety is a constant concern [for people ].”
—Researcher shadowing operators
Impact:
- Significantly improved safety and user satisfaction.
- Considerably increased lorem ipsum.
- Reduced errors and improved task accuracy.
- Lorem ipsum dolor sit amet sit ve
Pain point:
—Researcher shadowing operators
Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adipisci dolorum 33 prae:
- Lorem ipsum dolor sit amet. Sed obcaecati assumendami
- Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderi
- Lorem ipsum dolor sit amet. Sed obcaecati assumenda quiirit
Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adipisci dolorum 33 praesentium illo id.
Impact:
- Significantly improved safety and user satisfaction.
- Considerably increased lorem ipsum.
- Reduced errors and improved task accuracy.
- Sit quas animi aut harum simil
Operators complained that the system had “far too many embedded tree menus and dropdowns.” Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adipisci dolorum 33 praesentium illo id voluptatem tempora eos quisquam repudiandae? In laborum neque vel placeat officia sit quaerat velit est nostrum possimus 33 dolores mollitia hic impedit omnis sit ullam deleniti. Qui v.
Pain point in user’s words:
—Operator
Advantages of a circle menu (aka radial/pie menu)
- Fitts’ Law and faster selection – Fitts’ Law states that the time it takes to hit a target depends on the target size and distance. In circle menus, all options are the same distance from the center, minimizing mouse movement time and making them faster than dropdowns for high-frequency actions. (NN/g analysis)
- Muscle memory benefits – The circular arrangement allows users to develop muscle memory for frequently used options, speeding up interactions over time while reducing errors.
- Better ergonomics – Less mouse movement lowers strain, making interactions more comfortable and reducing fatigue over long sessions.
- Space-efficient design – The circular layout takes up less screen space than dropdowns or rectangular menus, making it ideal for compact interfaces and reducing visual clutter.
Impact:
- Significantly improved safety and user satisfaction.
- Considerably increased lorem ipsum.
- Reduced errors and improved task accuracy.
- Ex recusandae nisi nam porro tempora sit delenitim
Result: Sit quas animi aut harum similique quo explicabo dolorem aut consequatur soluta ids
Plus: Sit quas animi aut harum similique quo explicabo dolorem aut consequatur soluta id impedit consequuntur sit quas animi autm
- Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adipisci dolorum 33 praesentium illo
- Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adipisci dolorum 33 praesentium illo id volupt
- Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adipisci dolorum 33 praesentium illo id voluptatem tempora eos quisquam repudiandae? In laborum neque vel placeat officia sit quaerat velit est nostrum possimus 33 dolores mollitia hicm “Going by the book does not work well. It is too slow,”said one operator.
- Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adipisci dolorum 33 praesentium illo id voluptatem tempora eos quisquam repudiandae? In laborum neque vel placeat officia sit quaerat velit est nostrum possimus 33 dolores mollitiam, “Sometimes we have to move a lot of xy around, and there are a lot of ripple effects,” commented one operator.
Pain point in user’s words:
—Operator
Operators aren’t required to memorize lorem.
- Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adipisci dolorum 33 praesentium illo id voluptatem tempora eos quisquam repudiandae? In laborum neque vel placeat officia sit quaerat velit est nostrum possimus 33 dolores mollitia hic impedit omnis sit ullam deleniti. Quimm.
- Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adipisci dolorum 33 praesentium illo id voluptatem tempora eos quisquam repudiandae? In laborum neque vel placeat of.
- Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adipisci dolorum 33 praesentium illo id voluptatem tempora eos quisquam repudiandae? In laborum neque vel placeat officia sit qua.
- Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adipisci dolorum 33 praesentium illo id voluptatem tempora eos quisquam repudiandae? In laborum neque vel placeat officia sit quaer.
Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adipisci dolorum 33 praesentium illo id voluptatem tempora eos quisquam repudiandae? In laborum neque vel placeat officia sit quaerat velit est nostrum possimus 33 dolores mollitia hic impedit omnis sit ull.
Lorem ipsum dolor sit amet. Sed obcaecati assumenda qui reprehenderit debitis hic adi?
Impact:
- Significantly improved safety and user satisfaction.
- Considerably increased lorem ipsum.
- Reduced errors and improved task accuracy.
See other UX improvements:
UX IMPROVEMENT
#1
Reimagined lorem Ipsum: Replaced trial-and-error with advanced UI solutions for precision and speed, catering to both expert and novice users
UX IMPROVEMENT
#2
Elevated the UX with thoughtful accessibility, turned constraints into opportunities, and made color-coded UIs color-independent
UX IMPROVEMENT
#3
Enhanced situational awareness: Going from 2D awareness and juggling 12 monitors, to now having 4D awareness all on one bar
#3
Specific UX Improvement: Lorem ipsum dolor sitme (XX min read)
Enhanced situational awareness: Going from 2D awareness and juggling 12 monitors, to now having 4D awareness all on one bar
Lorem ipsum dolor sit amet. Ut porro repellat qui voluptatem dolor id nesciunt officiis ad sunt explicabo qui commodi quod. Cum tenetur dolor qui.
Results
from this UX improvement
Improved task prioritization and completion rates
Lorem ipsum dolor sit amet. Ut porro repellat qui voluptatem dolor id nesciunt officiis ad sunt explicabo qui commodi quod. Cum tenetur dolor qui rerum sequi At necessitatibus veniam aut numquam eius.
Lorem ipsum dolor sit amet. Ut porro repellat qui voluptatem dolor
Lorem ipsum dolor sit amet. Ut porro repellat qui voluptatem dolor id nesciunt officiis ad sunt explicabo qui commodi quod. Cum tenetur dolor qui rerum sequi At necessitatibus veniam.
Upgraded situational awareness
Lorem ipsum dolor sit amet. Ut porro repellat qui voluptatem dolor id nesciunt officiis ad sunt explic.
Lorem ipsum dolor sit amet. Ut porro repellat quimm
Lorem ipsum dolor sit amet. Ut porro repellat qui voluptatem dolor id nesciunt officiis ad sunt explicabo qui commodi quod. Cum tenetur dolor q.
The backstory behind these results:
Before: Pain Points
Lorem ipsum dolor sit amet. Ut porro repellat qui voluptatem dolor id nesciunt officiis ad sunt explicabo qui commodi quod.
Lorem ipsum dolor sit amet. Ut porro repellat qui voluptatem dolor id nesciunt officiis ad sunt explicabo qui commodi, Lorem ipsum dolor sit amet. Ut porro repellat qui voluptatem dolor id nesciunt officiis ad sunt explicabo qui commodi quod. Cum tene.
The Tough Problem (in 1 sentence)
After: Solutions
Lorem ipsum dolor sit amet. Ut porro repellat qui voluptatem dolor id nesciunt officiis ad sunt explicabo qui commodi quod. Cum tenetur dolor qui rerum sequi At necessitatibus veniam.
Lorem ipsum dolor sit amet. Ut porro repellat qui voluptatem dolor id nesciunt officiis ad sunt explicabo qui commodi quod. Cum tenetur dolor qui rerum sequi At necessitatibus veniam aut numquam eius vel fuga aspernatur a asperiores consecte.
Research-driven improvements: Used interview transcripts, researchers’ notes, and feedback to drive design decisions—(e.g., the priority of what content to put on the situational awareness bar, where, and how)
Summary:
Quick Facts:
6
disparate data points consolidated
7
iterations
XX
situational awareness
Key Outcomes:
Integrated cross-functional feedback
Aligned evolving design strategies
Reduced friction in user flows
Example: Specifically how I turned jarring color-coded interfaces into easy, color-independent ones
The situational awareness bar on the interface displays:
- Lorem & ipsum
Lorem ipsum dolor sit amet. Et beatae iure eum quaerat atque ea totam quia. Id facilis consectetur est quam enim hic placeat consequatur cum nihil magni est internos Quis. Qui temporaspiciat.
- Lorem & ipsum
Next Lorem ipsum dolor sit amet. Et beatae iure eum quaerat atque ea totam quia. Id facilis consectetur est quam enim hic placeat consequatur cum nihil magni est internos Quis. Qui tempora perspiciatis et quis ratione sit eaque nobis et.
Pre-work that backed up my design decisions:
- Lorem
Pre-work that backed up my design decisions:
Lorem ipsum dolor sit amet et beatae iu!
See other UX improvements:
UX IMPROVEMENT
#1
Reimagined lorem Ipsum: Replaced trial-and-error with advanced UI solutions for precision and speed, catering to both expert and novice users
UX IMPROVEMENT
#2
Elevated the UX with thoughtful accessibility, turned constraints into opportunities, and made color-coded UIs color-independent
UX IMPROVEMENT
#3
Enhanced situational awareness: Going from 2D awareness and juggling 12 monitors, to now having 4D awareness all on one bar
Interaction and ergonomic design: Lorem ipsum dolor sit amet. Vel repudiandae perspiciatis sit molestiae aliquid non esse quas in odio quia a consequatur impedit. Sit molestiae odit hic voluptate consequuntur et dolor animi quo dol.
Considered
a wide range of hardware interaction options
Explored big(innovation-seeking) ideas with the team
Lorem ipsum dolor sit amet. Vel repudiandae perspiciatis sit molestiae aliquid non esse quas in odio quia a consequatur impedit. Sit molestiae odit hic voluptate consequuntur et.
The story: Interaction/ergonomic design considerations
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
IUsability testing and review meetings: Identified task-specific needs, which informed adaptable controls
Discovered
through usability testing that...
Learned that, despite my initial assumptions...
The story: Insights from usability testing and reviews
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
Collaboratively
wrote scenarios
Stepped into the operators’ shoes (figuratively)
The story: How I utilized use case scenarios
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
5
Overall UX Solution & Visual Design (XX min read)
Lorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debiti?
Result
Lorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque nonm:
Lorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint es
Lorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint es
How was the redesign of XYZ received?
The abcdef customer was absolutely blown away; saying that our approach was unlike that of any other contractors they’d worked with.
They were impressed with the comprehensive user research behind our UX design work.
They praised how we translated all the interviews and observations into intuitive interfaces.
Lorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque non delectus eligend!
Lorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque noni.
Lorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque non delectus eligendi sed blanditiis voluptatem qui aliquam accusantmm.
Personal responsibility & teamwork
I have a strong sense of personal responsibility for the work I do.
I put everything I can into making my work as amazing as possible.
But, teamwork was truly vital.
This success would not have been possible without the incredible teamwork and collaboration of my co-workers and stakeholders.
I am grateful for the opportunity to collaborate with such a talented, supportive, and trusting team.
I think that trait is what allowed me topower through the uncertainty to figure out the root problems to solve.
Then put pencil to paper to solve them.
I believe that feedback is a gift.
Lessons I learned
I grew as a designer by being pushed to solve complex UX challenges that had never been publicly solved before Lorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque non delectus eligendi sed blanditiis voluptatem qui
For any forms of testing you want to do (e.g., accessibility, etc.), you have to do them along the way (as heart-pounding as that sounds considering you’re already staring down the barrel of the deadline). But there will not be time “at the end.”
I learned that I have a knack for asking questions off-the-cuff. This happened during a later evolution of when I joined a 3-day, unscripted, user interview session in San Diego to help another team’s UXer, . I thought I’d just be his note-taking sidekick (I had no interview training), but by the end, said he couldn’t have done it without me. He told my boss I was incredible at asking the right questions on the fly, engaging with interviewees, and asking smart follow-ups. “Liz had an uncanny ability to get down to the root of what the person knew and thought.” —, UXer from another team, in an email to my boss
Lorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque non delectus?
Lorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque non delectus eligendi sed blanditiis voluptatem qui aliquam accusantium At doloremm.
It was due to that monumental that I had the privileged opportunity to design something that would empower teams across the globe to expertly manage, and successfully complete, their most ambitious .
Final thoughts from others
Our Lorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque non delectus eligendi sed blanditiis voluptatem qui aliquam accusantium At dolorem quia et quas autem. Ut officiaLorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque non delectus eligendi sed blanditiis voluptatem qui aliquam accusantium At dolorem quia et quas autem. Ut officiaLorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque non delectus eligendi sed blanditiis voluptatem qui aliquam accusantium At dolorem quia et quas autem. Ut officiaLorem ipsum do.
—Manager of the UX team (my boss),
The Lorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque non delectus eligendi sed blanditiis voluptatem qui aliquam accusantium At dolorem quia et quas autem. Ut officiaLorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minuLorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque non delectus eligendi sed blanditiis voluptatem qui aliquam accusantium At dolorem quia et quas autem. Ut officiausantium At dolorem quia et quas autem. Ut officiaLorem ipsum dolor sit amet. Eum molestiae excepturi id ullam sint est veritatis debitis? Qui minus doloremque non delectus eligendi sed blanditiis.