Abdelhamid Younis Portfolio
Share
Explore
Abdelhamid Younis Portfolio
Home

Archived

Hotelkit is a software as a service for hotels, it started as a productivity and communiction tool for hotels .They then expnaded to other industries such as healthcare under the name Medikit. They also launched a productivity tool for startups which is Teamkit. The idea is, any team from any size in any induustry can benefit from their productivity features. For hotels it’s useful to create checklist, repairs, report mantainance tasks, manage housekeeping tasks, create inspection tasks, walkthroughs and wiki pages.
As the product was expanding with more than 12 featues across web, ios ans Android. It was important to create a pattern library for faster developer/designer collaboration. The code had a huge legacy CSS and components that has been created and only used once or twice in the product.

Background of the project.
At that time I was the only designer in the team, we were planning a revamp for the website and we didnt want to include screenshots from the old product in the new website. So the aim was to redesign the whole app, include these new screenshot from the new app in the website and then later revamp the mother product. I had 2 months to do a design revamp for the whole product without changing much in the business logic. I wanted to keep things consistent so I wanted to create a design system or at least a pattern library that I can later use to revamp the product.

Team & roles.
PM→ managing this project with an external agency to develop the new website in wordpress.
UX/UI designer → i was responsiple for making a design revamo for our cross platform product on IOS, web and android, as well as communicating with our internal developers because part of this design revamo will make its way to the product before we do a whole revamp.
Marketing team → there was 2 people in the marketing team dedicated to provide content for us. They were also taking over the UX writing part.

Process:

Collecting components
With the help of one of the frontend developers we Created an inventory for all the colors and text styles used in the app and where they used and in which context.
Mix and match
I tried to mix and match the text styles or the color styles that are closer together into one text/ color styles. the picture below descripes how a group of colors in the old app were replaced by a new color. ​
Screenshot 2022-03-23 at 19.16.25.png
⁠
⁠
we did the same for the font color & size
Creating a component Inventory
Coming to the components we created a table in excel with all the components and how many instances of this component in the product. and where these components were used in the product.

Competitor analysis:
Hotelkit is essentially a productivity tool, so as an inspiration we took in consideration pattern libraries from productivity tools like Atlassian and Asana.

The final component library

⁠
image.png
⁠
⁠
⁠
image.png
⁠
⁠
⁠
image.png
⁠
⁠
⁠
image.png
⁠
⁠
⁠
image.png
⁠
⁠
⁠
image.png
⁠
⁠

Theming

We also wanted to make the UI flexible with any theme and this is an example of how the UI would look like with 3 different themes
BlueTheme
⁠
image 91.png
⁠
⁠
Teal Theme
⁠
image 90.png
⁠
⁠
Purple theme
⁠
image 92.png
⁠
⁠

Next steps

The first pattern library was focusing more on the customer facing side of the web app, we wanted to expand it to the cross platform environment and also take into account the componets in the admin area
Designing for edge cases (empty states, network errors, loading states, and locked states)
They UI should be different for users on free trial, so I need to design components for free trial users ( call outs, feature popovers, paywalls, and banners) to encourage them to buy premium plan
Designing the onboarding tours.
Transform the components from Figma to stroybook

Gallery
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.