DEV Community: Michaela Hoffman

Cross over between UX Design & Front-end Development using the ORCA Process

Michaela Hoffman — Fri, 09 Jul 2021 18:21:31 +0000

I challenged myself to make a little Mars weather app using NASA's Insight Weather API. As with most things I started pulling out all the docs and information to get my mind wrapped around what I was getting from the API to work with. And after looking at the docs for a bit I realized that one of the best ways for me to get my mind wrapped around the data was to apply the ORCA process I've been learning.

Discovery

In these first two images, you can see how I used the ORCA process to identify potential content and data from existing weather applications. I also took note of some cool UI that might translate well to my mars app like the gradient slider for AIR Quality could easily become a slider for Atmospheric Opacity.

Existing Earth Weather Application UI Research

Existing Earth Application UI research

These two activities I was working on plug into each other so well. To give you a very brief overview the ORCA process takes you through several activities that help you define the Objects of your user's mental modal which might be represented in the system. How all those objects you defined are related to each other by defining their relationships, what users can do to act upon those objects by defining Calls-to-Action, and exploring those objects in great detail to define the Attributes of those objects.

Since I was working directly with an API was able to include that in my discovery process as well. I'm taking the data from NASA and turning it into a JSON object guess what?? It's organized as objects. Now I'm able to see and document what data I can get from this API and what its limitations are. This will also give me a jumping-off point for thinking about other APIs that I could potentially explore, the next image is a snapshot of the data coming back.

InSight Weather API

With this particular API, I'm only getting high-quality data which meant I may need to plan for missing content and attributes on any given sol (Martian Day).

Relationships

As part of Relationship discovery in the ORCA process, you make a little system model to start thinking about how the objects in your data set relates to each other. This was also something that the API was really helpful with. I had assumed, incorrectly, that the API would return one data point for the temperature for each Sol (Martian Day) but because I was working with an API I was able to see I would get at least 18 data points for temperature each Sol if the Sol passed the validity check.

Next, I translated my objects into an object map where I also added in all the attributes the API was going to return for me. Now onto translating this into UI and a functioning web app.

Translating the Objects & Relationships to the UI

As I move from low-fidelity to higher fidelity through this process I build on what I've created before. Before I dig into the UI elements of the design I move through making some sketches of the objects. And through this process I'm figuring out how I want this data to display consistently to avoid shapeshifting.

As an example, I sketched out a Sol mini card with just a few of the attributes from my map. Once I get to the grid card I added a few more attributes in, as well as, explored some UI elements like using an icon for representing atmospheric opacity.

Now I've moved into the next level of fidelity but you can see how I'm using my object cards to create the UI for the application.

A a part of this project I wanted to take a peek at Tailwind CSS and get the chance to work with that framework. I typically have worked with Bootstrap in the past and haven't gotten many chances to try other frameworks other than in my personal projects.

Well, that looks nice to start with. I've got more fun stuff with the UI in mind based on what the data points are saying but that will be more fun when it's dynamic and not a static image.

Speaking of that onto making it function and replacing the placeholder data with the real data from the API.

Moving into Functionality

Remember earlier in this conversation I said I'm getting only high quality data? As it turns out the API is not returning as much weather data as it could. Because of this most of my data points would end up reading No Data like in the screenshot above.

What a bummer.

Beyond realizing the data would be mostly empty most of the time and I would never be able to implement a search with the existing API. I got to work with the sort & find methods in this little project to bring back and display the most recent date separately from the rest of the days in my UI.

A peek at the Code

First I assigned the sol number to the sol as an id and converted the result into an integer.

constructor(data: IWeather) {
    const sols = data.sol_keys.map((k) => {
      const sol: ISol = data[k];
      sol.id = parseInt(k);
      return sol;
    });

Now that I'm returning an integer I run that through the sort method to get an ordered array based on the sol id descending.

const first = sols
      .sort((a: ISol, b: ISol) => b.id - a.id)

// [858, 856, 855, 854]

Looking good, now I used the find method to get the first result in the array which happens to be the largest one since the sorted array is in descending order.

const first = sols
      .sort((a: ISol, b: ISol) => b.id - a.id)
      .find((x: ISol) => true);

Once I have that I'm able to assign the result to the primarySol... properties of my class for the WeeklyWeather. Below you can see the final result.

<pre>export class WeeklyWeather {
  primarySolNumber: number;
  primarySolDate: string;
  primarySolSeason: string;
  sol: ISol[];

  constructor(data: IWeather) {
    const sols = data.sol_keys.map((k) => {
      const sol: ISol = data[k];
      sol.id = parseInt(k);
      return sol;
    });

    const first = sols
      .sort((a: ISol, b: ISol) => b.id - a.id)
      .find((x: ISol) => true);

    this.primarySolNumber = first.id;
    this.primarySolDate = first.First_UTC;
    this.primarySolSeason = first.Season;
  }
}
</pre>

Dear NASA, please update your API so that I can pass a quality parameter and get lower quality data. ? This way I can finish out my little project!

It was still really fun to experiment with utilizing the ORCA process on this little personal project. I also had a lot of fun saying things like "I'm receiving telemetry from NASA." And even getting to experiment with another CSS framework was fun and challenging.

You can still see my public repo of the fledgling project on GitHub.

If you want to geek out about space, APIs, UX, the ORCA process or other things you can find me @md_hoffman on twitter!

Making a Mock Service for all the mock data

Michaela Hoffman — Sun, 04 Jul 2021 23:40:56 +0000

In this part of the tutorial I’m going to be making a mock service to house all my animal details. In the previous part of the mock data series I made a second set of classes for animals and identified the need to move them out to a single location.

Making Magic

Here is where the magic happens with this process. When I’ve identified duplicated data and move it to a central location not only does my code become more consistent and simplified but it is also more maintainable.

It is true that I am often working in prototype code so it really doesn’t “matter” that I have some duplication going on. Or even that the code isn’t maintainable because it’s all a prototype right now anyway.

I’m always pushing to make my code easier to fold into the process. I don’t want to spend time/effort/energy on writing the code just so someone else has to come back and rewrite it because I’m leaving it in a weird hard coded prototype state.

Don’t get me wrong. I totally started there where everything was hard coded and sometimes at first pass I leave things hard coded until I know what I want to do with the experience. Then I go back through and clean it up so that the interaction design can be tested and fully experienced in the coded prototype.

Creating my service

First thing I need to do is get my service created.

ng g s animal

Now that I have that created I am going to strip out my classes and interfaces from the other components and move them into the service. As I do this I combine them to make a single class eliminating the duplication.

This is going to make more sense when you look at the full code file on github but now I’ve got one file that combines all the data from both spots.

Here is a peek below.

export interface IAnimal {
      guid: string;
      name: string;
      type: string;
      description: string;
      numberAtZoo: number;
      photo: string;
      animalInResidence: IAnimalInResidence[];
      food: IFood[];
      habitats: IHabitat[];
}

export interface IAnimalInResidence {
      name: string;
      personality: string;
      age: number;
}

export interface IFood {
      foodName: string;
}

export interface IHabitat {
      habitatName: string;
}

Newing up my animal instances

First, I’m going to export a new abstract class in my AnimalService file. I want to be able to create this base class that will be extended by the mock service and not be instantiated which is where the abstract class is particularly useful.

Within this abstract class I call the getAll method to return all my animals from my mock data set.

I then called the abstract method get which takes an id and then returns an observable of type IAnimal.

export abstract class AnimalService {
  abstract getAll(): Observable&lt;IAnimal[]>;

  abstract get(id: string): Observable&lt;IAnimal>;
}

Extending my abstract class

Now that I’ve got my abstract class in place I want to extend the service to handle my mock data so I export a second class called the MockAnimalService and extend the Animal Service.

export class MockAnimalService extends AnimalService { … }

In this class I call the getAll method and return my 3 new animals.

export class MockAnimalService extends AnimalService {
  getAll(): Observable&lt;IAnimal[]> {
    return of([
      new Animal1(),
      new Animal2(),
      new Animal3()
    ]);
  }
}

Next, I call the get method and pass in my guid. When I return the data from the get all method I then use the pipe() function to combine multiple functions. I then call map and get all the animals. I then use find to locate the animal with that guid.

get(guid: string): Observable&lt;IAnimal> {
    return this.getAll()
      .pipe(
        map(x => x.find(a => a.guid === guid))
      );
  }

This has now made the guid accessible for me to use in the URL and link to the correct animal.

Routing to the animal

This part is pretty straight forward but I want to include it anyway just in case it is helpful.

In my routing.module I add the following to the routes variable

{path: 'animals/:guid', component: AnimalComponent}

And within the animal list view I added the [routerLink] to grab that guid and build the route for me.

<a [routerLink]="['/animals', animal.guid]">{{animal.name}} </a>

Inside the animal.component.ts

Now it comes to the fun part. Building out my animal detail view by binding all the animal detail attributes in my mock data to the view.

<main class="animal-wrapper">
  &lt;h1>{{animal.name}}&lt;/h1>
  &lt;h3>{{animal.type}}&lt;/h3>
  &lt;p>{{animal.description}}&lt;/p>

  &lt;h5 *ngFor="let foodItem of animal.food">{{foodItem.name}}&lt;/h5>

  &lt;h5 *ngFor="let habitat of animal.habitats">{{location.name}}&lt;/h5>

    ...

&lt;/main>

Once I've got the attributes and properties from my mock service in place I'm ready to test my prototype.

To Wrap Up

In this series I walked through how I take my designs from clickable prototypes into full code prototypes. This has helped my clients and projects immerse themselves in the final experience quicker. We are able to get this into someones hands much quicker than full development and test out some of the more difficult to prototype experiences.

Make mock data for your detail view component

Michaela Hoffman — Thu, 01 Jul 2021 16:36:26 +0000

In this part of the series I'm going to work on making the mock data for the detail view. In the previous part of the series I made the list view of the zoo animals. I need to now make the animal detail view.

How do I use this at work?

Much like in the first tutorial I use this to help create a clickable prototype directly in the code base. This allows our users and SMEs to see the new features and flows directly in the context of the website they are currently familiar with.

This works really well when you are working to fold a new user experience into an existing system.

This also works great for new systems when I’m helping businesses transition from keeping their data and business processes in an excel spreadsheet to an application with business intelligence. I usually do a prototype like this after first testing assumptions with paper prototyping and a prototype in a tool like Figma or Sketch.

Moving the prototype further into actual code allows you to create a testing experience that closely mimics the real working software complete with complicated user interactions and mock data.

Animal Detail View

First I'll create a new component to hold all the details about the animal.

ng g c zoo-animals/animal

In this new component I'm going to return data from the data set for the specific animal that is clicked on from the list component.

Before I set up returning information when you click to an animal from the list I'm going to need to set up my mock interface data.

I'm going to create a new animal interface in this animal.component.ts file and in this data set add a lot more attributes and data types about the 3 animals in addition to the first data set that is currently serving up the list view.

export interface IAnimal {
  guid: string;
  name: string;
  type: string;
  description: string;
  numberAtZoo: number;
  photo: string;
  animalInResidence: IAnimalInResidence[];
  food: IFood[];
  habitats: IHabitat[];
}

As I was working through the details of the animal attributes I wanted to include I some information on each individual animal in residence. I also wanted to include an array of food and the habitats the animal lives in so that I can use the individual information in interesting ways later in my application rather than relying on a string for everything.

No next I needed to export interfaces for the individual animals, food, and habitats.

export interface IAnimalInResidence {
    name: string;
    personality: string;
    age: number;
}

export interface IFood {
  name: string;
}

export interface IHabitat {
  name: string;
}

The next thing I need to do is to create new export classes for each animal in your list of zoo animals. Again one for each of our animals in the list: shark, giraffe, & capybara.

Below is my export class for Animal 3, the capybaras.

export class Animal3 implements IAnimal {
  guid = 'fed513f5-af68-43d0-ac6f-fe5e15309f91';
  name = 'Capybara';
  type = 'Mammal';
  description = 'Capybaras has a barrel-shaped body with a short head and reddish-brown fur.';
  numberAtZoo = 4;
  photo = 'asset/capybaraexamplephoto.jpg';
  animalInResidence = [
    {
      name: 'Getty',
      personality: 'She loves to chew on her water plants at the edge of the water. ',
      age: 2
    },
    {
      name: 'Pontoon', 
      personality: ' Pontoon is very shy but loves to get chatty with Getty!',
      age: 5
    }
  ];
  food = [
    {name: 'grass'},
    {name: 'water plants'}
  ];
  habitats = [
    {name: 'rivers'},
    {name: 'marshes'}
  ]
}

The Problem

Do you see the problem already?

I am currently creating two animal interfaces used in two different components based on the same animal. Currently I don’t have a way to pull the right animal’s data into the UI at this point. I want to avoid reaching into the zoo-animal.component.ts file to grab the mock data that lives there. It would be really messy and hard to maintain if I went down that path. As well as, when the time comes for me or another developer to strip out the mock data and replace it.

I need to get those interfaces combined and out into their own file.

To wrap up

I've now created two sets of the same classes. I have different data in both places but this isn't really the way I want it to be. I want to get to the point where I have one set of data to "rule them all". Which can be reused all over my application.

In the next post I'm going to be working through moving all these pieces into a Mock Service so that I can create animals once and simplify the data set.

Making Mock Data for an Angular list view component

Michaela Hoffman — Thu, 17 Jun 2021 23:02:59 +0000

In this tutorial, I’m going to start the process of making a prototype using mock data. My goal at the end of the series is to have quickly mocked data for a prototype while binding it to the UI. As a result, the data can be used across the app and there is only one point of maintenance.

When I’m done with the series, I will have one data set that I can use to create demo components of my application.

How I use this process

If you are a front-end developer or designer who codes and working without the back-end API for a proof of concept or prototype in the browser, this is for you. In order to complete this tutorial, you’ll need to have a good understanding of HTML. And how to start an Angular application.

The skills in this series allow you to create demo content in your prototype. This is really useful for other teams within your organization that need to see real world data. You can also use it to make final design adjustments based on real data.

Often in my role as a designer & developer I am working way early in the process. I don’t have an active API that I can pull from or back-end developer resources to build one. As a result, I need to stub or mock up my data set so that the interfaces I create look real and you can see data changing but without the help of a back-end dev.

For this tutorial, I’m going to be making a zoo animal list view.

Animal List View

Starting with an angular project create a new component, use ng g c zoo-animals in the terminal.

ng g c zoo-animals

I’m are going to start by creating the UI for each component. Then once I have the mock data set I will move it out to be used in a more generic way across the app.

I go to the zoo-animails.component.ts file and export an interface of IAnimal so I can start building your data.

export interface IAnimal {
  // Data will go here
}

Because I’m thinking about my animal with the context of being on the list view that’s the data I’m going to be most concerned with for this part of the series.

export interface IAnimal {
  guid: string;
  name: string; 
  type: string; 
  description: string;
  numberAtZoo: number; 
  photo: string;
}

Ah, there that looks good, pretty straight forward. I’ve got a solid list of attributes that will appear in my list and identify the animals to the users.

I’ve defined in my interface that my classes are going to conform to this structure.

Next I export classes for each animal you want in my mock data. Then I fill in the class with the data conforming to the interface.

export class Animal1 implements IAnimal {
  guid = 'f6c8fc66-9336-4bff-a492-416b5a165c58';
  name = 'Giraffe';
  type = 'Mammal';
  description = 'Giraffes are tall with long necks and their coat has dark blotches or patches separated by light hair.';
  numberAtZoo = 4; 
  photo = 'assest/giraffeexamplephoto.jpg'
}

export class Animal2 implements IAnimal {
  guid = '6f248895-bba2-4a67-8a25-33d0894156c6';
  name = 'Shark';
  type = 'Fish';
  description = 'Sharks come in all shapes and sizes. Sharks typically have sharp teeth, fins, and gills.', 
  numberAtZoo = 100; 
  photo = 'asset/sharkexamplephoto.jpg'
}

export class Animal3 implements IAnimal {
  guid = 'fed513f5-af68-43d0-ac6f-fe5e15309f91';
  name = 'Capybara'; 
  type = 'Mammal'; 
  description = 'Capybaras has a barrel-shaped body with a short head and reddish-brown fur.';
  numberAtZoo = 4;
  photo = 'asset/capybaraexamplephoto.jpg'
}

Animal Data for the List

Once I’ve got my data for 3 different animals ready to go I want to pull those into a list in the zoo-animals UI.

 animals: IAnimal[] = [
    new Animal1(),
    new Animal2(),
    new Animal3(),
  ];

For this view I prepared a property of animals that conforms to the animal interface from earlier. Notice I typed the IAnimal interface with the array syntax [ ]. This sets up our property to know that its going to take a list of instances of our animal classes.

Then I new up the three instances of our animal classes that I created above inside the array. Makes sense right, I want to create a list of animals so let’s give the interface an array!

Open your zoo-animals.component.html. For this project I’m using an Angular Material theme just for fun.

<table mat-table [dataSource]="animals" class="mat-elevation-z8">

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let animal"> {{animal.name}} </td>
    </ng-container>

    ...

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

As a result you can see I created my first column in the above code. Then I added the animal name and the “…” represent the remaining columns.

After that I needed to add the angular material way of defining the header and footer. Otherwise, you’ll get a nasty error. In the last two

tags I reference an array of table names that match the matColumnDefinition on my ZooAnimalsComponent.

To finish it out I displayed the rest of the data defined in the interface for a user to know what they are clicking on to get to the detail page.

Link to the Correct Animal Detail View

Before I move on from this component I need to set up our link into the detail view.

<ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let animal">
        <a [routerLink]="['/animals', animal.guid]">{{animal.name}}
        </a> 
      </td>
    </ng-container>

For this I’m adding a router link around my name column. I’m then planning on passing the following into the link. animals followed by the animal.guid property from each animal. Since I don’t have the animal component yet this doesn’t do anything but set us up for the next post in this series. In the next post, I will be diving into the detail view and all the mock data we will see there!

To wrap up

The work I did above will set me up nicely for diving into the detail page. It gives me a good starting point for my mock data and getting it displayed to the screen.