How I used 6-8-5 Sketching, User Surveys, and Paper Prototyping and Formative testing to configure an old publishing source to prioritize its users
Why Is Catalyst Important?.
Testing to strengthen a Civic Institutions relationship with the local community it serves. One of my fondest memories, when I was a child, was learning to use the Dewey Decimal System. Since I felt comfortable based on my prior experience using this system, the project brief was easy for me to understand. Now, I am excited to challenge assumptions and find new ways for the library to thrive in the new digital age.
Catalyst, Responsive Web Mobile Design
Role: UX Researcher Fredrick Williams
Timing: 11 weeks, 4 Sprints, InVison, Sketch
Tools: Sketch, InVision, Flinto, Mural, Miro
Category: E-commerce, Educational, Informative, Art Direction
Deliverables: Research, analysis, interviews, persona, affinity diagramming, customer journey map, wireframes + UI kit, prototype
UX Design Process
I. Research / Discovery
6-8-5 sketches
Survey
Competitive Analysis
Testimonials
User Interviews
Affinity Diagramming
Problem Statement
SME Interview
II. Define
Persona
Customer Journey Map
Design Principles
III. Ideate
User Flows
Divergent Design (Paper Prototype)
Mid-fi Wireframes (Divergent Designs)
IV. Test / Prototype
Wireframes Mid-fi Wireframes (Convergent Designs)
My Contribution
As the UX researcher and Co-lead UI designer, I led strategy on how to build empathy for the users: User Interviews, pain point discovery, defined the user behavior, named the persona, and created the first draft of the customer journey map. I designed a Med-fi prototype for the course signup . I also contributed in presenting findings to the team, as well as the navigation between key landing pages. I was also responsible for inspecting the Med-fi design before the final send-off.
I. Research And Discovery
Using UX to to build deep relationships | The Creative Brief
I love relationship building and admire it when institutes go above and beyond to do the same. So I was super excited to be hired to design a product to support the community they serve. In my first action I performed a comparative analysis of eight competitors to define the general architectural pattern of a library system.
[Pictured: 6-8-5 sketches from the project used as part of the testing to validate the final design prototype]
The Meaning of the Library and its Cultural History.
The library is a curated source of materials. It is organized and styled on bookshelves that reflect different things for different people and is the most civic institution dating back to 2600 BC.
58 Participants | Accessibility and their Inclusion at Your Library
58 responses, aged 18-60 plus were surveyed to course-correct the design thinking journey. What we found is 46% use their library website for e-books and media. 41% for book recommendations, and 27% for book chats. We didn't expect to find that 19% use library sites to find out about events happening. But I was glad we did because it showed a disconnect between the library and the community.
Gathering Insights | Competitor Analysis + User Interviews
I admit the more prominent insights didn't come from analyzing the direct competitors. Nothing stood out, and I was still very unclear in a direction. Instead, it was the indirects that were worth notating based on their forward feel. Like LinkedIn, a web-based portal for example. The community is baked in, and with everything under one umbrella, I can see why people would use them for professional services. I found that user’s preferred external channels to access event information. Now, armed with insights from the survey responses and comparative analysis, we needed to talk to the community to find more emotional context. I thought to myself, why isn’t the library reaching their target audience?
[Pictured: Comparative analysis from the project used as part of the testing to validate the final design prototype]
Industry Themes | Facts I Couldn’t Afford To Ignore!
I interpreted this data and concluded our users as resourceful and skeptical. I ran my findings by the team, we agreed, and together we used the nouns for the archetype to brand our user persona.
Design Direction | What are users saying?
Pictured: Affinity Diagram from the user interviews of Catalyst Responsive Web Mobile Design Project
Using 6-8-5 Sketching, User Surveys, and Paper Prototyping and Formative testing to configure an old publishing source to prioritize its users
Thanks, Stephanie | SME Interview
We needed an SME to affirm our proposed design features and confirm the user's feelings. So, the team and I connected with a Children's Librarian at Chicago Public Library. I appreciate Stephanie for lending her voice to the project. After interviewing her we found an institute restricted by budget, void of a standardized way to offer identical resources by location. To me, this meant users needed to travel to different libraries to find what they needed.
“We intend to build a partnership, and at the same time, enrich their lives, and I'd like to think our involvement reflects well in the community.”
— Stephanie L.
Problem Statement
The resourceful skeptic needs skill-building classes and networking resources that are credible, personalized, and streamlined. These indecisive, young, opportunity seekers are looking for tools that allow them to satiate their need for lifelong learning and to expand their opportunities for career paths they are more passionate about.
II. Define
Meet Jeff Greene
After one month of research, we still had work to do. It turns out the participants need access to more updated diverse information. We used the data to create the motivation, goals, and influences for our persona. Say Hi, Jeff! I named him to personify him even more, and to feel closer to him, and connected in a way that operationalizes empathy to champion users like Jeff on a more inclusive path that is accessible and sustainable. But most importantly, HUMAN. Persona or not they're people.
Pictured: User Persona from the user interviews of Catalyst Responsive Web Mobile Design Project
the CX Journey | End-To-End Customer Experience
The customer journey map played an important role in decision-making on the direction that would be rolled out across both the UI design and UX flow of the prototype. I branded out the first layout by creating the first draft of the journey map. The team decided to had it off to Breena for revisions and here's the final. I have more than 20 years of background in client-facing, sales, and advising so it was fairly easy for me to use this and the other artifacts to amplify my part of the product to deliver an effective way to suit the design for the market needs.
Pictured: Customer Journey Map from the user interviews of Catalyst Responsive Web Mobile Design Project
Team Alignment | Design Principles
Design Principles for reflecting value, and to create a pathway to the future, and for all users to feel connected to their library within the community.
III. Ideate
Divergent User Flow | The evolution of the catalyst
I thought about a few ways for the library to foster community-based on an idea of communicating with a core digital technology. Similar to how companies use internal employee intranet systems to distribute communications exclusively to their workforce; and they’ve been used for decades by enterprises for internal communications.
How It Works | Divergently Thinking
Research Goals
I want to make it easier for users to access resources on the go. I’d also like to test the difference between one visit, never returning, or someone engaging.
Determine what people use in the library for professional services
Detect a way to update the library's communication within the community and foster connection with its users
Paper Testing | Users Easily noticed the lack of Intuitiveness in this design
Like any new UX Designer, this is my first time creating a paper prototype. I love the idea and see the valuable insight they provide to UX research. But, not without mistakes. In screen four, I used a filtering option without knowing anything about the user. What I learned is, there were several missing screens to tell the user where to move to next.
III. Ideate (Round 2)
Going back to the Research | what’s the UX solution?
Additionally, the users were turned off by Excel as a pre-populated option. They wanted a menu listing the skill that applied to them. I focused a little heavily on selling the services over the user experience. Since Excel was the only option many searched for a way around it. This decreased engagement. I refined the design with a more recognizable perceivable pattern, so users know what to do. The user flow is much more intuitive. The filtering option makes it easier for a user to know what they're selecting before registering. I received user feedback from users there were too many steps in the initial design to stay engaged.
IV. Test | Prototype
My first lesson | I designed a system beyond the project brief
I revised a shorter sequence that focused more on their user behavior. The user benefits from the delivery of relevant content that doesn't reduce engagement or lower their visibility.
recommended and Explore | Personalization
Courses and explore recommendations improve the site services and suitability to our user's preferences. In return, the user will maintain their original goals to view the products or services.
Filtering | Selecting a Course
The user can ask a question in the form field to define the action the product is asking the take. The user testing shows that participants were confused about what to input here, So here, the ability to ask, makes the user flow less confusing and frictionless.
Scaling with dates | register now, or by month
The design now offers a location, phone number, and link to the site of the library, as well as all upcoming courses for the month. This feature allows the user to scale a course plan for now or for their future needs.
We also decided as a team to use breadcrumbs at the top of the product screen so the user knows where they are in the user sequence.
Additional Screens
If Given More Time, Below Would Have Been The Team’s Next Steps:
Content testing to determine whether the written content is appropriate & suitable for the audience in question, and whether or not they are able to understand & comprehend it.
Lesson Learned
I was still learning how to remove unnecessary features and grasping the concept of intuitive design. What I enjoyed about this project is how it strengthened those skills for me. Making heavy use of UI in the research phase of designing is distracting users. My initial design idea to use drop-down filters didn’t make it into the final design. Nor did the longer sequence. We decided as a team to use a segmented filter to search for input instead. Not only is it useful for saving space, but it also enables them to sort content faster and easier. I will always remember it as a lesson for future projects. So, after three months of research and interviewing, we delivered the mid-fidelity final prototype.