This web design project was for an emerging mental health and reconciliation service called Taking Up Space. The design challenge for the website was to understand the depth and breadth of their various offerings and combine them to provide a single source of truth without overwhelming users.

The design and development phases of this website are still under progress but a selection of some parts of the process and final results are included here.

Design Challenge

Capture depth and breadth of the business’ offerings and provide a comprehensive website that is easy for users to navigate. Align the website with the conceptual framework and visual identity of the brand.

Outcomes

Designed and defined the overall function, flow and visual identity of the website.

Will be offering support to develop, onboard and upload content to the website at a later stage as well.

Process Overview

KICKOFF

The goal of this phase was to gain a deeper understanding of the business, the potential users and introduce the process by getting everyone on the same page.

Stakeholder Interviews
Strategising
Business & User Goals

DISCOVERY

This phase involved having a look at similar existing websites and better define which features would be suitable for our needs.

Competitive Analysis
Feature Prioritisation

DESIGN

This phase dealt with the potential organisation of different types of content on the site, sorting out the navigation, user flows as well as the visual design of the site.

Information Architecture
Site Mapping
User Flows
Wireframing
Visual Identity
Prototyping
Documentation & Delivery

DEVELOPMENT

Since the clients would be coding and building the site themselves, this stage involved offering consulting and support in terms of how designs were to be implemented.

Plugin Analysis
Responsive Design
Website Building

Skills

Web Design
Information Architecture
User Flow Mapping
Wireframing
Prototyping
UI Design
Stakeholder Meetings

Softwares & Tools

Figma
Miro
WebFlow
Adobe Illustrator
Google Docs
Google Sheets
Google Meet

Team

Individual Project
+
business team (business founder, developer, social media team & marketing consultant).

Role

Web Designer
Front End Web Developer

An initial meeting was set up to delve deeper into the conception of the business, their users and their needs. Then, a feature list of how the website would solve users’ problems was prepared and a competitive analysis of similar websites in the same space was done.

Information architecture of the website using the above features was then dealt with in a few iterations, finally settling on the site map below:

Based on the feature set intended for the website and the users’ needs, it was determined that users needed to be able to carry out the following 6 tasks using the flows outlined below:

Wireframes for the main pages of the site were generated as below:

The visual design for the website as of now is shown below. The goal was to evoke a soft and earthy look which was both friendly and approachable to users.

This was the main landing page:

An about page detailing the vision, intention, philosophy of the service as well as the team members, information about the founder, etc was made. This features a collapsible drawer view of the information so that users can jump to the area that is relevant to them.

The drawer organisation is kept flexible so that depending on the content team’s needs, and as the content on this page changes and increases, re-organisation of the information and its headings can be done accordingly.

The blog and events pages were quite similar in their approach, in that they both needed a collection layout with all the available articles and events as well as a detailed article and event view.

In particular, it was felt necessary to add a filtering and search system which would become necessary as these parts of the website would grow larger and more complex. A newsletter sign up section besides the one at the footer was added here as well. This would allow users to receive either event or blog updates besides just regular newsletter emails.

Setting a Reminder

Pinning to the Home Screen

Adjusting Content Progress

The contact page was also designed keeping in mind that at any time, either individuals or organisations would need to reach out to the service. This would require an ‘Organisation’ and ‘Position/role’ field which would be important in the context of an organisation but unnecessary in the case of an individual. For this reason, both the forms were kept separate so as not to confuse users and have an added level of basic filtering while receiving contact emails.

Saving Content

Finding Saved Content

As mentioned before, work on this website is still in progress with inputs awaited from the business and development parts of the team. I will be taking this project forward along with the development team on Webflow as well as offering support at later stages for onboarding, content upload, responsive design and for future integration for the members, community and paid access parts of the website.