Emerging Practices | Interaction Design

[shobbsdid302a]

MAY 08 - A3 SUBMISSION

Please CLICK HERE to view all posts related to Milestone 03 in order of posting.

The PDF copy of my presentation/reflection and my report/submission have both been submitted via BlackBoard.

[shobbsdid302a]

My final thoughts | CONCLUSION

In conclusion, I am really happy with how this project has turned out. As with any project there is always the thought of “if I had more time…” but considering what I was able to achieve within the past 12 weeks, I am pretty content with the outcome.

I genuinely enjoyed being able to have the freedom to explore something that both interested me and pertained to my degree. Being able to utilise skills I’ve learnt over the past 3 years at uni and also to learn new tips and tricks along the way really made this project very valuable to me.

I was able to set myself goals and challenges and push myself through each Milestone to see what I could achieve, which was fantastic.

I think that the final prototype and design really came together at the end and I believe I have successfully achieved my overall goals and sub-goals that I set for myself back in the first week.

[shobbsdid302a]

Information Architecture | EMERGING PRACTICES

“Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile applications, and social media software.”

As I have discussed previously, Redkite’s website is lacking in a solid structure in terms of how it organises it’s content and how it’s internal flows are executed. There is such a huge amount of information and pages all bunched up together, with a lot of them being lost in the mess. That’s why looking at the IA was a relevant and important piece of this project because I needed to ensure that the app I was designing was going to be the most simplistic yet beneficial tool for the users, delivering information to them in a structured and well thought out way.

I also made sure that the overall layout of information was clean and simple, but most importantly, consistent. All the ‘main’ pages (Financial Assistance, Counselling, Book Club) have the same layout, as well as all the confirmation pages. I think this was extremely important so that the users can quickly get accustomed to how the app works and what the layout and components mean, but it also just removes potential confusion.

I needed to make the information really concise and as easy for the user to consume as possible. As a result the only scrolling pages you will see in the final prototype are the Book Club library (as there are images of books) and the Financial Assistance application form page.

[shobbsdid302a]

Design Systems | EMERGING PRACTICES

“A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale.”

Redite currently has a strong brand, in terms of their branding materials and components, which is evident on their website and throughout their digital and print resources. When it came to designing this app I knew I would be drawing a lot of inspiration from their current branding to develop a new, fresh design system, solely for the app.

The app’s design system includes button shapes, colour palette, fonts (title, subtitle, copy, etc.), illustrations and general layout templates.

I can definitely see the value of having Design Systems in modern Interaction Design projects as it allows for really clean, easy-to-follow design, especially when working with multiple designers. It’s very important to have a consistent design not just for general aesthetic reasons but it allows the user to acknowledge and understand the information and process much better, which is why overall, it’s really important to implement a Design System in interaction design projects.

I have created a board featuring the components I used/created for the Redkite app’s Design System, which can be seen at the top of this post.

[shobbsdid302a]

Interaction Design practices used

In Milestone 01 I spoke about some emerging practices in the UX/UI space and how I felt they were relevant to my project. Now, at the end of the project I will be re-visiting these and talking about how I integrated them into my project and showcasing how I did this.

As a refresher, the two emerging practices I selected were: Design Systems – “A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale.”

Information Architecture – “Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile applications, and social media software.”

I have broken these down separately in the next two posts.

[shobbsdid302a]

Final prototype | DESIGN

I decided the best way to present the final prototype was to film a screen recording with voiceover to show the 3 flows being carried out. I also have included the link to the Figma file below as well.

Link to YouTube video

Link to Figma prototype

[shobbsdid302a]

User Flow 03

Booking a counselling session

NOTE: please hover over image and click magnifying icon top left for full view

[shobbsdid302a]

User Flow 02

Ordering a book/s from Redkite’s Book Club

NOTE: please hover over image and click magnifying icon top left for full view

[shobbsdid302a]

User Flow 01

Submitting an application for financial assistance

NOTE: please hover over image and click magnifying icon top left for full view

[shobbsdid302a]

User Flows | PLANNING

In Milestone 02 I created 2 draft user flows to demonstrate how a user might complete certain actions on the app. This helped me to also think about what extra pages I would need to create for Milestone 03. However, when it came to Milestone 03 I decided I wanted to properly think about these user flows and to add another one, so that I had 3 in total.

I thought about the main actions that a user might undertake on the app, or more specifically, the most beneficial processes that the app could allow a user to complete. I then broke these down into steps and from that I was able to compile a clear list of pages that I needed to create.

In total I will be designing 18 pages of the app. I will break down each user flow individually in the following posts.

The user flows are: 1) Submitting an application for Financial Assistance

2) Ordering a book/s through Book Club

3) Booking a counselling session

[shobbsdid302a]

Final design selected | FEEDBACK

After compiling all the feedback/comments on my three wireframe options from Milestone 02 it was evident that wireframe 03 was the standout. This is the ‘theme’ design I will be continuing with to build the remaining pages of the app.

I’m happy with this outcome as I felt that wireframe 03 felt the ‘freshest’ in terms of its simple layout, curved elements, soft palette and calming illustrations. I’m looking forward to expanding this design and developing my own Design System for this option.

[shobbsdid302a]

Looking at the wireframe options | FEEDBACK

The first thing I had to do after completing Milestone 02 was to gather some feedback on the three high fidelity wireframe options that I created, so I could decide which ‘theme’ I was going to continue with.

I gathered this feedback in quite a non-formal way, simply getting into contact with some people I know and the Redkite employees, showing them the pictures and asking for their opinion. I asked 7 people in total and the outcome was wireframe 03.

Some of the comments on wireframe 03:

REDKITE

I like the pictures

The colours are not as harsh which is good

The cloud buttons are really cute

I just think it looks really clean and neat

The buttons coming out of the side are cool

GENERAL

Looks very modern

I like that it looks simplistic – not super clunky

The colour palette works really well

Compared to the other two it just looks… the best? I think it’s the drawings

Looks the most calming because it doesn’t use real photos

Seems really easy to learn how to navigate

[shobbsdid302a]

Milestone 03 - Overview/Plan

MILESTONE 03 OUTPUTS: - Final app page designs w/ clickable prototype - 3 x refined user flows - Final feedback and conclusion of project

For the third and final Milestone of this project my main deliverable is a clickable/interactive prototype.

I will achieve this by firstly gathering some feedback from general ‘users’ and Redkite employees around the design of the app (based on Milestone 02 wireframe options). I will then draw out three main user flows I believe would be executed most commonly on the app. These flows will help me to determine the remaining pages that need to be designed/built.

I will then be able to build the necessary pages using Figma. After this is complete I will use Figma’s prototyping tools to make the wireframe a clickable prototype. This will be sent to the Redkite employees I have been in contact with for their final thoughts and feedback (on both the app and the project in general).

Lastly, I will wrap up the project by talking about the emerging UX/UI practices that I incorporated and provide an overall conclusion.

[shobbsdid302a]

APRIL 10 - A2 SUBMISSION

Please CLICK HERE to view all posts related to Milestone 02 in order of posting.

The PDF copy of my presentation/reflection and my report/submission have both been submitted via BlackBoard.

[shobbsdid302a]

User Flows

I decided to create two user flows to demonstrate how the Redkite app might work, in terms of it’s User Experience design. This information will be used for the construction of the final design/prototype for Milestone 03.

The two flows I created (click on links to view the flow full screen):

1. Booking a counselling appointment

This first user flow outlines the steps involved if a user wanted to book a counselling session with a Redkite social worker through the app.

2. Submitting an application for Financial Assistance

This second user flow shows the steps involved if a user wanted to create a new application for Financial Assistance and what would need to happen in the process of submitting it for review.

[shobbsdid302a]

Wireframe #3 | DESIGN

The final wireframe option completely differs from the other two. I wanted to use the third option to explore something a little bit out of Redkite’s current style, using lighter shades of their brand colours and digital illustrations to create a more relaxed and modern experience.

NOTE: please hover over image and click magnifying icon top left for full view

[shobbsdid302a]

Wireframe #2 | DESIGN

The second wireframe explores using softer curves in the layout elements – a lighter, softer approach compared to the first wireframe. I also wanted to see what a image gallery might look like on the homepage of the app as well – as this is the design of the website.

NOTE: please hover over image and click magnifying icon top left for full view