#milestone02

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.

Wireframe #1 | DESIGN

For the first wireframe I decided to stick with a straightforward design, using Redkite’s website as inspiration. I have made sure to use lots of imagery and buttons for a clean and simple navigational experience.

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.

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.

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

I am beginning my wireframe work today and thought I would share my plan for the wireframes. I have decided to create 5 pages for each wireframe option, as I do not believe it would be a valuable use of time to fully create all pages for the wireframe options, as these are to act as previews so that a decision can be made (gathered through feedback) about which design option I am to proceed with for Milestone 03.

I will be creating the following 5 pages for each wireframe design:

Home

Support

Contact

About

Latest News

I have experience in using Adobe XD, Axure and Figma, but haven’t really had the opportunity to explore any of them in full. I decided to use Figma for this project as it is a popular choice within the digital team at the company I intern at. I also chose to use Figma as, from the brief experience I have had using it, I enjoy it’s tools and interface the most out of the programs I have tried.

Figma is described as the “collaborative interface design tool”. It is an online tool which means your work is always available via the web, making your files easy to access from anywhere. It also gives you the ability to share your files for feedback and to allow others to work on the design with you.

Main features:

Create your own component/style libraries – great for design systems

Generate code for the design for web developers to utilise when building the interface

Real-time collaboration with other team members so edits can be made together

Files can be shared with a simple link and accessed from any browser/platform

All changes are saved automatically so the file will always be the most up-to-date (no sending multiple file versions)

Super straightforward prototyping feature with transition options, etc.

After sketching out some rough concepts I then created 5 refined drawings of some theme ideas.

These focused on the positioning and general layout of elements on the home page, which would then dictate the other pages within that theme. I mainly focused on image, text and button placement, as I had already decided I wanted top and bottom navigation bars.