Concept design for an Overwatch app for overwatch players
Netflix app
A concept design for Netflix Desktop app for Apple users
PlayStation desktop app
A concept design for PlayStation desktop app
Think4
Redesign website for an IT company with an improved user experience
Reolene
Redesign of a webshop for a skincare brand with an improved user experience
Haguexplore
An app that offers service for tourists in The Hague
Who am I?
Welcome! My name is Ani and I’m a UX/UI designer from Zoetermeer, The Netherlands. I’m an interactive media design graduate of Grafisch Lyceum Rotterdam (GLR). After my graduation, I was eager to learn more about interaction design and decided to pursue my studies in a similar field. I continued my studies at The Hague University of Applied Sciences (also known as THUAS) majoring in Communication Multimedia Design. With the help of my past study and work experiences, I’ve developed my UX skills, such as conducting user research, conceptualizing, implementing UI patterns, Design psychology, Gamification, Wireframing and Prototyping.
My place in the world of UX
Over the past few years, I’ve developed a strong passion for UX/UI design with a focus on creating experiences that are empathetic, accessible, and truly useful to people. What drives me is the ability to design concepts that not only solve problems but also inspire curiosity and make everyday interactions feel more intuitive and meaningful. I believe that by applying principles of design psychology and human-centered thinking, we can build interfaces that are not only usable but also motivating and empowering. As a UX/UI designer, my goal is to contribute to environments that encourage learning, growth, and connection. Whether through educational platforms, tools that support well-being, or applications that help people navigate the world more easily.
Feel free to contact me!
Haguexplore
An app that offers service for tourists in The Hague using gamification
Haguexplore is a project I have worked on with a team of 3 CMD students at THUAS. During this project we were supervised by two professors which were also our clients for this project. At the end of the project we had to present our hi-fi prototype to our supervisors. I will discuss about the background and motive assignment and work process in detail below.
Background and motive assignment
The Hague is an extraordinary city on the North Sea coast of the western Netherlands. It is known as the city of Dutch parliament, monuments, historical districts, architectural buildings, museums and more. Each year, the city is packed with both business visitors and tourists who want to visit these places. Currently, many areas in the heart of The Hague are under construction. Therefore, some touristic places are closed and cannot be visited by tourists. The given assignment is to design a service for tourists visiting The Hague. For this research the following main question has been formulated: “How can tourists visiting The Hague get more historical information and status updates about the city and its ancient buildings?”
Clients
Supervisors during the project
Target audience
Tourists in The Hague that are interested in visiting historical places in the city.
Goal
The aim is to design a service that offers more information and guidance about the ancient city and historical buildings for tourists.
Loading screen and Languages screen
Loading screen: This is the first screen the user will see when he opens the app. The logo is shown on the screen while the app is loading.
Languages screen: On this screen the user is able to choose the language he wants while using the app.
Username screen and Home screen
Username screen: Before the user can use the app, the user has to create a username first. In order to provide the user a more personal experience.
Home screen (instructions): This is the home screen of the app. Before the user can do anything, a tutorial will pop up to give the user instructions about the functions of the app. By tapping the screen, the tutorial will end.
Home screen and list screen
Home screen: On this screen, the user chooses a category, which will lead to tourist attractions based on the category.
List screen: When the user chooses, for example the category museums, the user will then see a list with museums. This page will allow the user to choose a museum in The Hague. The results are based on the current location. The first museum is the nearest museum to the user’s current location. By tapping the information icon of one of the museum, the user will get to see more information about that museum.
List screen (selected) and Information screen
List screen (selected): When the user selects the places he wants to visit, the pictures will change to checks.
Information screen: When the user taps on the information icon on one of the museums, the user will see this screen. On this screen, the user can get more information on the museum.
Information screen (selected) and Planner and transportation screen
Information screen (selected): The functions on the list screen are also present in the information screen.
Planner and transportation screen: The user plans his journey here. On this screen, the user chooses one of his previous selected tourist attractions and the transportation.
Planner and Navigation map screen
Planner and transportation screen (selected): Once the user has chosen his destination and transportation, he can start the navigation by tapping the plan journey button.
Navigation map screen: The app is showing the user a map with navigation to his destination. The user has the option to stop the navigation by tapping the stop button.
QR screen
QR scanner screen: When the user has arrived at his destination, the user can open the QR scanner to scan the QR code on the signpost near the tourist attraction.
QR scanner screen (scanned): On this screen, the user can see that he has successfully scanned the QR code.
Notifications screen and Trophy screen
Notifications screen: On this screen, the user can see notifications about the current and/or future happenings in the city.
Trophy screen (incomplete): On this screen, the user can see how many items he has collected. Since not all three items are collected, the prize is still hidden for the user.
Trophy screen and Settings screen
Trophy screen: When the user has collected all the items, the prize will be visible to the user. The user can use the bar code to get a free cup of coffee in one of the café’s of the places he has visited.
Settings screen: In the settings screen, the user can change the settings including the languages.
Instructions screen
On this screen, the user is able to read the instructions again.
Reolene
Webshop for a skincare brand
Reolene is a skincare brand that offers a wide range of beauty care products in the area of facial care, body care and hair care; A natural beauty product without harmful substances with active vegetable ingredients. I was first asked to make a logo for the brand. They wanted something refreshing, simple and attractive that represents their natural products. The logo was then used for their official webshop and packaging design. A year later, the owner of Reolene asked me if I could re-design the webshop to make it more attractive for the visitors, because they were noticing that users would leave the webshop without taking any action. I will explain the background and the motive assignment further below.
Background and motive assignment
Despite the online campaigns that are used on various social media platforms, such as Instagram and Facebook, Reolene has little online sales via their webshop. Reolene wants to solve this problem by means of a new and improved webshop that encourages visitors to take action, such as visiting other pages and placing orders.
Client
Reolene
Assignments
Create a logo and a clickable hi-fi prototype of their new webshop
Target audience
Women between the age of 20-55 years old
Goal
Improve user experience on the webshop
Work process
The main goal for this project was to find a way to improve user experience.
Reolene is a skincare brand and therefore it is extremely important to use correct words, visuals and images to connect with their (potential) customers. Skincare is a sensitive subject to many, because the given information on the webshop should feel reliable to customers, especially if they have never heard of the brand before.
After I received all the data I needed from my client, I started mind mapping different ideas with a strong focus on user experience. After a few brainstorm sessions, I came to the following three concepts.
Concept 1: Virtual Assistant
The first concept was to put a virtual assistant that could assist the user on the webshop. The goal is to make sure that users find what they are looking for.
Concept 2: Skin Type Quiz
The second concept is a skin type quiz. By completing this 2-minute quiz, they will find out their skin type and will be recommended a product that matches their skin type.
Concept 3: Filter
The last concept is a filter based on different product categories and skin types. The goal of this concept is to make it easier for users to find a specific product they are looking for.
Final concept: Skin type quiz and filter option
I then proposed my concepts and the visual representations to my client and received the following feedback. My client was very happy with my ideas and wanted me to combine concept 2 and 3 as one final concept. The final concept is a skin type quiz with a filter option on the product page. When the user completes the skintype quiz, she will get the results on her skintype. The system will then recommend a product that is good for the user’s skin type. If the user already knows her skin type, then all she needs to do is to visit the product page and use the filter to find a product that matches her skin type.
The screens of the hi-fi prototype are shown below with a short description about the functions. This project was fully focused on improving user experience. Thus, I will only discuss the most important factors of each page. It is important to note that the user persona for Reolene is a 37-year-old woman and will be referred to as “she”.
Homepage
I’ve made the following decisions for the homepage. I decided to make use of a header that contains Reolene’s unique selling points: free delivery from €40, free from harmful substances and proven to be effective. I have also decided to put a slider on the homepage that can be used to bring awareness on topics like eco-friendly lifestyle, newest products, natural ingredients and more (Screen 1).
Quiz
Users are able to do a free quiz on the homepage to find out their skin type. The quiz consists of 7 questions and it takes 2 minutes to complete it. After the user completes the quiz, she will then get her skin type results along with a product recommendation that matches this specific skin type (Screen 2 and 3).
Screen 1: Homepage
Screen 2
Screen 3: Quiz result and recommendation
Product page
I’ve decided to put a filter function that is based on skin type and face or body product type. The screen below is based on a scenario whereas the user visits the webshop and wants to find a face cream for her dry skin (screen 4).
The user then decides to click on the product to read the production description, usage, ingredients and reviews about this specific product (Screen 5).
Screen 4: Product page filter result
Screen 5: Product detail page
About us
Users can read more about the company’s mission, vision and product process on the “About us” page (Screen 6).
Screen 6: About us page
Skincare tips
Since Reolene also offers free skincare tips to their customers on their webshop, I decided to create a separate page for this type of content, because this way it can be viewed as a blog (Screen 7).
Screen 7: Skincare tips page
Think4
Redesign website for an IT company with an improved user experience
Background and motive assignment
Think4 is a full-service IT company that offers IT-solutions. The company has been growing fast the past few years and this led to some changes within the company. Think4 has more employees now and their work method has changed and improved. Because of these changes, Think4 employees couldn’t really see the company’s new identity on the website. The current website hasn’t been updated since a few years ago. Think4 hired me to redesign the website so that it expects the user’s expectations and matches their new identity. Their new identity was positioned by a branding agency
Client
Think4
Assignment
Create a redesign of the current website with an improved user experience.
Target audience
SMEs that need Microsoft solutions and other IT-solutions such as wifi, e-mail security and cloud.
Goal
Redesign the website with an improved user experience and a visual design that matches the company's new identity
Work process
In the beginning of my process, I wanted to evaluate the current website so that I could gather important improvements. For this, I decided to do a heuristic evaluation with Jakob Nielsen’s 10 heuristics. During my heuristic evaluation I evaluated in terms of usability, layout and structure, legibility and important visual elements such as colors and UI design. Based on my heuristic evaluation, I could conclude the following: The website contains a lot of text using IT jargon. This is an issue for users that aren’t familiar with IT terms. Aside from that, there’s a lot of repetitive information given. I also found that Important pages such as products and services aren’t easy to find. Some of the button labels aren’t clear and information about packages and prices were a bit hidden.
During my research phase I interviewed the owners and employees of Think4. Based on my interview results I could conclude that the current website doesn’t show much of their new identity. As mentioned above, the branding agency positioned Think4 as humorous, friendly and supportive. However, the current website doesn’t show this side of the company. They also mentioned that they their service often confuses potential clients, because they don’t know what to expect from the company. This is why Think4 puts a lot time and effort during the preparatory phase with (potential) clients to make them understand their work methods.
My next step was to conduct a target group analysis so I can understand their needs better. For this, I interviewed three clients and two potential clients of Think4. I took all the interview results and defined them as user stories.
After my research phase, I had a few brainstorm sessions on my own and with a colleague using the “How might we“ method. In order to do this, I gathered all the problems and insights from my target audience analysis and came up with a HMW question for each problem or insight. I chose this method, because this made me come up with creative solutions. For example, one of the insights was that the current website doesn’t have a ‘how we work’ page. This is called ‘werkwijze’ page in Dutch. My solution for this insight was to simply create a ‘werkwijze’ page with clear information about how Think4 works with their clients. After coming up with solutions for each insight or problem, I came up with three different concepts. The point of doing this is to have a specific focus point with each concept.
Concept 1: Support
With this concept, I want to show more of the support side of Think4, such as 24/7 helpdesk and remote control help that think4 offers to their client.
Concept 2: Packages
With this concept, Think4 has IT solutions in packages for small, medium or big offices. The products and services are shown in three different categories: small, medium, large.
Concept 3: Partnership
Think4 is a Microsoft partner who works WITH their clients, not for. With this concept, I want to show more of the partnership side of Think4. Elements like partners and work method are the biggest focus point for this concept.
Final chosen concept
After my brainstorm sessions, I presented my concepts to five (potential) clients of Think4 individually. These were the same participants from my target audience research. I asked each particiapnt which concept they liked most and why. A few liked a mixed concept between concept 1 and 2, but the concept that was chosen the most was concept 1 Support. They find it extremely important to show the support side of the company more, because of the 24/7 helpdesk. It’s what the clients really love about the company, the fact they can be helped anywhere and anytime.
Lo-fi prototype
After my concept development phase, I created digital wireframes in Adobe XD which then I presented to the same group of participants and my coworkers. After gathering enough feedback, I created a hi-fi prototype.
Hi-fi prototype
Overwatch app
Concept design for an Overwatch app for overwatch players
Inspiration
Overwatch 2 is one of my favorite games to play online with friends. However, I noticed that there isn’t any other way to purchase skins, view statistics and connect with friends other than being online in the game. That’s how I got inspired to make a concept design for an Overwatch app. The Overwatch app allows players to connect with other players, view their gaming statistics, get information about their favorite heroes and purchase items.
Work process
Starting this project was a fun challenge for me, because I wanted to create something that doesn’t exist while learning new designing skills. Before I started with the design, I first analyzed the interface of the Overwatch game, so that I can highlight the important elements of the game. I made notes and some quick sketches while analyzing the following screens: career profile, statistics and shop. After my analysis, I looked for inspiration on the internet and gathered designs that’s close to my goal. What inspired me the most were designs for interfaces related to videogames that were made with the glassmorphism style. The glass effect gives a clean and translucent look if combined with a vibrant color. And that’s exactly what I was going for. Overwatch is a competitive game, but also fun and vibrant and I wanted to show that with my design.
Screen 1: Heroes
The Heroes screen provides information about each character, such as background story and their abilities. On this screen, it’s about D.Va’s background story and her abilities. The user can tap on the left or right arrow on top of the screen to change the hero.
Screen 2: Career profile
The career profile screen provides all the statistics, such as the most played heroes, time played, rank, overview of different game modes (unranked, competitive, arcade) and gameplay highlights of the user.
Screen 3: Shop
The app also allows users to purchase skins or other kind of items in Overwatch 2. User can purchase with their Overwatch coins.
Netflix app
A concept design for Netflix Desktop app for Apple users
Inspiration
I love watching good (animated) movies, series and anime on Netflix with my macbook, but I dislike the fact that there isn’t a desktop app available for us apple users to download. I’d always have to visit the website and browse from there. That’s how I came up with the idea to design a Netflix desktop app for Apple users.
Work process
For this design, I wanted the app to have a clear overview of all the important elements of Netflix while keeping it clean and minimalistic. Aside from the list of movies and series, I focused on the social factors too, so that users feel connected with their friends. This concept design shows what the user’s friends are currently watching. They’re also able to create a watch party with friends in the fastest way.
PlayStation desktop app
A concept design for PlayStation desktop app
Inspiration
The PlayStation app inspired me to create a desktop app, because I think it would make it more accessible for users to browse through games, purchase games, manage their settings and connecting with others in their own time.
Before my design process, I was feeling inspired, but I didn’t exactly know how to design the layout. It was challenging, because I wanted to show important elements of PlayStation, yet keep it really minimalistic with a clear overview. The focus was mainly on a clean visual hierarchy. For this, I looked for inspiration online and analyzed the PlayStation app and combined everything together to give it a fresh yet familiar look of Playstation with a clear overview.
Concept 2: Skin Type Quiz
The second concept is a skin type quiz. By completing this 2-minute quiz, they will find out their skin type and will be recommended a product that matches their skin type.
Concept 3: Filter
The last concept is a filter based on different product categories and skin types. The goal of this concept is to make it easier for users to find a specific product they are looking for.
