UI for App Development: Breather

As a part of Digital Media Studio subject I took part in a development team to create and develop an app idea using a 12 weeks Lean UX design sprint method. Our group did user research, creating persona, analysis, design and testing in order to develop our app. I took part in all elements of the design steps, but I also mainly act as the UI Designer to develop the app interface design starting from low, middle, and high fidelity prototype.

Our app

Our app is called Breather, and it focuses on helping students taking care of their well-being during study period in university.

We created a competitor analysis matrix by comparing similar or different apps to Breather.

Affinity Diagram from Interview Results

This app development was conducted during COVID-19 lockdown period. Thus, our group conducted 12 interview online via video or voice call and created our affinity diagram using the online service Miro.

Breather UI Development from Low Fidelity to High Fidelity

Lean UX design method focuses on creating and iterating prototype from early stages of design. Low fidelity prototype was designed as early as Week 3 and keep being iterated from research, testing, and evaluation. The final high fidelity prototype is finished on Week 12.

Low Fidelity Design

Low fidelity design is created quickly using pencil sketches on paper

Medium Fidelity Design

Mid-fidelity prototype is created in black and white. It is created and revised between Week 6 and 8. It was created without colours to quickly sped up the design process and to do an early heuristic evaluation, so me as the UI Designers were able to revise and make changes regarding the app usability without spending too much time in creating a “finished” look.

High Fidelity Prototype

The final UI design is created in Adobe Xd in order to be shared with the app developer. It is fully coloured and completed with illustrations in screens where it is needed. Our group managed to finish a Minimum Viable Product within the time frame and presented our final product at the end of the semester.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: