A Space to Remember - Ria C. Rose

ASTR

Desktop & Mobile website design

Re- a concept that already exists.

A ASTR is a platform with unlimited affirmations pre-generated to the site, users wanted to have the freedom of creating or uploading their own affirmations that they could share with others and to social platforms.

The goal, was to update their existing Mobile Website designs as well as introduce, a design for desktop users. The idea behind a space to remember is; for users to have a space where they can create personal affirmations. These affirmations can be uploaded publicly to the platform or privately saved to a collection of their choice. To do this, users however would have to register with ASTR.

ASTR original designs

What users want from an affirmation platform

A lot of the research done for ASTR was secondary research. Looking and analysing competitor sites to see how they designed and structured their pages helped immensely in the design process. I was able to see what similar and competitor sites had to offer in regards to the user experience

“Gavin is a health & wellness advocate who visits affirmation platforms often. He is looking for a site that will allow the children he mentors, to have access to a platform where they can create, share and read positive affirmations to uplift their mental wellbeing”.

I want users to come to ASTR and have a smooth and mindful experience.

As there are so many affirmations available, to don’t want the page to feel overcrowded with content, which will take away from the purpose of the site.

As this is a mental and wellbeing site, i would like users to feel as though they are contributing their own thoughts to the platform too.

ASTR's new look

Given that ASTR already had a mobile app pre-designed, my part in this role was to ensure, that the: colours, typography, iconography and layout met the necessary guidelines and accessibility standards, that met user needs. The overall layout remained the same, however one major change that myself and the team at ASTR decided on, was the home page, which i’ve given an example below.

Original

My changes

The original affirmations on the home page came up one by one, which meant that users continuously had to shuffle to get or see an affirmation that appealed to them. This became frustrating to users as they would always have to tap the shuffle button to see a new affirmation

With the new design users could filter what they wanted to see based on a sub-group and have the accessibility to have an infinity scroll to see affirmations. Another cool feature that was implemented, was the home screen, would give an “affirmation for the day” which would be locked to there home screen and change daily.

Low fidelity wireframes

High fidelity wireframes

ASTR Prototype

The next step. A responsive design for desktop users.

Sitemap for desktop

With the desktop design, myself and the team at ASTR had to work together to come up with a interface that felt similar to the web app, that i had redesigned for them. It was important for the team and i to come up with a responsive design, that felt seamless. It was made clear however, that they wanted the hierarchal structure of the desktop site to be a 'top down approach", thats starts with broader categories of information that narrows into more detailed information.

I briefly sketched out a simple sitemap that would showcase the journey a user would experience when accessing the desktop site.

My goal for this sitemap, was to create an accessible navigation bar, that users could use without any complications, I wanted it to be clear, so that they could navigate around the site easily without feeling lost or confused.

Going with the flow

I was thinking about having the pages, more focused towards a clear bold navigation bar at the top of the page as well as having bold cards which would display affirmations on them. The main designs focus on the wireframes, were mainly for the home page.

After designing the low-fi wireframes, i made prototypes to test out on users, at this point i had already done a unmoderated study and tested out the prototype, with 5 participants to get feedback on the user flow and the overall experience so far. They gave me critical feedback as to what needed to be changed and implemented, so that the experience could be better. I took this on board and made sure to make the necessary changes.

These were the findings that came back from the study

Before usability study (create your own page)

After usability study (create your own page)

User feedback 2

The original design for the “create my own affirmation” page, didn’t give users the freedom to have the option to save their affirmations publicly or privately. The idea is that registered users can create a collect and choose how they would like to publish their personal affirmations

Before usability study (home page)

After usability study (home page)

User feedback 3

Participants had concerns that having 1 large card per affirmations was too much. The idea here was to make smaller cards with more affirmations to show. Also limiting the amount of scrolling a user would have to do.

Agreeing on making the designs the same

After agreeing with the team at ASTR, that the interface shall share the same look to the web app, it was easy to come up with a responsive design, the next main goal here was to to set up the hierarchal structure for users to navigate. Once this was implemented, we would conduct another study to see how the flow of ASTR was for your users.

Takeaways with ASTR.

The impact

What i learned

5/5 participants were happy with the overall design and feel of the site. They liked that it wasn’t complicated and was easy to move around.

The hierarchical structure was able to meet the users needs which helped guide them through the site.

Even though the site is not heavily influenced with images, most of the users mentioned that the use of colour contrast and text helped to make the site look aesthetically pleasing.

The team at ASTR were also happy with the overall design and the experience of the site, there will still be the need for more iterations to take place after another usability test has been done

It’s important to listen to user needs. Although i may have suggestions on what may look or feel best, overall the decisions come down to the research that has been done throughout the design process, this is something i will continue to implement and carry out doing intensive research first before making solid design decisions.