top of page
Digiline

There are plenty of different coding platforms out there, but our team aimed to create a one-stop shop for software developers. It would be a place to code, save, share, and sell what they build out so they can more efficiently do their job. 

The Team

Hayley Smith – UX Designer

Mitchel Roe – UX Designer

My Role

Lead discovery and ideation, conduct user interviews, participate in research synthesis & affinity mapping, lead wireframing and prototyping

Problem

In general, developers dislike the fact that they have to hop around between several programs in order to successfully do their job. They are overwhelmed and annoyed by how many distinct programs they need to do their jobs. How might we minimize their wasted time and also create a way to guide and teach more junior developers about how to effectively do their job?

Process & Findings

We wanted to get feedback from current developers about their thoughts on other coding programs and what they felt these programs were lacking and what they were doing right. 

Digiline Task Flow.png
Screen Shot 2020-11-18 at 3.06.03 PM.png

To accomplish this, we completed user interviews with 10 programmers of varying experience levels. From this initial round of interviews, we developed a set of deliverables to guide our research, including our user journey map,  affinity map, and personas around these users we will be building out our solution for. 

Our team found several consistencies through our research around what problems we would be solving in the 3 weeks available to us, illustrated by 3 user quotes.

1.   "Why pay for this when most component libraries are free?"

2.  "It's annoying flipping between multiple windows all the time."

3.  "Developers need to know git commands; there's no way around it."

We decided to focus on responding to the main user pain points by: 

– Designing a platform that combines all necessary coding functionality

– Communicating the value in our service over other similar libraries standardized and reviewed web components to ensure consistency across all Digiline offerings

– Keeping users informed about best practices as they work without performing like an education platform

Junior Developer.png

After building and testing with our low-fidelity wireframes, our users expressed excitement with the platform, but concerns around our predictive tagging and "Learning" section. We responded by:

 

– Removing the "Learning" section entirely, opting for tooltips spread throughout the platform. 

– Removing predictive tagging.

– Redesigning the Editor with a display for easy code reviews.

Screen Shot 2020-11-18 at 5.35.28 PM.png

We updated our wireframes and conducted mid-fidelity usability testing. To compile our data we used a priority matrix to highlight pieces we could complete for the client, such as:

– Designing around search

– Create more effective modals

– Change button names to be more accurate to their technical function

Due to our 3-week timeline for this work, the team compiled our research deliverables, mid-fidelity wireframes & prototype, as well as a mid-fidelity design kit for our client to work with during the next phase of their product development. 

We W

UI Design

I revisited this work a few months later in the interest of creating a potential high-fidelity version of Digiline. I started by creating a mood board to capture the modern, high-tech feeling our client had mentioned wanting from our earlier meetings., using many of the same colors normally seen in code editors or tech art. 

 

Screen Shot 2021-03-29 at 6.58.30 PM.png

I also kept in mind some feedback we received later that our design felt a bit cramped and that it could be more exciting to work with. In response to this feedback, I made sure to open up the design and create more space between elements as well as create a bit more intrigue by designing a home page where users can view and interact with other developers' popular published components.

Publish Work - Filled Modal.png
publishworkhifi.png
Future Goals

I built out a condensed prototype including only the major screens and modals to get a picture of the different kinds of screens that would be included in Digiline. In the future, I would love to play around more with the visual design, including custom illustration or animation to make it more engaging. I'd also love to dig in more to the Marketplace aspect of the service and find out what users would need from a place to sell their web components online. 

bottom of page