Web store facelift
Web store facelift products
Web store facelift check out
Original web store
Original Web store products
Original web store check out

Web store redesign

UI 

Sketch, Zeplin

In this project the client wanted a quick facelift of their web store to match their revised graphical profile


You can view the client's original design at the end of the slide show.


The most challenging part: Redesigning the store in under 1 hour and creating something that would also be easy for the developers to update. 


The most fun part: Focusing on minor changes that would still make the user experience and the UI a lot more pleasing.

OperatorPortal_deviceView
OperatorPortal_deviceDetails
OperatorPortal_pairing
ConnectiveMessaging_portal2
ConnectiveMessaging_portal edit

Web portals

UXUI | Frontend development

Sketch, Zeplin, React JS, Material UI

The goal with the first web portal project was to create a simple and cost effective solution that could also be white labelled and used in other projects.


In the first project, the client wanted an admin portal to monitor their customers' smart home equipment (gateways, smoke detectors, movement sensors, etc.).


For the second project, I designed an admin portal for the My Neighbors app described above. This was so that the property owners could add tenants, send out messages to the app and manage contact information and documentation. This portal was based on the design and UX i made for the Operator portal mentioned above.


In both theese projects I compiled a requirement specification from various documents, designed the UX and UI, and coded the frontend part of the first portal.


The most challenging part: Ensuring all specifications criterias and functions were met, and limiting myself to using UI components in a React component library to keep the design hours to a minimum but still creating something visually pleasing and easy to re-use 


The most fun part: Demo the portal to the client and hearing them say the interface and design felt easy and intuitive to use.


Seeing that the UX and UI work I put into the previous portal was re-usable and easy to apply on a completely different project. 

Confirmed service bookings
Laundry booking calender view
Laundry time slot
Delete booking
Widget screen
Message app
Message app write message
Message app new messages
Message app empty states

My Neighbours App

UXUI

Sketch, Zeplin

The brief was to create widgets for tenants to use for booking services and chatting with their neighbours in an apartment complex. The widget was to be implemented in the client's existing mobile app for IoT and smart home services.


The most challenging part: To research and understand the flow and UI components in the existing app, and to create an UI that would match the look-and-feel made by another designer.


The most fun part: Working closely with the developers to discuss the possibilities and restrictions of the already coded UI modules.

City services onboarding 3
City services onboarding 2
City services onboarding 1
City services onboarding 4

Onboarding

UXUI

Sketch, Zeplin

The client wanted a proof of concept for a city service app. In this project, I designed the onboarding screens for the different tabs in the app.


The most challenging part: Writing short but informative copy that would make the users instantly understand what the different tabs would contain.


The most fun part: To interpret the clients graphical manual that was mostly based on print materials and apply it to a mobile app.

Energy start
Energy overview
Energy overview details
Energy overview cost
Energy goals
Energy overview stats

Power consumption 

UXUI | Research

Sketch, Zeplin

In this project the client wanted a small facelift of their previous power consumption widget but also to add a completely new tab for the household energy loads.


I improved the UX by moving the power consumption data to the overview screen (it was hidden under a menu before) and adding the ability for the user to click on the energy bars to show specific data for that day or month.


For the energy load tab I worked with visualizing data for Watt-hours and cost per hour. The client also wanted to see if they could nudge users to load the grid when society's power consumption was generally low by setting goals for the users.


The most challenging part: Working with complex data and trying to make the data less complex for the user.


The most fun part: Conducting research to understand how power consumption and energy loads affect the power grid and how and why it's bad for the environment and the houshold economy.

iPhone 8 Black Copy
iPhone 8 Black
ConnectiveMessaging_store

Information app

UXUI

Sketch, Zeplin

During the pandemic, the brief was to create a simple app that could be distributed for free. This project was designed to reach tenants with important information about their apartments and residential areas.


The app should also contain a tab with information about local services and businesses that were offering entertainment subscriptions or food home delivery.


The most challenging part: To create an UI on a small budget that would also require minimum development time. 


The most fun part: Creating something simple that would have great inpact for people being isolated at home during the pandemic.

Persona
Group solutions
Categorize
Prioritize
Website redesign

UX workshops

Brainstorming

Miro

An UX designer's dream is to get a project that involves interviews, surveys, user journeys, focus groups, user flows, wireframes, prototypes etc. However, I have found that the client puts most of the money into development, leaving the designer with only a few hours to spend on making something user-friendly.


So I am a fan of this quick, easy, and time-efficient workshop method. It can be used for app design, website redesign, or to just help everyone on the team think from a user perspective. And you don't have to spend more than 1 to 1,5 hours on it to get useful results.


Step 1: Make 2-3 personas (represents the user or target audience). Give them a name, age and title. Then write down the persona's needs and problems. Finally, write down how to solve those problems.


Step 2: Create categories by grouping solutions that are similar to each other.


Step 3: Use the categories to turn them into concrete functions/products/services or headings (if it's a website redesign). Add post-it notes with descriptions of the content.


Step 4: During this step, the participants prioritize the information the users need or want when they for example visit our website, open our apps, or interact with our software. It forces the participants to put the user first and to agree on an information hierarchy. 


The project in the slide show was for a website redesign for a page about IoT-solutions for property owners (end result in last slide).


The most challenging part: None!


The most fun part: Having fun discussions, making the participants think from a user perspective and getting quick results.