Case Study: UrtheCast
Leading the design of GS Interfaces Visualization (2016)
UrtheCast is a powerful Earth-imaging system for geospatial analysis. UrtheCast currently operates four Earth Observation sensors in space, including two cameras aboard the International Space Station and two satellites, Deimos-1 and Deimos-2. With a diverse suite of sensors, a powerful web platform, and an open API, UrtheCast is ushering in a new era of Earth Observation by democratizing access to Earth’s data.
To comply with my non-disclosure agreement, I have omitted confidential information in this case study. This case study is my own and does not necessarily reflect the views of UrtheCast.
The Challenge
The goal of the Ground Segment Interfaces Visualization (GSIV) project was to visualize and explain the message flow of a workflow from when:
- An image is taken from our camera
- Gets downlinked to Earth
- Then processed through our various subsystems (focusing on the message flow of this part)
- Before it is published on the web
This system, a web app, would then mainly be used for onboarding new employees in two specific departments and also for developers looking to review. This is not meant to replace the current training materials, but rather, to add on to that to make it easier for new employees to visualize how each subsystem and component of the workflow connects.
My Role
UX ENGINEER
I led the design of GSIV and went through the UX process: From user research and user scenarios, to information architecture, creating wireframes and then turning it into hi-fi prototypes before implementation. I then worked with three other software engineers on the team to develop it.
The Process
I was at UrtheCast for a total of 16 weeks. The first 8 were for my practicum as a requirement prior to graduation. I’m thrilled to have stayed onboard the team to see the project through implementation.
Ramp-up
Now, in order to visualize and explain the message flow of that workflow, I would need to get a somewhat solid understanding of how all the bits and pieces of the entire workflow works, learn about a hundred industry and corporate acronyms and some earth observation lingo. While reading the training materials and operation manuals, I filled my entire desk with a bunch of sticky notes to better understand how every subsystem connects to one another.
During the ramp-up, I was introduced to the GSIV project. I was given a document outlining the project’s goals, background and strategic fit, assumptions, and requirements –a wishlist– broken down with a list of features that’s a must have, should have, and nice to have, as well as some diagrams that were referred to time and time again.
User Research
The GSIV system is meant for internal use only. The majority of the users would be new employees coming onboard two departments at UrtheCast.
When creating the persona of this New Hire, I focused on the personality aspect more than others to best figure out how the user deals with information and decision making — and then designing for that. I planned to use the Myers-Briggs Type Indicator (MBTI) personality types and see if there was a pattern with the current team. By merely observing my colleagues around me and asking our team’s manager a few questions for confirmation, one trait was easy to determine. I sent a quick online questionnaire to the current team so I could discover their other traits and try to find a pattern. After nailing down the personality type, the tier and archetype were then chosen.
With help from our HR department, I gathered the demographic profile for all our North American employees and more specifically for the two departments this supposed New Hire will be in. The key stats included number of employees, their age range, and their education background (i.e. breakdown of how many employees in these two departments have Bachelor’s degrees, Master’s degrees, and a PhD).
Other components of the persona included the New Hire’s key quote, biography, goals, frustrations, referents and influences, and their technology expertise.
User Scenarios & Site Structure
After the persona, I created the user scenario that breaks down all the steps the user would take. This is usually not done alone, but rather with a few stakeholders to get different perspectives. Subsequently, the site structure was defined using the wishlist as a guideline.
Wireframes & Interaction Design
For a few days straight, I spent my mornings learning about AWS then booked a small meeting room in the afternoon to play some good music, get in my design zone, and sketch out wireframes. From the start of this wireframing phase, the use of a multi-columned grid just clicked and worked wonderfully in terms of hierarchy and prioritization. It was at this stage that I started to assess what would happen if the user were to interact (hover vs click) with each element on the screen.
Visual Design
The colour palette, typography, and a few elements were all derived from the UrtheCast brand guidelines the project was to follow. The interface design (the visual styling on the screen) was much fun to experiment until we nailed it down.
Prototypes & Iterations
For version 1 of the hi-fi prototype, I used Adobe InDesign to experiment with various grid layouts and then Adobe Illustrator to design the individual screens. I developed a few prototypes on Marvel for small components of the project before combining them all into a hi-fi prototype on Invision by the end of my 8-week mark. I presented it to my manager and received feedback from her, and also from my instructor, on design decisions.
With the amount of changes we planned to make, including the change in the screen resolution for version 2 of the prototype, it didn’t make sense for me to edit the existing screens individually, but rather to recreate all 130 screens from scratch. At the same time, Adobe Experience Design (XD) just launched their first Preview version a few days prior which I had tested out and found very promising (have you seen Repeat Grid?!), though their prototyping features paled in comparison with Marvel and Invision. Going forward, I planned to use Adobe XD for design and either Marvel or Invision for prototyping.
I proceeded to spend the next couple weeks creating version 2 of the prototype to present to our SFO design team. The transition from Adobe Illustrator to Adobe XD was seamless, I could copy over most elements with ease, and when I saved a new version of the screen, it would then automagically update on the Marvel prototype.
Presentation
Presenting to the SFO team was a great experience. I talked about the design process I went through for GSIV, justified my design decisions, and the key takeaway was when they pointed out an aha moment that we had missed in YVR! They had fresh eyes and critiqued the design with a new perspective. Following their feedback, we started the implementation phase.
Implementation
I joined a team of three software engineers to turn the hi-fi prototype into a web app that was live and deployed to AWS. We were agile, followed the scrum methodology and GitFlow. We developed this project in two sprints (four weeks) using React.
Being on an engineering team in a company was a first for me. Previously, I had just developed alone and didn’t go through the process of reviewing other people’s code before accepting merge requests (following GitFlow). I learned a lot going through the process and even more from the wonderful mentors and engineers around me.
The Impact
When I started at UrtheCast, I was just tasked with designing GSIV. After my first design critique, I was offered the opportunity to stay onboard the team to see the project through and develop version 1.0.0 of the site. I think it is going to be interesting to possibly come back in a few month’s time and measure the impact of this project as it starts getting used alongside our onboarding and training materials.
Reflections
In my technical interview at UrtheCast, I mentioned that I enjoy a good challenge and my, did they take that seriously and provide me with a great one. Note to self — really watch what you say in interviews!
To have an extraordinary manager in Maria was such a privilege! She’s one of the main reasons I kept extending my contract (again and again) to stay onboard a bit longer. I cannot stress how superhumanly hardworking she is, how she cares about each member of the team, and how much she truly enjoys her work. She has set the bar exceptionally high for my level of expectations for all my future managers.
I am so proud of the work I accomplished at UrtheCast, and getting to work alongside such wickedly talented colleagues was such an honour. At the age of 19, I’m the youngest of 200+ employees in the company! I’m thankful they gave me an amazing opportunity to learn, to tackle a great project, and do exceptional work. The last 16 weeks have been a mind-blowing experience and such a blast!
May every adventure after this surpass this incredible one.
End with a bang
I received the Ground Segment Engineer of the Month Award for the month of April and, as per tradition, was awarded a bobblehead. What an honour! I got one of Metropolis. Great big thanks to the team!
