Standtall

Designed at Leto

StandTall is an amazing service to help people suffering from abuse to find charitable help and advice.

StandTall is a project created at Unilever to help give advice, tips and support to people suffering from abuse.

Challenge

There were some pretty major challenges with this project. For launch, the product is focused on helping women suffering from abuse in India. This brought a lot of technical challenges that meant that the website would likely be viewed on a mobile phone as in 2014 around 70% of internet usage in India was on mobile.

On top of that the vast majority of mobile usage will take place on feature phones with very limited browser capabilities and connection speeds. This lead us to try to remove as much javascript as possible. We did discuss making the site totally functional, which would mean likely stripping out all the images and using very simple CSS, but the project owners were still quite keen for the site to look polished as a nice sharable project for Unilever.

Solution

Designing the site mobile first was a given, so I quickly started blocking out sections of the site in Sketch, and getting a feel for how it could expand on desktop (it's likely that the charities might view the site from desktops in their office).

Pretty quickly I found my rythm and the client was on board very early on with the proposed flow and styling.

I don't have any cool sketches or wireframes to share as I had around two weeks for the entire project so ended up just building on top of the wireframes and adding more and more fidelity but you can check out some of the pages below.

This is a moodboard I created when I began the branding for the site.

This is the logo I designed for the project.

The homepage is the window into the rest of the site so I wanted this to seem clean and appealing. Keeping the content light also means the page will load faster which is perfect for feature phones.

Using tiles for the different organisations really allows the page to work perfectly on both mobile and desktop.

To allow this page to load as fast possible I removed the header image, which also creates less friction for the organisation as they don't need to worry about finding one.

A simple scannable tiled list felt like the right approach for the Community Posts page allowing the user to easily pick out keywords.

This is quite a lot of information to ask from the user but I've optimised the mobile design to allow you to fill it in in quickly.

Here is a style guide I created for the dev team so they could easily access colours and typographic rules.

Impact

The project only just went live so there isn't a huge amount of impact yet, but the client was extremely happy with the way we managed the project, and loves the site. The next steps are to listen to the feedback and iterate on the product to make it even more effective for the users.