The world needs to run on proper UX design. I have a passion for this career as if it was an extension of my artwork. Each design I create is made with lots of love and effort, but most importantly, it's made with the goal to better our future as a world-wide community.

Getting Started

I wanted to design an App that was simple to use, appealing, and overall fun while shopping for sneakers. I needed this app to stand out from the rest of the competition while simultaneously taking the best features from other shopping apps.Virtually, anyone should be able to use this app at any age. Accessibility was important.The question as to why some features worked over others was explored and the idea for STOMPs's direction began to stew.

Ideation

There are tons of shopping apps out there, so when designing STOMPs, it was a good idea to start looking at what the other competition did in terms of design, flow, and experience. I did a competitive audit of some other popular shopping websites in order to best understand how my users might feel when using STOMPs.The most important thing for me was the look and feel of the app.I needed to do a Competitive Audit.

Initial wireframes

After the competitive audit, I drew up a few wireframes for what might be the homepage. This phase was important because it would carry the design throughout in order to maintain a consistent look.The steps were:1) Sketch of our design on paper2) Translate paper sketches into lo-fi digital wireframes3) Complete a full process wireflow of the lo-fi wireframes.

User Research

My main goal for the research was to see how intuitive and accessible the app was when creating each layout for the wireframes.The app needed to feel natural.To do this, my User Research relied on unmoderated usability study to figure out how many pain points someone could run into. Based on whatever I might find, I would sharpen the design, look, and feel of the app for better quality and usability.I had 4 users who volunteered to be a part of my user study.These were the results!

Affinity Diagram

As previously stated, my main method would be an unmoderated Usability Study to see how the users might interact with the app without any assistance.I came up with an Affinity Diagram to answer some of my own questions through their feedback.1) Does my design feel natural?
2) Is the flow intuitive?
3) What were the major pain points?

There was definitely a lot to learn from and improve upon. I categorized the feedback into four main sections. Three were sectioned into common pain points the users all felt and one section was about some of the things they enjoyed.Major pain points:

1) Add a proper shopping cart. Some users were unable to check on their items and felt it was off putting.2) There was an overall lack of features within the app to make it feel unfinished, even confusing some users.3) Our design lacked a payment confirmation and review page to make users feel more at ease before finalizing purchases.

Moving forwardI needed to implement these changes in order to make it more accessible for the user. What I knew was how the users felt, and even with some communicated satisfaction, there was room for improvement.

Final Design

After reviewing the feedback, creating mock ups was more than just fine tuning the original wireframes. I needed to incorporate all responses and put the user as a priority. The usability study suggested there wasn't enough content. After revising it, the app now contains various features, designs, and even photos to offer diversity of what this app is.STOMPs isn't just another shopping app for shoes. It's the place meant to connect those who felt disconnected with their footwear and style.

Shop seamlessly and with confidenceNow that it's all said and done, the app works as intended. One can start the app and get from login to checkout with little obstruction and with the reassurance of a trusted process.

Highlight featuresThe final product didn't just implement what was suggested, it surpassed them.Some of the things that made this stand out were the categories that differentiated each of the shoes you could get. Here are some other features I was proud of.


1) A carousel banner which maintained the style of the app upon login.2) The ability to add multiple shoes into the cart with a red highlight to the top right to indicate how much product is being held.3) Reviewed products with ratings to allow more comfort and assurance when making a purchase.4) A page to review and confirm your shopping cart before finally making the decision to officially place your order.

Style Guide

The whole purpose of STOMPs is to look for a shoe that makes the user feel great, fashionable, and achieve some level of cool. The app needed to offer a similar feeling. The colors and choice of design were almost retrograde in a sense to the homage it was paying tribute to. The aesthetic were the Memphis Design of the 80s meets a 1950s soda pop shop. It's young, but wise.The colors were chosen to make the accents feel strong, yet comforting with the blues and beige palette which makes it a visual treat.

What I learned

STOMPs is my first design project, and going into it I wanted to take it very seriously. The app was meant to highlight how capable my abilities are to make an app. There are many things I could go about differently if I were to do it again, mainly it's margins and perhaps adding even more features such as purchase history of items, or even a more out of the box design to make the shopping experience unique.However, I believe an app like this has one purpose-- practicality. I wanted it to be accessible, so anyone from any age group could learn to use this app soon after downloading it. STOMPs needed to look good, so a complimentary color pattern was the best bet, and lastly, I needed the app to flow well. There doesn't need to be a lot of fluff or bells and whistles; it simply needs to work well, and look good doing it.

Getting Started

This project has a lot of my background professionally; I worked as an English tutor during college and even did some online tutoring. Students would always praise the tutoring department for their convenience, but often talk about wanting an online feature.Online tutoring isn't new, but it's not fresh either.The Tutor's design is to invigorate the process of finding a tutor for an online session, or to schedule and meet with one in person. Furthermore, it's a way for users to sign up as a tutor and make some extra funds while studying.I wanted the design to be calming, sophisticated, and precise, while integrating common mechanics and themes from other apps in order to make something which helps select tutors and schedule them without a hassle.

Ideation

When it comes to online tutoring, there's plenty of choices. The problem is how similar many of these designs or websites function. My research led me to find the most accessible tutoring sites and compare them to each other-- what they got right, what can be improved, and what's simply not needed.With a market that is oversaturated and offers a similar base, how could The Tutors stand out?From what I've gathered, there's a stale air floating with most tutoring sites. In the most blatant since, they're not engaging others to explore tutors as one could hope to achieve. Interestingly enough, I looked towards other apps that helped potential suitors find one another.

Tinder Meets your Tutoring App

I couldn't pinpoint one prime tutoring website or app to present since many of them are virtually the same. However, Tinder as a service has been perhaps the most game changing app in contemporary times.With how popular Tinder has become, Swipe Right is a part of English's lexicon; something that mainstream needed to flow through the veins of The Tutors. However, I wasn'tlooking to copy the whole interaction of swiping, wanting to focus on finding the perfect tutor instead!

The goal in mind-Connect students to tutors
-Make the interaction feel engaging
-Adding a swiping feature to link something familiar, even alluring

The challenges: Responsive Web Design

Making a responsive website that was capable of being used on mobile devices and desktop computers was important. The Tutors would be the perfect app to exercise these muscles. Students looking to sign up with a tutor could do so at the comfort of their work station at home, school, or office while also having the choice of scheduling a session through their mobile phone.

The goal in mind-Make a design that is similar in both mobile and desktop devices
-Have something with brand recognition on both layouts
-Seamless flow between both devices so they are accessible as can be

Initial prototype and early concepts

I began this journey with testing out a few layouts to see how well I can match a phone design to a desktop computer one. I began with lofi concepts for each and tried connecting them in a similar fashion, flow, and style.

User feedback and observations

I gathered a few participants to offer thoughts about the initial design and about where the direction the app would be going. The tough sell was trying to people understand this wasn't a niche app that would connect students and Tutors a la Tinder way, but used it's innovative design to make it more engaging.With 6 participants, I gathered their thoughts, experiences, and initial reactions to The Tutors's early concept. Here's what they thought:

Iteration

The concept was starting to gain structure, but the feedback showed room for improvement. It felt perhaps there was too much reliance on that entertaining factor, that my product would not be taken seriously.The Tutors needed to include features such as allowing signing up to become a tutor, a flow that primarily showed interest in what a student is looking to learn, and a safe environment for all users.

Information Architecture and Wireframes

The concept of the app is for students to find tutors. However, many apps that provide this service also provide a service of allowing potential Tutors find work opportunities.Although the focus of this project is primarily for the students, I wanted to include that for potential, future.Translating the information architecture into the wireframes for the product would be a rewarding journey; with a strong foundation, and with a design in mind, I was confident the app would flow as intended.

Final Desgin

For both Desktop and Mobile Devices, I wanted The Tutors to feel the same, while functioning properly. The app is primarily for University Students, but accessibly is always something that one should keep in mind so it may be for everyone.

Style Guide

I learned from my previous work that consistency was the utmost important aspect for UX design. Colors, buttons, and even framing needs to all be consistent throughout the flow. I wanted a design that was sophisticated, cool, and above all, stood out with a subtle vibrancy.The result was a dark background highlighted with accent colors to make exploring the site a pleasant, if not academic, experience.

What I learned

Designing a responsive web app for both desktop and phone, such as The Tutors, requires careful planning and consideration of the user experience on both platforms. One of the key lessons learned is the importance of designing for mobile first. This approach allows designers to prioritize the essential features and content of the app and optimize it for smaller screens.Another lesson learned is the need to balance the design for desktop and mobile platforms. The design should be visually appealing and intuitive on both platforms, while considering the different sizes and resolutions of the screens. Designers should consider the use of images and icons, typography, and layout to ensure a consistent look and feel across all platforms.Usability is another essential aspect of responsive web app design. Designers must ensure that the app is easy to navigate, with clear calls to action and a logical flow of information. This can be achieved through the use of user-centric design principles such as user personas, user testing, and user feedback.

Getting Started

My task was to look at a previous design, and reinvigorate it.LottoFish was originally designed by a different UX designer when my client contacted me. What they had was a good start, but there was something about the app that didn't meet full expectation. I felt that the app lacked a few things; my skills confidently led me to believe I could adjust and redesign the app to fulfil my clients full vision and perhaps even show them something fresh.My goal wasn't the stray too far from the original design, but bring to light the full potential of this application. Every UX designer has experience and designs in their mind that works for each project. Just looking at this one in particular, I knew it was in my alley of expertise.

Meet the Users

Ideation

As previously stated, there was nothing wrong with the first designs of the app. The challenge of this was how to separate my design from the first iteration. I did not want to make a carbon copy and I did not want to make something that was so far out left field that it shattered the original design's format. I had to examine what the app did right, and where there could be improvement.

Previous Design of Lottofish

Looking at the previous designs, I cannot say that there was anything particularly wrong with the first designer's implementation. It was a clean look, communicated clearly, and seemed intuitive enough.However, if I were to present this app to someone as it was, could the user be able to identify what app they were using? Most they could gather it was about buying lottery tickets and joining a pool-- that's fine, but it wasn't enough.

I had a clear direction to what this design should now accomplish. The designs before were okay, but that glaring problem for a business is simply unacceptable to me. A business needs to have it's name on it's product first and foremost, and inspecting the Lottofish app, I was not able to do so easily.Brand recognition was something this app desperately needed. Opening any app from a popular company, you will know who published it without having to leave the front page in most cases.

First Iteration

My initial sketch used mostly the same format of the previous design. My main concern was to take this into something a bit more recognizable and set it apart to a unique look which would offer real brand identify.

These were ideas I had that would instantly set the app apart from it's original design.- Design a unique logoBy creating a logo, I could weave it into the app as a starting loading screen, and an idle loading screen between pages if possible.- Set a specific color schemeEvery successful app has a color scheme that sets it apart from the competition. Having seen other lottery apps, bright white and accent colors is over used and burns the eyes-- something that is cool, collected, sleek is what I'd like to go for.- Offer unique interface that retains users.There was little aside from the main purpose of the app to keep users engaged. Perhaps adding a floating action button (FAB) and fun facts in the loading screen could help users feel more engaged.

Research

Field StudiesThe best way to conduct research for this product was to simply have a group of volunteers use the initial sketch and get raw feedback. From a pool of 20 participants, these were the findings.

What to Improve?It was good to hear most users were satisfied with the app, but of course there is always room for improvements.1) The users who were unable to complete all the tasks were confused about what numbers they chose. They'd select the numbers, but weren't sure what order they just selected them in. It would be good to add a feature that shows the order of the numbers they select.2) Even though the app seemed accessible, it didn't seem interesting enough to engage users. I needed a feature that showed something more to keep the user's attention.3) Was the app too simple? Some users who finished it were left wanting more, and that to me speaks volume of how much left was needed.

Results

After thoroughly reviewing the research, I became convinced that the ideas I had in mind would undoubtedly infuse LottoFish with a fresh and captivating design. With careful implementation, these concepts held the potential to breathe new life into the app, elevating its appeal and impact. The thorough analysis fueled my enthusiasm and confidence, leaving no doubt that these ideas would truly transform LottoFish for the better.

Style guide

LottoFish's original design, in my opinion, played it safe. There was nothing inherently wrong with what the first UX designer did, but I wanted to go somewhere more daring. I implemented a dark color scheme and bright accent colors for the app; this made the design feel more vibrant, grabbing the users attention and stayed in line with the Web Content Accessibility Guidelines (WBAG).

Takeaway

I felt extremely privileged to have this be my first project working with people in the industry. The app contains nothing short of what I believe is my passion and creativity.
Most importantly, my client was happy with the results.Designing Lottofish requires striking a balance between coolness and sophistication. The app's visual appeal should captivate users with sleek and modern design elements, while maintaining a polished aesthetic. Embrace a minimalistic interface and create a strong brand identity with a memorable logo. Incorporate gamification and interactive features to enhance the user experience. Ensure secure and seamless ticket purchasing, and offer personalization options. By focusing on these aspects, Lottofish can become the go-to app for lottery enthusiasts seeking a modern and enjoyable experience.By focusing on the new design, minimalistic design, branding, gamification, secure purchasing, and personalization, you can create an app that exudes elegance while capturing the excitement of lottery games.