2022 Mobile UX / UI

A detailed look at what I did for 5 months as an intern @ HappyGreen.

From February 2022 to June 2022, I worked as an intern at HappyGreen in Eindhoven as a part of my IT & Media Design bachelor's degree at the Fontys University of Applied Sciences in Eindhoven.

This page will show you more about what I did, how I did it, and what the results were. Most sections have supporting imagery. These images can be clicked on to be enlarged. For the best reading experience, please visit this portfolio on a laptop or desktop as most of these images are taken in a desktop scenario.

Internship info

As previously stated, I worked as an intern at HappyGreen for 5 months. I found HappyGreen with the Fontys internship tool and they immediately sparked my interest. After a brief e-mail exchange I went to their office for a quick meet & greet and to assess if I was the right fit for them.

I quickly noticed HappyGreen was a small team consisting of young, tech-savvy people that wanted to use modern technologies to improve the world, which really interested me.

During my internship I adopted the already existing Agile methods used like Scrum. Working in 2-week sprints and a couple of daily/weekly stand-ups, I used Jira, as it had a good integration with Git and the existing codebase.

As for Git, this is also what was used throughout this internship for code version control. I achieved this by cloning the existing repository and then using pull requests and reviews from colleagues and superiors to merge my code with the existing code.

The team I worked with consisted of a couple of people. Frank Keulen (owner, supervisor, back-end developer, API manager, resident jack-of-all-trades) was my go-to problem solver for all kinds of questions during my internship. Besides Frank I also had a lot of contact with Davey van den Bogaard (lead developer working on WEAR) when it came to developing the WEAR app. Ofcourse I also talked with others at HappyGreen, however most of those talks weren't directly impacting my internship or project.

The company

HappyGreen is a fast-growing start-up that designs and creates innovative and eco-friendly products & services from the ground up. HappyGreen is currently expanding into the latin-american market. A couple of HappyGreen's products are: a high-tech mobile hotel room, a personal eco retreat that can be controlled with a mobile app, innovative electric transport, new ways to recycle, forestation and educational projects.

HappyGreen is based in The Netherlands and Panama. There are roughly ~20 people working for HappyGreen fulltime and these people collab with over 180 others through collaborations and partnerships with local companies.

As the intern, HappyGreen will provide me with capable mentors and colleagues that can guide me during this process. There are many areas of expertise covered by HappyGreen employees that i can receive guidance in, such as UX/UI design, front- & back-end development, Marketing, Concepting, and research.

The project

The main internship assignment will be based around HappyGreen's WEAR app. This is a mobile app thats connected to HappyGreen's NFC wearables (wooden accessories like bracelets, sunglasses, watches) to control their NFC chip, such as opening Instagram and Spotify or unlocking / controlling your Tesla through the app. These actions can then be automatically ran by scanning your wearable with your phone. The current prototypes for these wearables are mainly focused on the consumer side of things. HappyGreen's goal in this is to also make WEAR available and attractive from a business perspective.

Attached below is the official project plan.




The current WEAR app includes a bunch of functionality for the wearables. My goal is to find the best ways to integrate functionality that can be used by businesses or people in a working environment. Some of the current WEAR features include:

- Opening apps like Spotify, Instagram, Snapchat, WhatsApp.
- Shuffling or opening Spotify / Sonos playlists
- Controlling smarthome accessories like Phillips Hue lights and Nuki smartlocks.
- Unlocking and controlling a Tesla car.

Existing WEAR app designs

Ofcourse these aren't all the features of the WEAR app and as the WEAR app is still in development more features will be added in due time, but they should give you a general idea of what's possible.

To start off the project and give myself and HappyGreen a rough idea of how I would spend my time during this internship, I made a planning for each sprint (2 weeks). Attached below is the sprint planning.




The project is split up into 5 stages: research, design, prototyping, testing and development. For each of these stages i will go more in-depth on what I wanted to achieve during that stage, and how I achieved it.

Research

Starting off my project was research. The goal for this phase was to get a better understanding of sustainability and how it could be used to improve businesses in any way. It was also the phase where I tried to think out of the box to find innovative ideas by doing lots of library research and organizing brainstorms.

In order to get a better understanding of the target audience, I made some user personas.

Persona - Manager

Persona - User




To have a good baseline, me and my supervisor were able to ask ourselves the following research questions to base all research on:

- How can the WEAR app and its functionality be used from a business perspective?
--- Which markets are interesting for HappyGreen?
--- What type of functionality is interesting for each market? (WEAR)
--- What kind of adjustments are needed within the existing WEAR app?

To answer the questions asked above, I made a library research document containing research about NFC and possible interesting markets:




This document gave me a couple of ideas and topics that could possible be used for the WEAR business app.

To see which ideas my colleagues associate with certain topics, I organized a brainstorm in Miro. This brainstorm consisted of 3 sessions. These were all timed sessions, being timed at 1, 3 and 5 minutes respectively. The idea of timed sessions created a sense of urgency, which would sometimes help creativity. Because we weren't sure about which direction we wanted the business WEAR concept to go, I split the ideas into 3 categories: ideas for sustainability & CO2 footprint, ideas with NFC, and user incentives.




Brainstorm session 1 in Miro

Brainstorm sessions 2 & 3 in Miro

Once all sessions were done, I filtered & categorised every idea alongside removing duplicates. This helped me get a better understanding of which markets have alot of attractive ideas. It also served as a building block for the rest of the ideas.

Categorised ideas in Miro

With a bunch of ideas and categories, I started applying these to think of a couple concepts for WEAR, accompanied by some design inspiration and a list of possible functionalities. They can be found in the WEAR concept document linked below.




Because HappyGreen stands for a greener & better world, we wanted to see how we could implement sustainability into the WEAR business app. To find out which kind of data was available to us, I made a list of modern carbon footprint API's that could aid us in the future to process and show different types of sustainability data.




While most of this research was simple library research, I was able to bounce off my colleagues about ideas and concepts to see which inspired them the most. Ofcourse my supervisor also had a lot of say in this as it is a feature that HappyGreen has been thinking about for a while.

Design

The goal for the design phase was to create a new subset of user interfaces for the WEAR business app that adhere to the current WEAR designs.

For the entire design process, I used the popular UX / UI design tool Figma. I did not have any previous experience with Figma as my UI design tool of choice used to be Adobe XD. However, since some of the existing designs were already implemented into Figma, me and the company both felt it was a good idea to use Figma throughout this process.

There were multiple things I designed while i was at HappyGreen. The main project was to design the UI and user flow for the new business implementation in the WEAR app, however I also experimented with designing other things such as a new login screen, a design for the new multi-action (run multiple actions at once) for the WEAR app, and other small stuff.

WEAR Figma design file

Above you can see part of the Figma file with my designs from this internship. Feel free to look around. The file contains elements I worked on such as WEAR business manager flows, business actions, a new login screen, multi-actions, and more.

During the design process I received a bunch of feedback from my supervisor Frank. He left comments on specific elements that could use an improvement or weren't intuitive. Based on this feedback I created different versions and iterations to end up with a functional and well-designed end product.

WEAR - Figma design feedback 1

WEAR - Figma design feedback 2

After multiple iterations based on feedback and user testing I ended up with a collage of UI screens that went on to make a prototype.

WEAR final UI screens

Prototyping

With the design done it was time to move onto prototyping. Here I wanted to visualize the flows and create a clickable version of the design.

Since the design was made in Figma, the obvious choice was to use Figma for the prototyping aswell. Because my supervisor wasn't sure about which navigation type (tab-based, stack-based, conditional rendering) to use yet, I made 3 different navigation flows that led to the same user flow afterwards. We ended up choosing tab-based as it had the best user experience according to me and my supervisor, aswell as being used for a large amount of similar mobile apps.

The prototyping phase mainly consisted of connecting the screens to eachother and making sure all screens were linked to the corresponding action. After getting feedback from my supervisor on usability and UX of the prototype, I moved on to the next phase where I started performing user tests on the prototype.

Prototype connections in Figma

Just like in the design phase, my supervisor Frank left me with a bunch of comments to improve the prototype. This time the comments were less design-focused, but moreso showing me ways to improve the user flow or fixing bugs / bad UX in the prototype.

WEAR - Figma prototype feedback 1

WEAR - Figma prototype feedback 2

Testing

Once the prototype was complete and all flows were connected to the right UI elements, I wanted to perform user tests on it to improve the UX.

Prototype testing started with myself and my supervisor. To further test the UX of my design / prototype I used a prototyping tool called Maze. This app has seamless integration with a bunch of design tools including Figma, and I used this to give users a series of questions and steps to walk through in the app. The users I performed this test on were my colleagues.

Maze allows the creator of the "maze" (in this case, me) to have insights such as how long it took a user to complete a task, and helps better understand UX problems within the prototype.

For more info on this testing phase, I documented this into a file:




I'm glad I used Maze as it was a very useful tool that gave me a bunch of insight on how users behaved throughout the prototype. It allowed me to answer questions like "which flows need to be improved?" and "do people need to be tech-savvy to understand the UI?" which ultimately lead to a succesful testing phase.

Mission overview in Maze

Development

In between the design & prototyping phases I've also already done some developing. The goal for this phase was to get familiar with all the technologies used within the WEAR app, then start by developing smaller components and receiving feedback. Once I was a little more familiar with the technology and architecture used to build the WEAR app, I was able to start working on the business implementation I designed.

To have a good list of priorities while developing this MVP, I made a MoSCoW overview of all functionalities.




All code is hosted on GitHub (in a private repository) and is updated through pull requests from collaborators (me & my colleagues). By using Jira software we can automatically link these pull requests to Jira issues, giving a nice structural way of working through issues and new features for the app.

Development - flow visualisation

The code is written in TypeScript and built with the React Native JavaScript framework. TypeScript is used over JavaScript to ensure better code readability within a team. Redux is used for state management, and smaller packages such as styled components are used for styling.

It took a bit of time for me to become familiar with all these new packages and technologies, but once I got the hang of it I was able to solve most problems myself, with the occasional help from my development colleague Davey.

Feedback is given by my development colleagues through pull requests on GitHub. They can leave comments and request changes to be made, or simply ask a question about a certain block of code. This feedback really helped me understand what I was doing wrong and in which areas I could improve my mobile development skills.

Development - WEAR business tab-navigation feedback

Development - Login screen feedback

The first thing I worked on was the navigation. As there was already an existing app that had to coexist with the new business app, I had to rearrange the way navigation worked. This was tough but with some tips from my colleagues I was able to render different screens and ways of navigation based on a users role (for example, non-managers dont need to see the business management side of things).

Once the navigation worked, I started creating the core components and UI of the main screens. In the beginning I used dummy data, but after the new back-end was sorted and the database was configured for the business WEAR app, I started making calls to the WEAR API that were then stored in the state through Redux. This helped alot to make the app feel like a real thing.

Once I had a presentable MVP I started working on UI and functionality throughout the app, adding one small feature at a time, such as connecting a product to a user.

Early stages app MVP

Results

As a summary, here are the results of this internship and the deliverables I was able to create.

Prototype

The result for the prototype phase is a working & clickable Figma prototype. This prototype has had multiple iterations and designs based on design feedback and usertests (see prototyping & testing)

To test the prototype for yourself, click on the button below.




I learned alot from the design & prototyping phase such as working with new UI design tools such as Figma, and testing the prototypes with Maze. Other than these tools, I also learned alot from my supervisor Frank in terms of design thinking and how to really put myself in the user's shoes.

App

I'm happy with the MVP I was able to develop. It involves key features such as tab-based navigation, user and product overviews, organization info, adding new users, connecting & disconnecting products from users, and more.

All of these functions are connected to a newly generated back-end for this WEAR organization app. I was responsible for all the front-end interfaces and connectivity, as well as connecting everything to the back-end by calling the API and extracting the neccessary data from the response, which was then stored in the state with Redux. Based on this data I was then able to create dynamic UI components that translated this data to the front-end.

While I did have a lot of input in how the back-end should be organized and features it should contain, my colleagues were responsible for "creating" the back-end endpoints for me to connect to.

App MVP - Result

I learned alot while building and contributing to this app. Not only did I learn how to use new programming languages or techniques such as React Native, Redux, Styled Components and brushing up on my JavaScript knowledge, I also learned what it was like to work alongside a team of developers and using proper version control systems such as combining Jira issues with GitHub pull requests, and automation with GitHub actions / workflows (I even added some Git workflows to this portfolio website during my internship by having automatic deployment based on Git pushes).

Unfortunately, because the project I worked on is directly integrated into the existing codebase, the Git repository is private and cannot be accessed from outside.

Learning outcomes

Below are the official FHICT internship learning outcomes and what I did to achieve them.

Learning outcome 1:

"Autonomously find and acquire an internship assignment which builds upon previously acquired knowledge and skills."

By using the FHICT internship tool and looking for interesting companies that operate in the media or software market, I was able to inquire for an internship at HappyGreen which included tasks that build upon my previously acquired knowledge.




Learning outcome 2:

"Perform a problem analysis resulting in a clearly defined assignment covering the core aspects and intended results."

By analyzing the wants and needs of the company I was able to come up with a project plan that defined a problem and came with a fitting solution.




Learning outcome 3:

"Work independently, according to plan, and methodically correct in a realistic practice situation, and work with a research attitude to collect, organise and select the appropriate information, resulting in professional products."

By being involved in the entire process, going from research -> design -> prototyping -> testing -> developing, I showed that I was able to create professional products based on information gathered.




Learning outcome 4:

"Reflect on your own qualities and preferences in relation to your functioning in the working environment now and in the future."

By regularly conversing with my colleagues and supervisor about how the internship felt to me and define which tasks went well and felt more fun than others, and then writing this down in a reflection, I was able to reflect upon my own qualities and preferences that I realized during this internship.




Learning outcome 5:

"Communicate and collaborate efficiently and functionally with colleagues and other (external) stakeholders in a realistic practical situation."

By being a part of weekly stand-ups and using version control & scrum tools such as Jira and Git, I was able to work in a team and collaborate with colleagues. I also kept my supervisor and colleagues informed on the status of Jira issues and requested code reviews when needed.

Below are documents that contain both my own communication experiences and the feedback I received from colleagues about me, aswell as an advice report.




Extras

During my internship I didn't only work on the main assignment, but also some things that can be placed into the "other" category. Think of these as side-projects I worked on that weren't directly affecting my main assignment, but helped in other ways such as gaining experience with a certain technology used within HappyGreen.

WEAR app clone

To hone my skills and get more familiar with technologies used to develop the WEAR app, I made a "fake" WEAR app made from scratch. I developed this to get a better understanding of React Native (the framework used to develop the WEAR app) and the WEAR API (where all data regarding products and the WEAR app is stored). This took me a couple of days and I was able to build a pretty good prototype version of the WEAR app from scratch.

It has functionality to showcase products, filter products, add a product to a user, login as a user (using an API token), add an action to a product, change a product's name, and more.

"Fake" WEAR app project

Redux Pokemon project

Because I didn't have any experience with Redux, which is the technology used in the WEAR app to manage states, I made another prototype in React Native. This time, I based it off of the existing WEAR app by forking the repository and adding a feature to it. The feature I worked on was displaying certain Pokemon (with data gathered through the PokeAPI) and managing their state with Redux, like changing the name (client-side) of a Pokemon and storing it in the Redux state, aswell as adding a loading indicator when the Pokemon is in a "loading" state.

Redux project - Pokemon prototype

WEAR login design

Besides working on the business designs of WEAR, I was also able to redesign some very old login screens. The goal for this redesign was to approach a more modern UI style and inspire the user to login using a service such as Apple, Google or Facebook. Ofcourse keeping in mind the cleanliness and style of the existing WEAR app, I went for a clean and modern login screen focusing on the social login buttons.

WEAR - Login screen redesign

After designing the new login screen, I also implemented it by rewriting the old React Native code to apply the new styles and have cleaner code. The feedback I received on the implementation of this login screen was positive, as it was mostly revamping old code. There were a couple bugs my colleagues pointed out, such as the keyboard not moving with the input fields when focused, however I was able to fix all of these small bugs quite fast.

New WEAR login screen