Smart Selangor Parking: App Redesign
Duration: 24/4/2024 - 5/8/2024 (15 weeks)
Project: Redesign an application
Project type: University Project
Table of Contents:
Overview
During my 4th semester of university, I could choose an
existing application to redesign for my module, Application
Design 1. The app I ended up choosing was Smart Selangor Parking, a
parking payment app used in Malaysia.
The goal of this project is to identify any usability issues
with the current app, while also identifying which features to
prioritise in the redesign. Additionally, we were encouraged
to add in additional features, if needed based on our user
research.
This was an individual project, and some of the things I had
done in this project were:
- User Research
- User Interface Design
- Prototyping
- Testing
Programs Used:
The Process
I followed the 'Design Thinking Process' to carry out the
redesign.
Fig 1.1 Process Breakdown
Discover
To better understand the exact problem with Smart Selangor
Parking's current User Interface design, I did some research,
which included:
- Observation
- Competitors Analysis
- User Research
- Card Sorting
Observation:
I explored the reviews section of the app on Google Play.
Additionally, I used the app myself to actually pay for parking to
see how the current user experience is.
Figure 1.2 Strength & Weakness of Smart Selangor Parking
Competitors Analysis:
I explore some other apps that allow users to pay for parking as
well, such as:
- Flexi Park
- JomParking
- Parking SG
From there, I took note of what users found good in those apps
and compared them to Smart Selangor Parking.
User Research:
Moving onto user research, I performed 2 types of data collection
which were user surveys & user interviews.
The target audience for the survey was anyone who had used a parking
payment app before. Meanwhile, the target audience for the interviews
was:
- New Users of SSP
- Old Users of SSP
- Users who switched to another parking payment app
The purpose of the user research was to validate my findings from
my observations and competitor's analysis, as well as to identify
any possible weaknesses of the app that I may have
missed.
The survey was done through Google Forms and a total of
53 responses were collected.
On the other hand, the interviews were held face-to-face and a
total of 4 people were interviewed. At the same time as the
interview, I had the interviewees perform usability testing with the
current Smart Selangor Parking app.
Card Sorting:
Additionally, a card sorting exercise was done with the app's existing
features to identify how users would typically categorise them. The new
categorisation will be implemented in the app redesign.
Figure 1.3 Card Sorting results done on UX Tweak
Define
To start it off, I identified what I should be prioritising in my
redesigns based on my user research. This allowed me to focus on aspects
that users found important to them.
Figure 1.4 Redesign Priority
After determining what my priority should be, I generated 3 user
personas based on my survey and interview insights. This allows me to
emphasise with the users to better understand their needs and
challenges.
Figure 1.5 User Personas
Following that, I generated a user journey map. I only managed to
generate one for one of my personas (Lim Hui En) due to the time
constraint. Looking back, it would have been wise to generate a few to
get a better feel of different types of user journeys.
Figure 1.6 User Journey Map
Finally, based on my card sorting, I managed to generate the
information architecture of the app. I also identified the Minimum
Viable Product of the app (MVP).
Figure 1.7 Information Architecture
Figure 1.8 MVP
Ideate
As I was redesigning the app, I had to follow the apps current design
guidelines, with minimal changes so that it would still be associated
with the brand,
Figure 1.9 Design Guidelines
Additionally, I generated the apps user flow based on the results of
my card sorting. I only mapped out the flows that I was going to
redesign. Mapping out the flow beforehand really helped me organize
how each element should be.
Figure 1.10
App Flow Chart
Prototype
Moving onto the long-awaited redesigning part, I started off with
some really rough Low-Fi sketches. I typically sketch out my ideas
beforehand as it provides me with a guideline/visualisation of how the
Low-Fi should look like
Figure 1.11 Realllllyyyy rough Low-Fi sketches
Figure 1.12 Low-Fi Prototype
Figure 1.13 Notes taken from usability testing
Moving on from the Low-Fi, I developed the High-Fi prototype. I
refined what I had in the Low-Fi and added any necessary changes.
Like the Low-Fi, the High-Fi was also user-tested.
Figure 1.15 High-Fi Prototype/Redesign
Implement
After the redesign was decided, I was allowed to create a working prototype of the redesign with HTML, CSS and Javascript. However, before that, I was instructed to refine my redesign if needed. I did as such before I started with the working prototype.
Figure 1.16 Final Redesign File
Final 1.17
Final Working Prototype
Final Designs/Douments
Proposal Slides:
Smart Selangor Parking
by Janice Eng
UI/UX Documentation:
UIUX design doc by Janice Eng
UIUX design doc by Janice Eng
Final Redesign Prototype:
Working Prototype:
Reflection
This university project provided me with an opportunity to create a
user-centred app design with pre-existing design guidelines. It
allowed me to fully explore the process of creating a user-centred
design (such as the user research parts) without needing to think too
much about the design guidelines as it was already there.
Moving forward, if ever given the chance to partake in this kind of
project in the future, I would focus more on getting insights from
users and generating the necessary output. This is because in this
project, I had felt that I was worried too much on the 'Am I doing
this right' aspect.
Comments
Post a Comment