Responsibilities & scope

Roles and responsibilities

As the sole UX designer, I played a pivotal role in:

• Conducting competitive research and heuristics evaluation to understand pain points and how similar and top not-for-profit organisations were getting their message across their websites.
• Developing user stories and user flows to identify key interaction points and design opportunities.
• Creating wireframes and prototypes to iterate on the app's interface and user experience.
• Collaborating remotely with stakeholders to agree on progress and next steps.
• Conducting usability testing to identify and address usability issues.
• Refining the design based on user feedback and data insights.

Scope and constrains

Having a minimal budget and time allocated for this project, I couldn’t conduct exploratory research, focusing instead on identifying opportunities through heuristics evaluations and competitive analysis as a starting point.

As part of the project's first phase, the focus was placed on designing the three main pages to agree on an overall approach to the whole website. These are:

• Homepage
• Our courses
• Our impact

The remaining pages, such as ‘Who we are’ and ‘How to Help’, were left for a second phase. Time and resource constraints required prioritising pages and testing before progressing further.

Project summary

Project objective

🚀 Phoenix Space’s website looked dated, spoke to the wrong audience and didn’t reflect the latest changes in their strategy and branding. Their new goals require a different approach in content, tone of voice and look of their digital presence. This website redesign deals with these issues while trying to offer a scalable solution for future design and content iterations.

Users and audience

As part of their new objectives, the identified website users are:

‍Sponsors:

• ‍‍CSR staff and other mid to senior professionals from medium to large corporations who can decide to sponsor PS’ work.
• Directors and managers from venture capital funds

‍Partners:

• ‍‍Program managers and similar staff from NGOs.

Understanding the problem

This section describes in detail the steps taken to redesign the website.

Following the leads

In order to redesign the main pages of Phoenix Space’s website to make the organisation look professional and trustworthy to potential sponsors and partner organisations, I needed first to understand what similar organisations were communicating and how.

I researched many international aid and educational not-for-profit organisations. Still, I focused mainly on two: The International Rescue Committee (IRC), a well-known, established organisation in the aid and development sector, and Dubai Cares, an organisation the Phoenix Space team pointed out as having a similar ethos to theirs.

👉 Even though these are bigger organisations, they do a great job of keeping information succinct while facilitating navigation and maintaining brand consistency across their websites. This was a key source of inspiration in the final website redesign.

Looking inside

With an idea of how information could be structured and having had a extensive discussion with Phoenix Space team, I performed a heuristics evaluation to further analyse the website’s shortcomings and opportunities and create a map that could be shared with stakeholders to decide next steps.

I meticulously analysed Phoenix Space’s current website, leaving no stone unturned in identifying areas for improvement. This detailed evaluation ensured the project's quality and reassured team members about its potential.

👉 While there were several issues identified, there were all quite easy to address and correct, discarding any complex performance or technological issues. This was a corroboration that the main issues with the site were related to a lack of clear strategy around what information was necessary and how to guide users through it.

The user side of the story

With a solid understanding of the opportunities, I looked at the type of identified users and created user stories.

👉 As the different users didn’t seem to have any distinctive feature needs, I drafted a corresponding user flow for both partners and sponsors.

This helped envision their journey through the website, identify how the organisation’s key message could be laid out, and beware of risks and areas needing further improvement.

This meticulous approach ensured the website’s usability while making stakeholders feel secure about its functionality.

Making sense of the information

Once the user flow was agreed upon, the next step was to develop a sitemap for the website and establish the choices for the navigation menu.

The main goal was to streamline the navigation process, making it easier for users to locate information regarding the organisation and its initiatives.

Additionally, the homepage was simplified to support this objective.

👉 It was interesting to see that the resulting menus are similar to the previous ones. The main focus was removing the excess information, focusing on the core message the organisation wanted to transmit, and making sure the flow of such information followed a logical pattern that was easy for users to navigate.

Solution ideation

Initial design iterations

After establishing a clear path forward for the website's content and navigation, I sketched the web pages.

To refine the website's layout, navigation, and content placement, I created low and mid-fidelity prototypes for iterative purposes.

Deciding on a visual direction

The redesign strategy was not limited to changing the tone of voice to speak to a different audience. The Phoenix Space team also recognised the need for the website’s visual design to change significantly, aligning with the new tone of voice and audience preferences.

To provide stakeholders with different paths that the UI design could take, I produced two moodboards that were discussed at length with them.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

👉 Moodboard 2 was chosen because it precisely aligns with the Phoenix Space team’s objectives of speaking to an audience made of corporate professionals and partner agencies.

Based on their feedback, I developed a style guide and pattern library, including gestures and animations to give the app a polished look and feel.

Putting it all together

After revising and approving the style guide with the team, I finalised the design of the mobile screens. I made specific modifications, such as adjusting spacing and repositioning certain elements, based on valuable feedback from stakeholders and developers.

I created a high-fidelity interactive prototype. This prototype demonstrates how the user interacts with the website's primary web pages, including navigating between pages and completing forms after tapping on CTA, ensuring the end goal can be achieved.

I also developed responsive layouts for larger devices to demonstrate to the developer how elements should be positioned on the screen for the agreed breakpoints.

Prototype and last touches

This is the final design iteration of the website redesign, a culmination of a thorough process that incorporates the initial competitive analysis and heuristics evaluation results, as well as the wireframe and prototype iterations.

These were all supported by several feedback rounds with stakeholders, ensuring a design that met their expectations.

Takeaways

This has been an excellent opportunity to learn how much you can accomplish without many resources but with great stakeholder collaboration.

While this project is still in progress, there have been many takeaways so far that have prompted this case study:

• Knowing your audience is fundamental: this will help tailor the information and tone of voice to their needs.
• Avoiding an excessive amounts of information: While it may be tempting to include all available information about the organisation and its works, it’s crucial to prioritise and define a clear message.
• Balancing content and call-to-actions: Prioritising essential content and CTAs while maintaining a user-friendly interface is vital to avoid overwhelming users.

This strategic approach ensures that users scanning the website can instantly grasp the key message and act accordingly.

Future steps

• Usability Testing: Conducted usability testing sessions with users to identify usability issues and refine the design for optimal user experience.
• Accessibility audit: to ensure the app could cater to the broadest audience possible since the whole purpose is inclusion in the first place.

I'm looking forward to completing Phoenix Space’s website redesign and making their goal of empowering displaced youth through technology come true.