ServNology IOS Redesign
Creator
Role: Lead UX Designer
Start: Jan 2020-
SUS score: 86.55%
Starting Score- varies on each project
Ending Score- varies on each project
​
ME
What was asked of me as the designer.
After getting adjusted to the goals and work ethic of ServNology a commercial maintenance company I was tasked with my first project. The launch of the current IOS application I was working on has been on the market for over 2 years, with a decent sum of the UX functionality and visual design being outdated and not so user friendly! It was my job to clean up both the usability and design. This application has many sides to it from the client point of view to the Admin and technician sides. So far at my time with Servnology I have taken on a total of 9 Projects. Below i've separated them give a brief description of each one.
Keep following my work below as i explain and walk through the key points of this application redesign!
A Little Bit About Each Project
Project 1-
Ticket Checkout
Chosen Redesign
The first project i tackled was a checkout flow for the Technicians to check out each of their open tickets they are working on. I went through a more agile UX design process for this first project, already knowing the target market there wasn't much need for steps like a persona or initial screener surveys.
Heres a list of steps I found crucial to have completed!
1. Original usability test
2. User flow
3. Design Studio
4. Wireframes
5. IterationsHi-fi Prototype
6. Hi-fi Prototype
7. Final Usability test
Usability test on the original design.
Lets get into it! I started by conducting a base level usability test to gain insight on a SUS score of the original product. My survery included 10 questions to gain a foundation of where we there was room for growth! Below are a few of the the inital questions and the admins responses!
My initial findings from the composed SUS screener was that the usability of the current app was standing at about 63.5% which meant there was a lot of room for growth, with my parameters in mind I got to work composing a user flow. Read a little bit about that process below
Composing a User flow
I chose to start by creating a user flow to better mentally map out what was going to be expected of this function. I knew that there was going to be a decent amount of steps needed to accomplish the whole flow and that it was going to be important to make all the steps clear and clean, now that I had a good understanding I got started!
Project Two
​
-Ios Homescreen
​
Next, I was assigned to tackle the "home screen layout" for the mobile IOS application! As you can see in the before image below the current application "home screen" was mainly just a list of inputed tickets with no real hierarchy.
After talking with the admin at Servnology I learned that what they were looking for more of a dashboard theme where all crucial information could be seen in a condensed view!
With the idea in mind I started by creating a view options from which I could build upon after feedback and meeting again!
Below is also an attached image of the current solidified chosen design!
Chosen Redesign
Before
How I got to this final design through two rounds of iterations where I received important feedback about what exactly would be expected from the perspective of the users of this commercial maintenance company.
With the application being live for about a month, through another round of usability testing I was able to confirm our design was having the positive impact I was hoping for!
​
​
Additional Findings!
​
​
​
​
Another important finding was the need for a "notification" like feature where users could be told that they have tickets requiring their action!
​
After a design studio and some researching I came up with the idea of adding a dialog pop up to let users know their attention is needed!
Below is an attached example mockup of the use of a dialog in the IOS application!
​
Chosen Mock Dialog Box!
When I had first started to create my component and design library for the company ServNology one of our first initial meetings was based around discovering the colors and general "brand" of ServNology!
​
I created a card that had to important text and priority colors!
In the Figma file attached at the top of this page you can view my whole component library but to save you time I have attached an overview of the color hex codes as well as the application typography!
Design Library
Project 4
-New Ticket Redesign
​
There was a high level of importance for good user experience in this redesign because of how often this feature is used.
​
Knowing that, I chose to look at the "new ticket" function from the Tech and Admin side of the existing app and pick apart features that are needed to produce the best possible functionalitly within this application.
​
​
A few screen states from the current application
Project three
-Web Dashboard
With the larger version in the near future, a fast pace forward thinking outlook was crucial to the success of this project! As a team we met with the devs and admin to talk about the need for a Web login and dashboard for computer users!
I was given fairly free range to design with!
Striving to create consistency with the web and IOS application i preformed a design studio to hopeful create a good foundation!
​
​
Web Dashboard Design Studio!
After understanding a good level of what was important information to have within the dashboard I went through the phases of creating a few lo-fi and mid-fi mockups and presented them in a meeting!
​
For the sake of your time
​
Below I have just attached the agreed upon chosen design that will be implemented by the devs!
