kleindesigned logo
[recent work.]
[recent work.]

A redesign for the Documents Hub feature focusing on enhancing the user experience using UX design methods and implementing user-centred solutions to improve usability, clarity, and overall user satisfaction.

[ ui design. ]

The Challenge

To understand the users' needs and preferences and identify pain points and areas of improvement to increase engagement and drive conversations.

The Actions

Preparing for the project

Please note: Although there are limited images or data shown due to confidentiality, my design process, the way I think and how I work is seen throughout the project.

During the preparation for this project I collaborated closely with various teams. I held workshops with the design team to brainstorm ideas and define the project goals. I met with the website team to understand the technical feasibility of different design approaches. Discussions with the marketing team also ensured the redesign was on brand. The product team provided valuable insights into user needs and current functionalities. To keep everyone aligned, I documented the project goals, requirements, and analysis. I also created Miro boards to facilitate brainstorming during workshops and drafted an interview plan to gather user feedback.

Tasks
  • Collaborated with stakeholders across design, website, marketing, and product teams.
  • Defined project goals and scope.
  • Conducted research through user interviews and website analytics.
  • Prepared documentation outlining project goals and user research findings.
  • Created Miro boards for workshops.
  • Developed interview plans for user research.

Research

I focused on gathering a comprehensive understanding of the website as well as the competitive landscape. This involved analysing existing customer surveys and research to identify user pain points and website performance. I conducted a competitor analysis to see how similar companies addressed user needs on their websites. I performed desktop research to learn more about the website and it's functionality. I also researched trends and best practices for designing website pages.

Tasks
  • Analyse existing customer surveys and research data.
  • Conduct competitor analysis.
  • Review website analytics to assess user behaviour and page performance.
  • Perform desktop research.
  • Identify user needs and pain points.

User testing early wireframe design of the new page layout
User testing early wireframe design of the new page layout

Analysis

I focused on synthesising the research findings from the discovery stage using Miro boards to create affinity maps, grouping related user needs, competitor insights, and survey data to identify key themes and user pain points. To understand user expectations for information architecture and navigation, I conducted tree testing. This involved presenting users with a hierarchical structure of the website content and observing their success in finding specific information. The results of these activities helped with the project goals and define the user flow for the redesigned webpage.

Tasks
  • Analysed research data from the discovery stage.
  • Used tools like Miro to create affinity maps and identify user needs and pain points.
  • Conducted tree testing to understand user expectations for information architecture and navigation.
  • Defined project goals and user flows for the redesigned webpage.
  • Prioritised design features based on user needs and project goals.

Design

I started by sketching potential layouts or wireframes that gave me a basic blueprint of the page structure. This was shared with various teams for feedback. To ensure the design met user needs, I used Adobe XD to create low-fidelity prototypes. These were simple, clickable mockups that allowed me to conduct usability testing with users and identify any potential issues with navigation or information hierarchy. Finally, based on the testing results and further refinement, I created high-fidelity mockups in Adobe XD.  These incorporated visual design elements, branding, and interaction features, providing users with a realistic experience of the redesigned webpage.

Tasks
  • Created initial sketches to brainstorm layouts.
  • Developed wireframes to communicate the basic page structure.
  • Designed low-fidelity prototypes for testing with users.
  • Iterated on the design based on user feedback and testing results.
  • Created high-fidelity mockups with visual design and interaction elements.

Report & Presentation

I focused on ensuring a smooth transition from design to development. I used the comprehensive style guides and asset libraries for the website team, specifying design elements, fonts, and colours for consistent implementation. The content team received the redesigned wireframes for content population. To communicate the project's rationale and impact, I prepared a final report outlining the research findings and design decisions. I also presented the redesigned webpage to key stakeholders, addressing their questions and securing final approval before development began.

Tasks
  • Collaborated with the content team on content population and messaging.
  • Prepared a final report outlining research findings and design decisions.
  • Presented the redesigned webpage to stakeholders and addressed feedback.
  • Ensured a smooth handoff for development.

Learnings and challenges

While valuable, coordinating diverse perspectives from various stakeholders presented a challenge in ensuring everyone was aligned with the project vision. I was lucky to have a supportive team who helped me through this. Identifying technical limitations early in the process was very important and I will make sure that these discussions are always had at the beginning of any project. The technical limitations definitely impacted design decisions.

Analysing existing customer surveys was valuable, but there were challenges in accessing and interpreting the data. Incomplete information or lack of specific questions limited the insights. This highlighted the importance of creating clear, targeted surveys in the future. Competitor analysis, however, provided a wealth of information on industry best practices and how users navigate similar functionalities on other websites.

Affinity mapping proved to be a powerful tool for synthesising research, but ensuring the labels for each group were accurate and not too broad presented a challenge. Collaborating with my UX lead on affinity mapping helped refine these labels and ensure we captured the true essence of the user data. This experience highlighted the importance of receiving feedback throughout the design process to avoid ambiguity and maintain focus on user needs.

The design stage highlighted the importance of choosing the right tools for the job. While I used Adobe XD to create prototypes, I encountered limitations that made me believe Figma, with its stronger collaborative features, might have been a better choice.  However, due to software availability within the team, I had to adapt. I need consider software limitations throughout the design process. Another key takeaway was the importance of accessibility. Initially, accessibility considerations weren't fully integrated into the design, and incorporating them later caused delays. I will ensure I think about accessibility from the start of future projects.

Handing off the design to developers was challenging. This highlighted the need for a more standardised handoff process in future projects. Collaborating with the content team was valuable, but content review proved to be more time-consuming than anticipated. This reinforced the importance of early communication and planning with content creators to avoid delays.

The Result

This project created an information architecture that is intuitive, user-friendly, and meets the needs of users. By following a UX design process, we ensure that the updated pages are effective in achieving project goals and providing a positive user experience. This page went live without any issues and the user engagement has been high.

Users indicated that the new design improved the experience and streamlined the filter options making it clearer and quicker to find important documents thus increasing engagement and return use.

Another kleindesiged. experience

[More Recent work.]

Check out some more of my latest projects for a glimpse into my ongoing pursuit of exceptional user experiences.

[information architecture.]

Website content design

The aim of this project is to deliver updated content and a revised information architecture to enhance the user experience. By following a UX design process, we can ensure that the updated pages are effective in achieving project goals and providing a positive user experience.

Deliverables

  • Research & Analysis
  • Content Audit
  • Site Map
  • Wireframes
  • Prototypes
Image showing a tree like structure of how the content will be laid out for the website pageImage showing the prototype designs for 3 pages
[ux research.]

Mobile app

Form a clear understanding of what user needs and behaviours are for a mobile app to provide input into the scope of any future mobile app development. This project provided enough insights to help the business decide on whether to progress with the development of an app or hold off until there is a greater need for one.

Deliverables

  • Research & Analysis
  • Wireframes
  • Prototypes
  • Usability Testing
  • User Stories
Lean UX canvas with sticky notes indicating what stakeholders needed from the projectWireframe images of the initial design tested with participants with feedback on sticky notes