Hi, I'm Sunniva. Welcome to my projects.
Here you can see more in depth information of the projects I was working on fall 2022:
Fødehjelpen
During November 2022, I been working on the Project Exam. Together with one classmate we designed Fødehjelpen. Fødehjelpen is an app for mothers staying at the hospital after giving birth.
Other projects:
3D design
I started looking in to 3D design using Spline, I am fairly new to this but I love what I have learned so far. You can click on the links to see more of the design.
Panem
Panem is another weekly assignment where I designed a backend system for a bakery.
HealthsOwn
HealthsOwn was one of the recent weekley assigment we had about desinging a mood tracker.
Ada
Ada is a project I did on my own. Ada is a system we currently use at work, and I wanted to get my ideas out how it can work better.
Skysmart
Skysmart was a weekly assignment where I designed a seamless system for ticket ordering for phone and applewatch,
Project
Exam
Fødehjelpen
There has been a lot of debate around maternity services across the country: midwives' rebellion and debate posts about what it is like to give birth at hospitals in the last couple of years. Increase in postpartum depression, anxiety and little support for new parents are problems in today’s society. Feeling alone and unsupported after experiencing a life changing moment should not be happening today. Is there a way to bridge these problems and women health with technology?
As a designer it is important to observe the user from a perspective and emphasize. We wanted to research further on the what causes the problem by researching asking mothers that has been in a situation. With more insights, we can also design a tool that will be helping both the user and the society.
Duration
4 Weeks
Scope
End to End Product Design
Branding
UX Research
Logo Design
Role
End to End Product Design
Branding
UX Research
Defining the Problem
How can we develop a way for newborn babies and mothers to feel supported throughout their stay at the hospital?
To find a solution to this problem, the Design Thinking process will help us design an application for new mothers and parents that stays at the hospital after birth. And perhaps even help their daily mental health. By creating a well-organized and structured research plan we will be able to solve this project effectively.
Providing the Solution
Emphatize
Without empathy for the user, it is not possible to design a solution for the problem you are trying to solve. This is why empathize is the first step in the Design thinking process.
Methods & techniques:
literature review
Qualitatvie research method (secondary)
surveys
Quantitative research method (primary)
semi-structured interviews
Qualitatvie research method (primary)
competative analysis
Data analysis technique
affinity mapping
Data analysis technique
Literature Review
In Norway, we supposedly have the best health system to give birth, but new mothers says different. On April 27, 2022, women gathered in Oslo for a demonstration to demand better pregnancy, birth and maternity care. The lack of support and follow-up has consequences that are offenses against the Specialist Health Service Act. One of the offenses are for example; that the management at the Hospital does not ensure proper observation of mother and child. Consequences of the offenses can lead to small and vulnerable newborn children going home without the nutritional situation being well established. They are thus exposed to complications such as jaundice, major weight loss, and other infections (Hunnestad & Klemetsdal, 2018).
According to a study by Blue Cross Blue Shield (2020), the rate of which women in the US are experiencing childbirth complications increased rapidly from 2014 to 2018 with a 14% rise in cases. Norway is also seeing a rise in the average age of first-time mothers, which increases the risk of complications that can can negatively impact the the mother or child in the short or long term (FHI, 2018). Around 7,5% of pregnancies in Norway result in premature birth (NHI, 2021). Both of these circumstances can lead to longer than average hospital stays after birth, and may cause parents and the child to have to be separated or mothers to have to be alone, without their support system. Studies have found that mothers can experience great emotional stress if separated from their newborn during the first week of life, including when the child does not have a serious illness (Henderson, Carson, Redshaw, 2016).
New mothers have anxieties and fears about their new role and don't feel prepared enough for the time after giving birth. Because of this, health care providers need to recognize this and ensure care is individualized to address each woman's/families particular concerns. (Foster, McLachlan, Rayner, Yelland, Gold, Rayner, 2008). This is especially true for mothers who experience complications affecting them or their child. As a new parent, the current system does not meet the needs and has consequences for the family. The midwives also call for more people as they experience great pressure (Føleide, 2022).
Research
Research was completed as the initial phase to understand and define the users - what they want to see and what would aid in their own and the baby's health journey, potential pain points, and features they hope and wish for. I needed to understand the user needs in order to build foundation for the design and to know what to design for.
Research objectives
Competitive Analysis
Jordmor
hjem
Although there are no Norwegian apps that covers this problem on the market currently, a competitive analysis offered valuable insights that there is an app in development now.
The maternity app Jordmor hjem will provide digital support for parents who quickly return home from the maternity ward at St. Olav's hospital after giving birth. Melhus will be the pilot municipality, which is still under development, the idea is that this app will also become a national solution.
It will provide digital support for parents who quickly return home from the maternity ward at St. Olav's hospital after giving birth.
Examples of some of what the app will contain are modules such as:
• my data
• my agreements
• everyday life at home
• nutrition
• messages
• video calls
(Melhus kommune, 2022)
Knowing what the app will focus on is helpful because these modules can be necessary to explore in the solution to this project as well.
strenghts
weaknesses
MamaMend is a platform that aims to guide new mothers in their post-partum recovery through making care for and information about Maternal morbidities easier to access and lowering the barriers of seeking it out.
"Our mission is to help new mothers get the high-quality professional care they need after childbirth."
(MamaMend, n.d.)
MamaMend has an app that is primarily for mood and symptom tracking, and post-partum education through articles. Their feature of finding professional care in their area is only available through their website.
Notable features:
• mood tracking
• symptom tracking
• daily goals and checklist
• explore page of articles and health conditions
These features can be valuable to explore for our solution.
strenghts
weaknesses
User Interviews
After gaining an understanding of the problem that mothers do not feel supported throughout their stay at the hospital by literature research. We moved onto user interviews where we were able to dive into personal experiences and concerns, needs, and ask more insightful questions into what users have faced during their time at the hospital after given birth.
Summary:
In general, all participants had experienced negative events at the hospital. Many mentioned that they were vulnerable, alone, and had lack of information.
Survey #1
We created two surveys as part of the secondary research.
I recruited participants to one of it by posting the survey in different relevant forums on facebook like "slemmehelse" Hey girl!barsel".
I got 47 answers about women hospital stay experiences and anxiousness.
The demographics of the participants of the survey was:
98% female, mostly between 26 - 35 years old, work full-time and is in a relationship.
On the questions regarding their expereince of the hospital stay in communication the answers was split, but rather in the middle. Most of the participants prefer to communicates with texting or snapchat.
64%
Of the participants has given birth at the hospital
85%
Of the participants has felt worried and anxious
64%
Of the participants deal with anxiety by talking to a significant other
Survey #2
by researcher Maria
The respondents were mainly in the age groups 18-24, 25-30 and 44-50.
The second survey included both multiple choice questions and free text questions.
In the survey description it was made clear that we are looking for answers from women who have given birth, and especially if they have experienced complications that led to a longer than average hospital stay.
The survey was open for 3 days and 31 participants responded. One respondent answered "no" to the question "Have you given birth?" and was excluded. This left 30 responses for analysis.
How long were you in the hospital after giving birth?
Under 24 hours
1-2 days
3-4 days
5-6 days
7 or more days
Do not know
If you experienced being separated from your child, did
you feel that you received updates and information from
hospital staff without having to ask for it yourself?
Yes
No
Not relevant
60%
experienced being alone in the hospital without partner, family or friends
43,3%
of respondents had experienced complications that affected the length of the hospital stay
40%
of the participants experienced having to be separated from their child during the hospital stay due to their own or the child's health
Analyzing
Interviews , literature review and survey
We used an airtable for all the facts from the interviews and divided 133 facts to 6 groups.
After that the facts was categorized in an affinity map using miro board.
This made it possible to come find insights and conclusions of the research
Why do people feel worried and anxious?
Many feel like a bother during their hospital stay and avoid seeking out information or help due to fear of disturbing hospital staff.
What communication preferences do people have?
People prefer to communicates with texting or snapchat.
Insights
When do people feel worried and anxious?
When separated from their child, mothers have a great need for information and updates on the child's condition.
Mothers especially feel a lack of support when partners are not allowed or able to be at the hospital after birth.
When mothers are left alone the time in hospital after birth they often feel anxious, worried and clueless.
Who should we solve this problem for?
The time in hospital after birth is an overwhelming time for many new mothers, making them feel vulnerable and worried.
What factors cause this problem?
Lack of updated information about mother or child's condition is a major issue that leads to stress and worry for relatives.
Define
User Persona
User scenarios
Before arriving to the hospital Silje downloads an app to make her birth at the hospital stay easier.
The midwives takes her baby to a different location and Silje is left alone to rest and recover
Silje gives birth to a beautiful boy and is feeling many emotions.
She updates her app with a happy mood.
Alone in the ward an update on her baby pops up as an alert.
She can see that he is doing fine and Silje feels better and less concerned.
Hi mom! I am doing ok.
Please get some rest.
The happiness takes a sudden turn as she lost a lot of blood and needs to go to surgery
Silje updates her mood and and looks at the information presented. She clicks on the usual reasons to learn more.
Heading home with her partner, Silje feels more informed than before.
For example; It was easy to fold the stroller as she learned about that and many things in her app during the hospital stay.
User scenarios
Silje is recovering from her
surgery and feels overwhelmed and vulnerable.
So many questions are going through her head. "What exactly are my complications? How is my baby doing?" Without her partner, even getting a glass of water feels like a big issue.
Silje enters a "non-urgent" alert letting staff know that she would like a glass of water.
While she waits she reads up on the app's information page, where she finds out more about her complications.
Getting ahold of the nurses is difficult and Silje doesn't want to ring her hospital alarm for minor things like a glass of water or for every question that appears when people have more urgent needs.
A nurse gets a notification and brings Silje a glass of water as soon as they can.
Silje remembers that the app she has for baby updates also lets her communicate with hospital staff about her needs.
She can send the staff alerts if she needs to talk to someone, has questions or needs help with something. When you send it you can enter if it is urgent or not.
Silje feels good knowing she can communicate her needs to hospital staff and get the support she needs without feeling like she is bothering them and disturbing them from more urgent matters
Brainstorming
Process: Out of the How Might We questions we came up with we generated ideas and solutions to them. With all the different ideas we discussed
how this could be further used in an application and it turns out a lot of the ideas on how to solve the different HMW can be merged in a way that it can all be a part of it together.
HMV #1: How might we help mothers and newborn babies access support during their hospital stay?
HMV #2: How might we make mothers able to keep track of their babies?
HMV #3: How might we inform mothers and relatives about birth, hospital stay and maternity?
HMV #1
daily information alert
Comunication system
e.g *get water* I need to talkt to someone*
Statistics on common concerns by new moms to reassure that feelings are normal
chat bot that answers conserns (like flo)
Mom can create daily updates on her or baby and select who should have access (friends, family etc.)
HMV #2
daily information alert
daily photo of baby
Status updates on baby by nurses in app
Check live by camera (sound/motion activated alerts like Ring)
HMV #3
daily information alert
snapchat kind of communication, can send snap of something and ask
information library to search different medical terms and get more info
List of common questions that can be good to ask in the hospital for new moms
Mind map
With all the different ideas on the HMW questions from the brainstorming workshop, we wanted to organize them in a mind map using Miro to generate even more ideas.
Using a Miro board is very helpful to do this. Seeing all the ideas together we found the top idea.
Brainstorming pt.2
Top idea
App where mothers can ask questions, have conversations (written) with; chatbot, midwvies, baby, relatives
App that combines best of all options, communication channel with midwives, baby updates, easy way to have needs met e.g get water, danger, need to talk with someone.
New mothers in Norway feel anxious, worried and alone because they are struggling to access adequate support, knowledge and information during their hospital stay after birth. If we could solve this problem, it would positively impact new mothers by alleviating some of the worries and stress they face in the post-partum period, as well as reduce some of the pressure experienced by midwifes and hospital staff
App that makes mothers able to click different statuses, click different needs, and see daily snaps updates from partner, relatives and baby
App that monitors baby, possible to facetime relatives, partner midwives.
Send voicemessage to midwives about needs
Name of app
Jordmor assist
Jorunn
Birth assist
Barsel assist
Fødselsstøtten
Trygg Fødsel
Fødehjelpen
Requirements &
Information structure
User - flow
To get a comprehensive look into the site needs, we created user flows based on the Fødehjelpen user needed to achieve:
The user flow was used to help me determine what functions and pages I would need to be designing for, for the user to complete their tasks.
sketches
Mid-fidelity Wireframes
In order to further explore our ideas, mid-fidelity wireframes were created. This is helpful to visualize our user flows, what type of content should be included as well as its structure.
Send request
Our research shows that many feel like a bother during their hospital stay and avoid seeking out information or help due to fear of disturbing hospital staff. The request feature intends to lower the threshold of expressing your needs, and allows the user to communicate if it is urgent or if it is more of a non-urgent basic need. The current hospital solution for this is a call button or cord and does not communicate exactly what the user needs.
Insights
Many new mothers describe a lack of knowledge about their new role as a parent, and if them our their baby experienced health complications, they did not feel properly informed about them. The Insights page meets these needs by providing articles, videos, podcasts and more about common questions, concerns and conditions.
My baby
Our research shows that new mothers have a great need for updated information about their baby's health and care, and often did not feel like it was sufficient and given without having to ask, To meet these needs and pain points the "my baby" page is designed to be updated my midwives whenever baby is fed, weighed and notes are added.
My account
Information about the mother's health, her medications and documents can be seen under "my account" as difficulty keeping track of this was found to be a pain point for new mothers during their hospital stay.
Style tile
We began logo design with looking for inspiration through what is currently offered on the market for "midwife apps" and different colors and design patterns we thought would be fitting for the Fødehjelpen brand. We started creating logos by experimenting with the a baby icon and wanted to create something fun, modern, and welcoming.
I started learning Spline after the project exam and have now made a 3D - design of the logo.
Typography
Heading 1
Poppins 20px, Bold
Heading 2
Poppins 18px, Medium
Heading 3
Poppins 18px, Bold
Body
Poppins 16px, Bold
Primary buttons
Secondary buttons
Other tiles/buttons
Color
#EBEBEB
#AF9DFF
#000000
#333333
The main theme of the app is pastel lavender which is consider the most non-threatening color. The choice of this color is that new mothers will feel calm going in to the Fødehjelpen app.
Primary
colors
#9A67FF
Accent
colors
#CD3DBD
Darkmode
#51E5E6
#F20C45
The primary and secondary colors are all considered in regards to WCAG 2.1
Alert
colors
#008541
#EE0015
Accent 3 &4
colors
#FC85F0
#FFDE3C
High fidelity designs
On the right showcases the Hi-fi designs we created for Fødehjelpen based off of the research, branding, and information collected, while adhering to visual hierarchy rules and Nielsan Norman Heuristics.
The first design developed after the usability testing we did in different rounds and with the feedback and insights we were able to iterate the design.
2. First iteration
3. Second iteration
4. Third iteration
iteration 3
Send request
Since the last testing showed that the send request now was harder to see than before we made the background like frosted glass so that section would "pop" more.
My room
This part is kept at the top as it need to be easy to access for the user to be vomfertable in the room. All testing was very positive to this function.
My baby
After testing we realized users lost some control of what they could do with the app or where they were when they first enter the app. Because of this it was moved.
My health
Moved higher up in the section.
Media
Changed name and moved from the navbar.
Chat
Moved closer to the thumb and is also available at the top.
darkmode
Considering this is an app
designed for mothers staying at the hospital after giving birth. We wanted to implement darkmode as this is a great feature when you are laying in bed at night and you need to adjust the view for that. Also it will be helpful if you are staying at a double room for example.
Testing
Based on the primary persona 5 participants was selected to test. Silje a way to contact midwives in a low treshold way, and get in contact with her partner quickly.
Since we want an app that is for mothers, gender is a requirement to test this app. One common thing for all participants was that they are females either given birth before or are planning a pregnancy soon.
Females
Age between 30-60
Has either given birth before or are about to
Is motivated by an efficient tool to communicate
Uses phone for most tasks
Resident in Norway
After the first test we did of the wireframes we took the new insights in to consideration and started with the high fidelity prototype with some iterations and discussion. With new testing we can get even more insights of the new version of Fødehjelpen.
We decided to prototype the app without the select of mood option and rather focus on a dashboard that makes the user less dependent on a midwives coming to the room, and add an easy access to ; my health, the chat, controllers of light, temp and darkmode for the night time. Therefore some tasks from the wireframes are in the new testing as well while others where added.
Goals
Metrics
#2 Request a need to the midwives.
Scenario:
#1 Find out what time baby was last fed
Scenario:
Let us say you want to enter a new mood update to receive the support you need in the form of tips, articles, supportive words and more.
Let us say you are recovering in hospital after giving birth and having to undergo a surgery because of birth complications. YYou are feeling hungry, thirsty or something else, but are not able to walk and get it yourself.
Testing
#3 Send a voicemessage to your birth support chat
Scenario:
Let's say you want to talk to someone and want to know new status and hear from your partner
Scenario:
#4 Find out what medication you are currently on
Let us say you want to find out your own health information on this hospital stay..
Tasks
#5 Find a video to watch
Scenario:
Let us say you want to watch a video to learn about the post-partum period.
#5 Turn the lights off and adjust the heat in your room.
Scenario:
Let us say you want to turn off the lights and adjust the heat before you go to sleep but don’t want to bother the staff since it is hard for you to get out of the bed.
Test Findings:
Quantitative Data
Task | Task Completion | Non-critical errors | Task completion Time |
1 My baby | 3/3 | 1 | 23,74 |
2 Send request | 3/3 | 6 | 20 |
3 The chat | 3/3 | 2 | 30,54 |
4 My health | 3/3 | 1 | 12,53 |
5 Insights | 3/3 | 2 | 9,82 |
6 My room | 1/3 | 7 | 40,66 |
Task | Task Completion | Non-critical errors | Task completion Time |
1 My baby | 3/3 | 1 | 23,74 |
2 Send request | 3/3 | 6 | 20 |
3 The chat | 3/3 | 2 | 30,54 |
4 My health | 3/3 | 1 | 12,53 |
5 Insights | 3/3 | 2 | 9,82 |
6 My room | 1/3 | 7 | 40,66 |
Test Findings: Analyzing
After each test the insights was added to the affinity map to see the possible iterations.
After the fourth test with Alexandra we saw some tasks was harder than before the first iteration.
Because of this we needed to brainstorm again to make home better and rearrange it a different way. It is also interesting as this iteration takes us back to many of the ideas we had in the very beginning when sketching out the low fidelity wire frames.
Send request:
After discussion and looking at all the test results thus far, we found that keeping the send request at top is a necessity and the primary function of the app.
My room:
The controllers of the room might not be the most important function but still a necessity to have easy available when you are going to use it.
My baby:
Instead of having information about my baby as the first content you see we separated each page in clickable boxes.
This way everything is sorted better and the user are able to have better control of all the things possible to do with the app.
My health:
After the first iteration "my health" is the section that had the most significant change in task completion time. Moving my health to the bottom after "my baby" was not making the app more user friendly or intuitive. Because of this we made it a part of the selection on the home page and will be on of the very first things you notice in the menu after my baby.
Media:
We decided to change the name from "Insights/information" to "Media". Mostly because this section is literally different media that the user can listen, watch and read about.
From testing with Alexandra and all the other tests, this section has the least qualitative feedback and users did not seem too interested in clicking around exploring.
Feedback from Alexandra's test was also in regards to information. Staying at the hospital also makes the user in need for information about the hospital e.g visitor times and so on. Because of this we added FAQ to the "my health" section to get practical information in one place.
The chat:
Instead of a large chat box at the top that was not intuitive for some users, and also did not seem too clickable. The chat is now in the right corner. Easy access to the thumb and and also an option at the top bar so you see it regardless of what page you are on,
Prototype
Prototype process
Here you can see the process from first wireframes to 3. iteration on some of the functions of the app. The chat had small iterations in the UI and colors, and is not added here.
Reflections
Designing an entire app was both an exciting and challenging process. We had the creative freedom to provide solutions to real issues that I am personally passionate about. Researching into how mothers experience their stay at the hospital, current tech in this industry, and listening to real stories from women that have struggled at the hospital was both eye-opening and truly highlighted real gaps in how it is giving birth today and the resources available. Being able to design an app that has the potential to benefit users to get better support in their own and their baby's health journey was a fulfilling experience.
There are so many additional features we would like to implement into this app if we had more time - including designing the system for the midwives to use in this scenario, export of information and sharing with family, adding a group of relatives in the app/chat, creating a user library where the user can have a single place for pictures saved photos, messages etc., making it possible to do more or additional requests of orders. We believe there is a lot more to explore in the world of femtech and so many more ways that design can be used to benefit women everywhere.
Other projects:
3D design with Spline.
After the project exam I have started looking in to 3D design using Spline, I am fairly new to this but I love what I have learned so far. You can click on the links to see more of the design.
HealthsOwn
Duration
1 Week
Scope
Task flow: track mood
Branding UI design
Sketching
Based on the persona Stephen, a 35-year-old sales rep who works long hours, the design of HealthsOwn app has taken his daily life in to consideration.
HealthsOwn offers all the ways Stephen wants to track his mood and health habits in an easy, quick and fun way.
When I first starting sketching out my ideas for the app on paper, I wanted to emphasize on the design of everything being like a circle,so it was easy to see a context of it all. moving to digital I realized making a calendar in a circle form was not the easiest, and maybe not the most organized look.
I also wanted the mood logging to be visualized as a face that changed appearance as you dragged or swiped. With the persona in mind, it was important to keep it as simple and fun as possible.
Designing
After sketching the sign up flow and mood logging, I started designing the avatar faces for the different moods.
The moods are consistent trough the designing so the user connects the different colors to each mood and can easily navigate in the app and organization of the different days.
Logging the mood is done easy by swiping to the mood the user feels like for the day. After confirming the mood for the day, the user is navigated to the homepage where it is possible to rate the day with an easy star system. If there are any notes for the day or activities that needs to be logged, the user simply clicks on the + sign to add icons for each activity done that day.
Prototyping
Prototyping the HealthsOwn I created different user flows for the sign up process, onboarding, logging a mood, adding a daily activity and rating the day. See the prototypes here.
HealthsOwn has a consistent and clean design, but it is hard to say before user testing if the design is intuitive enough for a user., even though it is aimed to be. Prototyping with empathy for the persona however, this is the goal.
information Architecture
Sign up
User flows
Onboarding
Skysmart
Duration
1 Week
Scope
Order ticket Product Design
Branding
Persona
Watch Design
One of the weekly course assignment was to design an app and smartwatch that you could seamlessly book a travel.
Persona
Name
Age
Location
Occupation
Daniel
35
Bergen
Front-End Engineer
Persona scenario
Marital status | Married |
Kids | No |
Annual income | $70.000 |
Occupation | Front-End Engineer |
Frustration | Messy application navigation. Always in a rush and therefore forget. Wants smart AI in all devices. Hard to relax and make time for other things due to frequent travels. |
Sources of Info | Social media, newspapers, online news platforms, word of mouth. |
Interests | Travelling, cooking, sports, stocks. |
Behaviors | Makes a business travel almost every week. Is a tech geek, loves to buy the newest gear. Has little time for friends and family because of a hectic lifestyle. |
Goals |
Daniel makes a booking for a flight travel from Oslo to Bergen through the Smartsky app.
He is frustrated that he will be late to the flight.
Then he remembers he can check his app for the boarding pass. The Smartsky app is already synced with the watch.
The booking then syncs to his Apple watch Skysmart app with all the details and information.
Daniel grabs a snack after checking in and forgets about the time. His watch is vibrating and he can check gate and boarding quickly.
Waiting in line for checking in Daniel can't find his confirmation email for the booking.
Ideate
$100
$300
I started with different lo-fi sketches of the different wireframes to find the best idea for the booking app on phone.
Merging the different ideas made it possible to create the solution with the best UX in mind.
I did the same for the watch app. The different sketches focused on showing all the information needed in an easy and clean way.
Prototype
Prototyping the best solution using Figma I focused on a seamless way of booking a flight ticket for the user and also in regards to finding the best price.
The first choice is what kind of trip it is. For this assignment the choice is a one-way trip. After adding the flight information, the user then can drag through different prices and days, or use the low-price calendar to get an overview of the different prices this day.
Traveling with Norwegian airlines the colors of this booking is matching that flight company. Once the user has made a choice the box is grey to indicate the different state.
After choosing either premium or economy travel the user can either choose a seat or skip on low right corner. The seat selection shows some part of the plane and will show the different price inside the seat. Premium has the dark blue color while the economy has a lighter color to distinguish these two.
Next step is adding the travelers information or log in.
At the last trip the details are summarized before the user can add the card information. Another design would be to add for example apple or google pay.
Skysmart watch app
The Skysmart app syncs to your apple watch so that you are able to see the most important details of your booking after buying a ticket trough the Smartsky app on your phone.
On the apple watch the colors is in relation to black background as this is the preferred background color on a watch.
The red color is combined as it stands out on this background. Using the wheel on the right top corner of them phone you can scroll to the depart information of the travel.
Here you will see the gate and status of the flight. The boarding and duration.
Scrolling further is the boarding card, time and to/from. On this page the user can easily scan the QR code to board.
The app shows everything needed to be organized flying in just 3 wireframes. See the prototype here.
Duration
1 Week
Scope
Backend Product Design
Branding
Ui design
Logo Design
Imagine you've been briefed to create a website dashboard for a new bakery that has just opened its doors to the public in Kristiansand, Norway called Panem. In this case, the dashboard will only be used on desktops or laptops (wide landscape screens that are 1920 x 1080px) – not mobile. In order to track its finances and ensure success, the bakery needs a dashboard. They already have a few direct competitors in the area like:
Spend a few minutes sketching ideas for your dashboard and choosing which charts to use.
Conduct basic visual competitive research to get an idea of the competitors' branding.
Develop a high-fidelity look and feel for the new bakery’s dashboard using the software of your choice.
Create one single webpage view showing a dashboard with five charts that track the statistics mentioned above.
COMPETITIVE Analysis
EDGARS KONDITORI
DRØMMEPLASSEN
Company info
Description
Edgars is a baekry from 1906 located in Mandal. They have further information about the history of the place and a photo showing the people working there.
Drømmeplassen is a café and bakery in Kristiansand. Their website don't really have any further information or description .
Strengths &
Weaknesses
Strengths
Weaknesses
Strengths
Weaknesses
Screenshots
process
After sketching different ways the information could be presented on the Panem dashboard I started making a prototype in high fidelity. See the prototype here.
playful
The main branding of Panem is playful and pastels. Using colors that stands out from the typical brown and dark bakery theme. I also created a lot of icons to use for the different themes.
Laidback
Laidback is also a part of the branding as the icons and rest of the setup has a simple.
sketching
dashboards
Ada
Currently I work as a customer service advisor for the The Norwegian Public Service Pension Fund. Every day I use the program called Ada. A browser-based interface that shows everything about the customer I am talking to and helping.
As Ada is just renewed from an old program we were using, this new design was made to make our everyday easier.
However, I found myself many times thinking how this could be designed in an more intuitive and a "less is more" way.
I decided to prototype from the sketches I had made while working. Further I talked to our current UX designer and developer.
Our current Ada:
!The pictures used are from a test solution and is not based on any real individuals.
My suggestion and wireframe:
The main difference between the current Ada and my prototype of Ada is the way the menu is set up.
The current Ada has most of the the functions at the top and not really a system in regards to how things was put in that order.
I first started by sketching out the different topics that is related to each customer as; personalia, employee, cases, and adding tasks.
I wanted it all to be on consentrated on the left side, and also move the information (name and personalnumber) to the top left corner because that is where the focus goes first. I also added a copy button so you can easily copy the personal number which is used mulitple times during the day.
Personalia
One frustrating thing with the current Ada is to get a quick overview over the customer situation. In the current Ada; name, personal number, how many children the person has, address, employee etc. are spread around on the page and header.
It was important for me to design the personalia information part as intuitive as possible so you can look up a customer and get a quick glamps of who they are and what they do. Also, it will show the current payments of pension.
In the new prototype of Ada, I desgined everything about the customer in one pop up that comes up if you click on personalia. The name and personal number are always in the top left corner.
All the information is the same, but it is presented in an easier and more structured way.
I also used symbols to explain the different inquiries like email, phone number.
Instead of an explaination of the pension I used the two different logos for the pensions from SPK and NAV.
Employee
The first thing you see when going to the current Ada is the employee, which is not the first and most important aspect of the customer profile.
In the new prototype of Ada, you will see who the employee is as you hover over, when you click you get more information.
This is of course possible to change later. Since sometimes the customer does not have an employee, there can be a change to the prototype that shows employee in any state.
Cases
As I am not a caseworker for SPK, the case section has little to do with my daily life at work but I do need to give customers information about statrus of the case.
The display today of an open case is all the way to the right of the browser ont he top right corner.
If there is an open case the button says Yes (1) with the color red. This design is not very intuative even though it has the red colored button, it doesn't stand out as much for a persons attention to the case.
In my design I wanted this to be displayed in a better way so that I can see quickly when talking to a customer that there is a case ongoing. The same infomration is shown in my design of the case, but I am thinking of a different way to show this as well.
List of short-cuts
“Arbeidslisten” is a list of short cuts you can add so you can easily click to other integrations with Ada.
When this first came it was great because in order to get the full overview of a customer you need to have multiple tabs open in order to see it all in different programs. Ideally this should be built in a different way, but since that is not possible having short cuts that is customized to you whether you are a case worker or customer service rep is great.
The current design uses colors for the different links, and you add them to the top of the tool bar by clicking the star, which is pretty standard when it comes to favorite something.
I kept this design, but instead of having it located at the most important spot on the page and a s a waffle menu, its is now added to the menu like the rest. In the current Ada a button with the short cut is added to the header tool bar as a white button with a colored circle. I chose to color the entire button as this keeps the links even more separate from each other and an easier way to navigate.
Other functions
Dark-mode
By going to the top right corner and clicking on the three dots you can choose dark mode function. You will probably also stop for a second to read that it is in BETA and that it is only for casework. If this is necessary to know is not really up to me, but I did remove it from the prototype and placed it at the bottom left corner for a reason
Minimize menu
One function that is not currently available in Ada today is to minimize the menu (also since there is no current menu).
I added this function to my design because I know looking at the log and inquiries under Phone calls, emails, reports and so on is good to maximize and there the menu should be possible to minimize.
By clicking on the hamburger menu on the top left the menu will minimize to show icons only. The icons represent the different things to do/tasks. I am still working on this function as the hovering state is not complete yet.