---
title: DAOhaus Mobile Responsiveness
tags: ux, daohaus, mobile
---

# 1. Objective

This exercise aims to audit and identify areas for improvement in DAOhaus' mobile user experience.

The analysis would be done in the lens of:
1. **Clarity**: How clear is the function and usage communicated?
2. **Aesthetics**: How aesthetic and congruent to DAOhaus look and feel are the features?
3. **Congruence to DAOhaus Web**: How similar are the desktop and mobile versions?

Points 1 & 2 caters for both existing and new users, whereas Point 3 aims to give existing users the same experience on DAOhaus web and mobile.

# 2. Flows
The approach for this exercise is:
1. Walk through **major flows** of a DAOhaus user
2. Identify **improvements** in these flows

Here are the major flows of a DAOhaus user.

As a first stab at mobile optimisation, this exercise will exclude the Boosts / Apps page and focus on main flows first.

For full FigJam file, please refer to: https://www.figma.com/file/t3JPmYPCVD2A4fnizdLjOE/DH-Mobile-Responsiveness?node-id=0%3A1

# 3. Suggestions

Based on the above flows, here are the 10 areas of improvements found


## 3.1 Home: Padding can be reduced

The padding / margin on both left and right sides of the daohaus.club pages are excessive, causing the copy to be cut off unnecessarily. This makes it harder for users to read and understand the copy on the website.

**Suggestion: Reduce padding / margin**

## 3.2 Navbar: Switcher icon is confusing
The switcher icon in the Navbar (referring to "Change DAOs") **is confusing as there are 2 icons / buttons that connote the concept of a 'menu'**(i.e. the switcher & hamburger menu icons)


==Suggestion TBD - Not sure how to fix this as of yet, probably some exploration required==

## 3.3 Summon a DAO: Summon UI is broken
The Summon UI is broken on mobile, as seen in the screenshot below. While most summoners are unlikely to be summoning DAOs on mobile, it looks pretty bad. This is likely because it is hard to squeeze this much information into a left-right layout.


Suggestion: For mobile view, switch to a **top-bottom view where tabs are on top, followed by content and CTA below**.

## 3.4 DAO Overview: Overlapping shares & loots amount if shares and loots are > 4 digits

In the DAO overview page, when share and loot amounts go beyond 4 digits, the shares and loot amounts start to converge and overlap, which looks confusing.


Suggestion: On mobile view, **move `Shares` and `Loots` into another line below `Active Members`**, so there is enough space

## 3.5 DAO Proposals: When clicking on the Hamburger Menu in Proposals, search bar & filter stays visible
When I'm in Proposals and I click on the Hamburger Menu, the Menu options appear as expected. However, the search and filter components does not go away, making it confusing.


Suggestion: Ensure that search and filter components are not visible on Hamburger Menu

## 3.6 DAO Vault: Vault's view port is off
In the DAO Vault page, the view port is off, creating awkward zooming in and out when the user taps on various buttons.


Suggestion: On mobile view, **fix the viewport**

## 3.7 DAO Vault: Bank graph & title are overlapping
In the DAO Vault page, the bank graph and title are overlapping, making it hard to tap on the time frame filter and read the vault amount

Suggestion: On mobile view, fix the layout by **having the `Time Frame: Lifetime` filter on top, followed by the graph and amount component below**

## 3.8 DAO Members: Overlapping shares & loots amount if shares and loots are > 4 digits
Similar to 3.4, in the Members page, when the shares and loots are more than 4 digits, the numbers start to converge and overlap.


Suggestion: On mobile view, move `Shares` and `Loots` into another line below `Active Members`, so there is enough space

## 3.9 DAO Settings: 'Coming Soon' on Boosts does not have vignette

On desktop, the Boost Status section has a "Coming Soon" on top of a blurred layer, hiding the assets in this section when Boosts are not enabled.


On mobile, this blurred layer is not functioning as intended, causing the section to look buggy and confusing.

Suggestion: **Fix the blurred layer**

## 3.10 Member's Profile: Profile shares layout if member has 100% voting power
The last minor issue is on the Member's profile, where if a Member has 100% of voting power, the alignment of voting power is off.


Suggestion: Since this component has shares & loot, if we were to implement the fix in 3.4 and 3.8 by moving shares and loots to the next line, this problem should be fixed as well.

# 4. Summary of Suggestions

To summarise, here is the scope of changes from the UX audit.

| | Fix/Component | Area/Flow | Approved by Dev/Design? | Simple enough for contributors to start? |
| --- | ------------------------------------------------------------------------------------------------------ | ----------------------- | --- | --------------------------------------- |
| 1 | Daohaus.club padding/margin | Daohaus.club | Both | PR up |
| 2 | ==Explore alternatives to Navbar switcher icon== | General Navbar Switcher | Both | Some design exploration reuquired first |
| 3 | Switch Summon a DAO mobile UI to a top-bottom format | Summon a DAO | Both | Some design work required first |
| 4 | Move Shares & Loot amount to next line | DAO Overview | Both | Yes (if go ahead) |
| 5 | Fix vault's viewport | Vault | Both | ClickUp |
| 6 | Move Bank's graph & title component after Filter | Vault | Both | ClickUp |
| 7 | Move Shares & Loot amount to next line in Snapshot section | Members | Both | Yes (if go ahead) |
| 8 | Proposals hamburger menu Make filter and search components not visible | Proposals | Both | ClickUp |
| 9 | Fix blurred layers for Boosts section | Settings | Both | KIV (Not relevant) |
| 10 | Move Shares & Loot amount to next line | Member's Profile | Both | Yes (if go ahead) |