Research

Competitive Analysis

Because we only had 3 days to design a mockup, we decided that our user research would only consist of some competitive analysis. We found a few similar websites and gathered their strengths and weaknesses.

A list of our competitor strengths

Similar to our prompt, the websites we found uses Artificial Intelligence (AI) to generate designs from an imported model. One of the main things we found useful was the customization of the tool.

Definition

Identifying the Pain Points

Artificial Intelligence is smart but tricky. Hence, designing a tool that could effortlessly use AI to generate an output should be approached carefully. We decided the best way was to first understand what complications may happen in building this tool. Once all of us gave our ideas, we compiled them into the blue sticky note.

Possible pain points in the project

Defining Each Step

To speed up the process, we separated the process steps and brainstormed what each of them mean to us.

One of the main ideas we wanted to implement is to have a “brand identity” feature. This would mean a user could input their company logo or page into the website and the generated design will use that as guidelines.

Our brainstorm for each step

Ideation

User Flow

Once we identified each step, we designed the user flow in more detail.

User flow

User Flow Design

Using the above user flow, we brainstormed design ideas for each page virtually. I personally used sketches on sticky notes stuck to my room wall.

Our sketches for each step

Once we reconvened, we presented each of our ideas and gave comments on sticky notes. Here is an example:

A comment on my sketch

Style Guide

We created a styling guide for everyone to follow. This consisted of our main colors, our font family, font sizes, layout styles and more.

We also came up with a great name! User flow + Prototype = Flowtotype!

Our style guide

Prototype

Finally, we moved from FigJam to Figma to start creating the mockup. An important thing to note is that we talked to the Hackathon organizer about our idea and he really liked the “brand identity” feature. Because of that, we decided to focus more on that to stand out from other competitors.

Follow the numbers to experience our page flow.

1. Home page

4. Project page - prototype

6. Project page - upload user flow 2

8. Loading page

10. Flow page

12. Style page display

14. Layout resolved

2. Project page

3. Project page - user flow

5. Project page - upload user flow 1

7. Select your device page

9. Display scanned page flow

11. Style page

13. Unresolved layout

15. Upload brand identity

16. Export page

Interact with our prototype.

Check out my LInkedIn post and watch our YouTube video!

Takeaways

• Any idea is worth speaking out. When we were designing our user flow, I went ahead to sketch the entire process on post-it notes. When I showed the team my work, they were very impressed and it catalyzed our process further.

• Each step in the process is important. Working with a team of different expertise have shown me how crucial each person play in the big picture.

• Remember to celebrate! We had a mini celebration meeting after submission even though we were in different states in the country. It was fun reflecting over the last 3 days and talking about what each of us plan to do after the Hackathon.

Final Thoughts

I used to think Hackathons were for Computer Science or engineering majors, but obviously I was wrong. I felt a sense of accomplishment joining a bunch of strangers to bond over the weekend. Our meetings felt more like friends solving a puzzle than work.

Needless to say, this would not be my last Hackathon.

<- SRS Website Redesign

U-M ITS Internship Site ->