A Stitt in Time (UI/UX Case Study)
1. Introduction
Our app is developed as part of A stitt in time Exhibition. The exhibition will show case the archive artworks about Alex Stitt, a prestigeous artist and animator. Our app's concept is based on the Life, be it in campaign in 1970s across the Australia where Alex Sitt is involved to create animations to encourage people to do more exercise and maintain physical and mental health.
The current Covid-19 has influenced our lives in various ways including requiring people to staying at home. We think this is a great time to create an App that use the artworks and inspirations from Alex Stitt Archive Collection to encourage people to exercise more indoor an outdoor. Users will be guided by the gifs. Users could take selfies with the characters and share as a way to promote the exhibition.
The concept is to encourage people to exercise even after the exhbition is finished. And the app is a form that could make the exhbition more popular and accessible to the public. Except from engaing people during the exhibition period, the app could encourgae people to return to the exhibiton, the artists's work and RMIT archive in the long term and at the same time, help people to form a good workout habit. It pays respect to the original campaign created by Alex Stitt which is also to propose a healthy workout habit.
2. The Challenge
The role of the mobile application team is to build a workout mobile application, based on the the key themes, ideas and design elements of branding team. There are four main functions in our applications:
+ Exercise/Plan/Course: contains all exercise for users to interact.
+ Community: the place where users can see other posts of their workout
+ Exhibition: users can figure out more information about Alex Stitt and his artworks
+ Personal profile: the place where users can customize their personal information, post and check their workout report.
However, the challenge faced by our group was mostly around the realization of our project. Initially, we asked quotations from more than ten developers, however they are all over $1000. We couldn’t find a match. To solve the problem, our group designed two simplified versions based on our original design as we still want to make the game as fun as possible and engage our users with more options to play around.
After the first change, we deleted the function of uploading photos from the mobile phone album. And for the second refinement, we set a default scene for each challenge to reduce the workload of development. Finally, we can reach a balance between the functions and budget. This experience shows that when we apply our design ideas in the real world, often we will encounter various challenges and limitations. But a good designer should be able to create good design outcomes with whatever resource he has. Being able to find a balance between the design concept and real-world production and creation is another important skill.
Objectives
Based on the research results, we were challenged to design a mobile application for Company X with the following specifications.
+ User-friendly design
+ Attractive interface
+ Increases users motivation to workout
The features needed on the mobile application are:
+ Exercises/ Plan/ Course
+ Community/ Social
+ Exhibition/ Website content
+ User Information
+ Exercise & Health report
The Team
Some parts of the challenge required us to work in teams. My fellow team members are Yuki, Yue Ma, Ebisu and Aries.
Project Timeline
My Role
UX designer
Tools Use
Figma
Adobe Illustrator
Notion
Duration
3 months
UX - 1 month
UI - 1 month
Development - 1 month
My Contribution
Concept Ideation
Prototyping
Competitive research
User research
Interaction Design
Animation Design
3. Design Process: Design Thinking
We approached this challenge by implementing the Design Thinking approach. Design Thinking is human-centered and solution-based. The human centered aspect of Design Thinking helps us get a better understanding of the users and their needs, while the solution-based aspect helps us create innovative solutions. This type of approach corresponds with the requirements of the challenge presented
Empathize
Empathize is to understand our target customer motivations and perspectives, then address the problems they face. After we step into our target customer’s shoes, then we can define their core problems by putting together all of the information and analysing it. Based on the problems we observed or heard about, then we come up with questions for how you might solve them.
User Need
+ Want to Prevent chronic diseases.
+ Improve health condition and immune system.
+ Track fitness activities.
+ Group exercise.
+ Favourite music playlist with activities.
+ Set a fixed schedule to do exercise with a limited time.
+ Personalised Exercise.
Pain points
+ lack of confidence.
+ Imbalance work-life activities and less prioritizing.
+ No knowledge of any kind of fitness activities and how to do it properly.
+ No Reminder or scheduling
Define
Problem Statement
Problem statement, also know as point of view, by which i came across from the insights from user research, User persona and Empathy mapping. To find out the solution, i had synthesize the data and information i collected to define the statement. For Problem statement i used template like [User] [Need] & [Insights]
Our Offering Solutions
User will experience the service by using an mobile app. I need to make sure that my designed digital experience is friendly, usable, desirable, creadible, accessible. Few Offering solutions based on user behavior, attitude, life-style, insights from research i’ve offering on this project are:
+ Personalization fitness work.
+ Track fitness.
+ Community for more encouragement.
+Challenges for habituating routine.
+ Leader board to compete each other in points.
Later we jump into the HMW (how might we). plan is to generate as many as question to validate, find out insights. This will be broader in number and idea but have to be in narrow for answers.
Few How Might we question i brainstormed during the process:
1.How might we make them work on regular basis
2.How might we help users schedule for exercise?
3.How might we cooperate them for exercise plan?
4.How might we help them keep tracking fitness and health?
5.How might we help them to create a dietary chart for strength?
6.How might we Connect them with the community?
7.How might we guide them a proper way for fitness and exercise?
8.How might we Make them more cosistent on fitness?
9.How might we Offer them personalised training program?
10.How might we Make it more competitive for users to encourage to do more workout?
Ideate
In the ideate stage, we brainstormed ideas based on our the goals we determined in the empathize and define stage.
Information Architechture
The IA diagram helped designers and engineers make sense of what they are working on in the bigger picture. It is continuously developed and maintained as things change along the way in the design and implementation process
User Flow
To understand more about user steps using a product, i used user flow to describe how users finish the task.
Sketch
I gather info’s from research and put together in a paper to make sure it’s going to provide users a necessary content. It’s the most power to generate multiple ideas and solutions with a quick time turnaround. though it’s not final, it’s going to support further for high-fi mockup in later stage.
Low-fi Wireframe
Lo-fi wireframe to synthesis all the collected data previously and put them together using black and light gray color and text to determine contents for Final product design.
Final Design
This is the visual design stage with a product style guide and design system for the end product. By using and gathering all these, I eventually analyze and split tasks and flows for users to achieve their desired goal. For instance: create a personalized fitness program.
Why did we change to the new version?
In the process of looking for developers, the general feedback we got was that based on the current budget and schedule, the goal of developing version 2.0 could not be achieved. Therefore, we chose the alternative version 3.0, which reduced the part of selecting and uploading the background pictures based on version 2.0, in order to retain the more critical and complex function of creating comics. We added four new backgrounds so that 10 movements can correspond to the background one-to-one, which can effectively reduce the difficulty and duration of the development phase.
Sneak peak of Style guide and components (partial) i used across the final product
User Testing
Based on the interview, the respondent thinks that it is very important to learn and improve his skillsets in his spare time because it can increase his value as an employee. The respondent also said that he has never used an online course platform because the registration and subscription process can be tedious. He usually learns from Youtube videos.
After the interview, I asked the respondent to test out the prototype and asked him to do a few tasks. During the usability test, the respondent stated that he had no problems carrying out the requested tasks. He said that the information provided was sufficient and that the flow was easy to understand. The only concern that he had was that a few users might not be aware of the Bookmark feature if they are not familiar with the Bookmark icon.
I also utilized the System Usability Scale (SUS) to measure the usability of the prototype. The prototype received a final score of 70 on the SUS rating system. A score of 70 means that the design passed the usability test.
Overall, the in-depth interview and usability test showed promising results, as the user did not find any difficulties in using the prototype and the SUS measured high scores.
4.Reflection and Learning
The biggest challenge is the adaptation and iteration of our game due to the budget constraint. We have worked closely with our developer to negotiate the price and the development possibility of each function. We are limited by technology so we simplified our design ideas and hand over the assets to developers in a way that could maximize the work efficiency of our developer.
We have also learned the value of group discussion and team collaboration. After the soft release of the game, we tested the game individually and with teachers. And then we wrote a list of problems that need to be fixed by the developers. Problems were fixed within the next following week. Problems appear in the testing phase are small design decisions which we didn’t consider thoughtfully during the initial design stage.
For example, we didn’t set a text limitation for the word bubble so users could type as much as possible but when they generate the comic, only two lines of words would appear. Our solution is to make the fixed text limitation block visible while users are typing so that they know the plan the copy before they started to type. This iteration plan could avoid the situation when users realised the limitation and have to re-think their words. We learned that as designers, we simply couldn’t predict each user scenario but we could always learn from the mistakes and take it as a lesson. However, for future projects, we still need to try our best to be aware of and be mindful of each small design decision.